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

Question

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

您能告诉我仅在此浏览器中为标题设置另一种字体的最简单方法吗？

Answer 1

要专门为浏览器设置样式，最简单的解决方案是使用javascript检测浏览器并将浏览器名称作为类名写入页面上的body标签。然后，您可以使用classname来控制该浏览器的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;
}

如果您已宣布＆＃34; font-weight：normal;＆＃34;在@font声明中，它被忽略，对于某些浏览器，您需要为h1样式创建一个附加规则：

h1 {
  font-weight: normal;
}