字体优先级问题

Question

我有以下CSS行：

font: 700 0.8rem Verdun, Arial, Helvetica, sans-serif;

选择阿里尔，直到凡尔登装载;

如果我使用：

font: 700 0.8rem Verdun;

凡尔登字体会立即加载，因此没有损坏的路径。

我希望只有在找不到凡尔登时才使用 Arial;

Answer 1

凡尔登是否包含在您的@font面声明中的重量 700 中？如果没有，那么Arial将是一个更好的匹配，所以选择。如果您没有声明任何权重，那么浏览器必须假设权重是正常的。

举个例子：

@font-face {
  font-family: 'Verdun';
  font-style: normal;
  font-weight: 700;
  src: local('Verdun'), local('Verdun-bold'),
   url('../fonts/verdun-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
   url('../fonts/verdun-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

如果您没有指定权重，那么 Verdun 是正常的 (400( 权重，因此与您的 css 要求的样式不匹配。