如何为不同的浏览器使用不同的字体

Question

我通过@font-face使用字体时遇到了问题：Chrome会忽略此字体的font-weight规则，因此字幕看起来很差。搜索在我的情况下没有结果。所以我发现我的字体的另一个版本用于Chrome。

你能告诉我为这个浏览器中的标题设置另一种字体的最简单方法吗？

Answer 1

要设置专门针对浏览器的样式，最简单的解决方案是使用javascript检测浏览器并将浏览器名称作为类名写入页面的主体标签。然后，您可以使用该类名来控制该浏览器的CSS。

Here's a jsFiddle that detects Chrome.

但你的问题或许能得到更好的解决，而不增加额外的脚本和标记。

仔细检查您的字体路径。有些浏览器仍然会找到字体，有些更挑剔：

@font-face { 
    font-family: 'your-font-name'; 
    src: url('/fonts/your-font-name.woff2') format('woff2'), /* check path */ 
    url('/fonts/your-font-name.woff') format('woff'); /* check path */ 
    font-weight: normal; /* if this is being ignored, try declaring it in the h1 */ 
    font-style: normal; 
} 

如果您已声明“font-weight：normal;”在您的@font声明中，它被忽略，对于某些浏览器，您需要为h1样式创建附加规则：

h1 { 
    font-weight: normal; 
}