CSS：不同大小的特定字体

Question

我希望只有使用CSS3 Tahoma属性且没有任何额外类的Sans Serif以及大于font-face的文本为font-face。

是否可以使用{{1}}以及如何使用？

Answer 1

font-face无效，但LESS可能使用mixins和guards。如您所见，您需要定义略有不同的字体大小 - 但就是这样。字体系列声明基于此值。

我强烈建议过渡到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>

Answer 2

font-face无法实现。 但你可以有两个不同的类，如

.tohama{}
.sanserif{}

Answer 3

不，这是不可能的。不同的属性之间通常没有关联，例如CSS中的font-family和font-size。 （像font这样的Shorthands设置了几个属性，但是否则它们不会改变它。）CSS故意缺少编程功能：你不能使属性的值取决于作为值设置为另一个属性的属性。这个例外很少;其中，font-size-adjust可能看似相关，但它反过来也是间接的：它根据字体的特征调整字体大小。

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