在前端开发中，我们经常需要使用自定义字体来实现特殊效果或者匹配品牌风格。其中，@font-face 是一种常见的方式来引入自定义字体。
但是，在使用 @font-face 的过程中，我们有时会遇到字体无法正确加载或者应用的问题。这时就需要了解如何判断 @font-face 是否生效，以便及时发现和解决问题。
判断方法
使用平台提供的工具
不同的浏览器和操作系统都提供了相应的调试工具，可以方便地查看页面中使用的字体是否被正确加载和应用。以下是几个常见的调试方法：
Chrome 开发者工具：在 Elements 面板的 Styles 子面板中，可以查看每个元素的样式，并且在字体名称旁边会显示一个小图标，表示该字体是否被成功加载。
Firefox 开发者工具：在 Inspector 面板的 Fonts 子面板中，可以查看所有使用的字体，并且包含字体来源、格式、大小等信息。
Windows 字体查看器：在 Windows 操作系统中，可以使用字体查看器来检查是否成功安装了自定义字体。
使用 CSS 属性
除了使用工具之外，我们还可以通过 CSS 属性来判断 @font-face 是否生效。以下是几种常见的方法：
font-family
当 @font-face 定义的字体被成功加载并应用时，我们可以在样式表中使用 font-family 属性来引用该字体，并且可以直接通过浏览器的开发者工具查看是否生效。
---------- - ------------ --------- ---- ------------------- ---------------- - ---- - ------------ --------- ----------- -
如果 MyFont 能够被正确应用，则说明 @font-face 已经成功加载。
font-display
font-display 是一个比较新的 CSS 属性，可以控制在字体加载完成之前如何展示文本。它可以帮助我们更好地处理字体加载的问题，并且在一些情况下可以提高页面性能。
以下是 font-display 的一些常用取值和对应的作用：
- auto：使用默认行为来显示文本，等价于 font-display: swap。
- block：先显示无衬线字体（如 Helvetica），然后在自定义字体加载完成后再替换。
- swap：立即使用备用字体（如系统默认字体），然后在自定义字体加载完成后再替换。
- fallback：优先使用无衬线字体，如果该字体不能正常显示，则使用备用字体，然后在自定义字体加载完成后再替换。
- optional：和 fallback 类似，但是只有在用户有足够的带宽时才会加载自定义字体。
---------- - ------------ --------- ---- ------------------- ---------------- ------------- ----- - ---- - ------------ --------- ----------- -
通过设置 font-display 属性，我们可以控制如何处理字体加载的情况，并且可以直接通过浏览器的开发者工具查看是否生效。
小结
在前端开发中，引入自定义字体是非常常见的需求，而 @font-face 是一种常用的
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/29079