Chrome 字体显示 CSS 属性答案

【问题标题】：Chrome font-display CSS propertyChrome 字体显示 CSS 属性
【发布时间】：2018-09-04 03:56:19
【问题描述】：

我最近一直在测试font-display，但是我的 Chrome 浏览器 (Chrome 65) 在工作 (Centos 7) 和家庭 (Windows 10) 上似乎都没有将其识别为有效属性。在 DevTools 中查看，该属性旁边有一个黄色感叹号，表示“未知属性名称”。

据我了解，Chrome 从 63 版开始就支持 font-display。

作为参考，我正在尝试将font-display 的值设置为swap。

有人知道为什么我没有看到它工作吗？

谢谢

【问题讨论】：

向我们展示您正在使用的 CSS。

标签： css google-chrome-devtools devtools

【解决方案1】：

font-display 描述符应与@font-face 规则一起使用，如下例所示：

@font-face {
  font-family: 'Arvo';
  font-display: swap;
  src: local('Arvo'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}

这方面的文档是here

【讨论】：

感谢您的回复

【解决方案2】：

font-display 是仅在 @font-face 规则上的属性，而不是标准元素。 See @font-face examples on MDN.

【讨论】：

更准确地说，它根本不是一个属性，它是一个@font-face 描述符。 CSS 调用这些描述符是有原因的。人们称它们为“属性”就是为什么会提出这样的问题。
正确，尽管我不会说这就是为什么会问这样的问题。就我个人而言，我觉得不同的术语是不必要的，但对于每个人来说都是自己的……无论哪种方式，赞成“描述符”是正确的。
非常感谢您消除我的误解。更有意义的是它在 @font-face 规则上