CSS：针对不同大小设置特定字体

Question

我希望小于14px的文本使用 Tahoma 字体，大于等于14px的文本使用 Sans Serif 字体，只使用 CSS3 的 font-face 属性，并且不需要额外的类。

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

- Omid

---

我认为在字体规范中无法定义字体大小范围：http://www.w3.org/TR/css3-fonts/#font-face-rule。如果您已经通过CSS将某些文本缩小，为什么不将font-family:Tahoma添加到这些规则中呢？ - Willem Van Bockstal

Answer 1

font-face 不支持此功能，但是可以使用 LESS 的 mixins 和 guards 实现。您需要略微调整定义字体大小的方式即可。字体系列声明将基于此值。

我强烈建议您转向使用 LESS（或 SASS）。LESS 在客户端运行，但有办法在服务器端编译并将其作为 CSS 交付。请参见 如何使用 PHP 自动将引用的 LESS 文件编译为 CSS。

.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>

- Patrick

Answer 2

这不可能通过font-face实现。 但是你可以为不同的大小设置两个不同的类，例如

.tohama{}
.sanserif{}

- Vivek Dragon

---

不要使用类，就像我之前提到的一样！ - Omid

Answer 3

不，这是不可能的。在CSS中，不同属性（如font-family和font-size）一般没有任何关联。（像font这样的简写会设置几个属性，但除此之外它们并不改变这一点。）CSS有意地缺乏编程功能：您不能使一个属性的值取决于已设置为另一个属性的值。有一些例外情况；其中，font-size-adjust可能看起来相关，但它是反过来间接实现的：根据字体的特征调整字体大小。

因此，没有CSS解决方案。在JavaScript中，您可以调查元素的样式设置，并在计算出的字体大小大于或小于某个阈值时更改字体系列。但这会变得有些混乱，而且您可能需要遍历整个文档树。

- Jukka K. Korpela