Question

如果我想在我的网站上限制字体系列使用，请说2或3种字体不同的字体（例如Times，Arial等）。有没有办法组织我的CSS，以便我有像

这样的东西

 fontType1 is font-family: "Times New Roman", Times, serif;
 fontType2 is font-family: Arial, sans-serif

然后，对于我在CSS中设置样式的每个UI元素，从可用的字体类型中选择，即fontType1，fontType2。同样适合我的颜色选择。

如果我更改了fontType1的font-family，我希望它一直在整个网站/样式表中。我不想进入每个css声明并更改它。如果我想改变我网站的一个“深色”，我希望它能够一直穿过网站;我不想每次使用它并改变它。

Answer 1

如果我正确理解您的问题，最好的方法（不使用预处理器）将是：

h1,h2,h3,h4,h5,h6,
.button, .promo{ /* Your list of selectors that need to use this font stack */
    font-family:one;
}

p,ul,
.small-print,.error{ /* Your list of selectors that need to use this font stack */
    font-family:two;
}

#nav,#footer{ /* Your list of selectors that need to use this font stack */
    font-family:three;
}

这不依赖于JS，它不会使你的HTML膨胀，最好的是你可以一次更新所有实例：）

这样您只需要在列表中添加新的选择器，而不必重新定义您的系列。在“共享”部分中有这个。我在这里写一下：http://coding.smashingmagazine.com/2011/08/26/writing-css-for-others/（找一个'共享'）。

ħ

Answer 2

没有办法直接使用CSS，但它是Sass，LESS和Compass等库的主要功能之一。 LESS可以由服务器端或客户端Javascript编译，Sass使用Ruby编译。 Compass是一个允许在Rails或Ruby Web应用程序的上下文之外编译Sass的库。

以下是您可以使用Sass做的一个示例：

$color: #4D926F;

#header {
  color: $color;
}
h2 {
  color: $color;
}

它编译成的CSS：

#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}

除了变量之外，如上所示，您还可以获得mixins（基本上是函数）和嵌套选择器。

Answer 3

有这样的事情：

.font-type1 { font-family: font1, font2, font3; }
.font-type2 { font-family: font4, font5, font6; }
.font-type3 { font-family: font7, font8, font9; }

并将它们设置在<body>元素上。

如果您希望使用JavaScript动态更改它：

HTML

<a class=changefont data-font="font-type1" href=#>Font 1</a>
<a class=changefont data-font="font-type2" href=#>Font 2</a>
<a class=changefont data-font="font-type3" href=#>Font 3</a>

的JavaScript

使用javascript（我为了简单起见使用jQuery，也可以单独用js完成）

$('.changefont').click(function() { $('body').removeClass().addClass($(this).data('font')); });

<强> Here's an Example!

通过更改更高级别的祖先类，可以在整个文档中生成一个很好的级联（层叠样式表）。

Answer 4

另一种方法是在UI元素中添加一些类。

CSS：

.fontType1 {font-family: "Times New Roman", Times, serif}
.fontType2 {font-family: Arial, sans-serif}

HTML：

<h1 class="fontType1">Header 1</h1>
<p class="someOtherCssClass fontType2">paragraph text goes here</p>

组织字体系列用法，网站颜色等

4 个答案:

HTML

的JavaScript