css - CSS：不同大小的特定字体

Question

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

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

Answer 1

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

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

Answer 2

字体是不可能的。但是你可以有两个不同大小的不同类，比如

.tohama{}
.sanserif{}

Answer 3

不，这是不可能的。通常，不同的属性之间没有联系，例如CSS 中的font-family和font-size。（简写类似于font设置多个属性，但除此之外它们不会改变这一点。） CSS 故意缺乏编程特性：您不能使属性的值依赖于已设置为另一个属性的值。很少有例外；其中，font-size-adjust可能看起来相关，但它的工作方式相反，并且是间接的：它根据字体的特征调整字体大小。

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