CSS：不同大小的特定字体答案

【问题标题】：CSS: Specific fonts for different sizesCSS：不同大小的特定字体
【发布时间】：2012-11-04 14:39:29
【问题描述】：

我希望小于 14px 的文本为 Tahoma 和大于 Sans Serif 的文本，仅使用 CSS3 font-face 属性且没有任何额外的类。

是否可以使用font-face 以及如何使用？

【问题讨论】：

我认为您不能在字体规格中定义字体大小范围：w3.org/TR/css3-fonts/#font-face-rule。如果您已经在缩小一些文本（我想是通过 css），为什么不将 font-family:Tahoma 添加到这些规则中？

【解决方案1】：

font-face 不可能，但 LESS 使用 mixins 和守卫可能。如您所见，您需要定义稍微不同的字体大小 - 仅此而已。字体系列声明基于此值。

我强烈建议过渡到 LESS（或 SASS）。 LESS 运行客户端，但有一些方法可以在服务器端编译它并将其作为 CSS 交付。见Compile a referenced LESS file into CSS with PHP automatically

.fontSize (@a) when (@a >= 100) {
    font-family: Impact, Charcoal, sans-serif;
}
.fontSize (@a) when (@a < 100) {
    font-family: "Comic Sans MS", cursive, sans-serif;
}
.fontSize (@a) {
    font-size: @a;
}


.cs {
    .fontSize(50px) 
}
.imp {
    .fontSize(110px)      
}

<div class="cs">comic sans font family</div>    

<div class="imp">Impact font family</div>

【讨论】：

【解决方案2】：

字体无法实现。但你可以有两个不同大小的不同类，比如

.tohama{}
.sanserif{}

【讨论】：

没有我提到的课程！

【解决方案3】：

不，这是不可能的。通常，不同属性之间没有联系，例如 CSS 中的 font-family 和 font-size。（像font 这样的简写设置了几个属性，否则它们不会改变这一点。） CSS 故意缺乏编程特性：你不能让一个属性的值依赖于另一个属性的值。很少有例外；其中，font-size-adjust 可能看起来相关，但它的工作方式正好相反，而且是间接的：它会根据字体的特征调整字体大小。

所以没有 CSS 解决方案。在 JavaScript 中，如果计算的字体大小大于或小于某个阈值，您可以调查元素的样式设置并更改字体系列。但它有点脏，您可能需要为此遍历整个文档树。

【讨论】：