Css @字体和字体变体是个坏主意吗？

如果我对同一个选择器使用

@font-face

字体和

字体变体：小写

，字体将退回到safari中的下一个系统默认字体。我该如何解决这个问题呢？

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

我认为这只是一个bug：（我现在使用：first-letter pseudo selector来实现这一点，

这是一个WebKit错误。它已经修复，Safari在下次更新时应该可以正常运行。当前版本的Chrome正在使用更新版本的WebKit，该错误已经修复。下面是一个检测它的好方法（从）：

if（（navigator.userAgent.match（/WebKit\/（[^.]+）/）| |[]）[1]<534）{
//坏了，去解决它！
}

您可以使用该JavaScript向

html

节点添加一个类，并更改页面样式

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