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

Question

我通过 @font-face 使用字体时遇到了问题:Chrome 忽略了此字体的 font-weight 规则，因此字幕看起来很差。在我的案例中搜索没有结果。所以我找到了我的字体的另一个版本，以便在 Chrome 中使用它。

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

Answer 1

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