Question

如果我对同一个选择器使用@font-face字体和font-variant: small-caps，则字体将回退到safari中的下一个系统默认字体。我怎么绕过那个？

Answer 1

首先创建一个复制问题的示例时遇到了一些麻烦，这让我意识到font-face不是标准的CSS2属性;相当于font-family。所以我对@ font-face进行了一些快速研究，发现它取决于你如何看待它 - 要么是Firefox 3.5特有的非标准属性，要么是非主流CSS3的一部分。 Safari对CSS3有部分支持，具体取决于版本，但我怀疑这是导致不良行为的原因。

Answer 2

这是一个WebKit错误。它已被修复，Safari 应该在下次更新时没问题。当前版本的Chrome使用的是较新版本的WebKit，其中修复了错误。这是检测它的好方法（来自SafariSmallCapsWebFontFix）：

if ((navigator.userAgent.match(/WebKit\/([^.]+)/) || [] )[1] < 534) {
    // Broken, work around it!
}

您可以使用该JavaScript，例如，向html节点添加一个类，并更改您设置页面样式的方式。

Answer 3

我觉得它只是一个错误:(我现在使用：第一个字母的伪选择器来实现

@ font-face和font-variant坏主意？

3 个答案: