Chrome 字体显示 CSS 属性

Question

我最近一直在测试 font-display，但是我的 Chrome 浏览器 (Chrome 65) 在工作 (Centos 7) 和家里 (Windows 10 ) 似乎没有将其识别为有效属性。在 DevTools 中查看，属性旁边有黄色感叹号，表示 "Unknown Property Name".

据我了解，font-display 从版本 63 开始在 Chrome 中得到支持。

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

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

谢谢

Answer 1

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

Answer 2

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

Chrome 字体显示 CSS 属性

Chrome font-display CSS property

css

devtools

google-chrome-devtools