在前端开发中，经常需要引用各种字体来丰富网页的视觉效果。而本地字体由于不需要从服务器获取，能够提高页面加载速度，并且方便开发人员调试。但是在 macOS 系统下，直接使用本地字体却会遇到一些问题，如何解决呢？本文介绍 npm 包 local-fonts-macos，它提供了一种简单的方法使用本地字体。
为什么要使用 local-fonts-macos
在 macOS 系统下，直接使用本地字体需要通过 CSS 属性 font-family 声明字体名称，但这个名称必须和字体安装时的名称一致，而在 macOS 下，字体名称是由字体的 font-family 和字体的 PostScript 名称组成的。这就导致了即使字体文件的文件名和 font-family 中声明的名称一致，也可能不起作用。local-fonts-macos 这个 npm 包出现就是为了解决这个问题。
local-fonts-macos 提供了一种简单的方式，通过字体文件的 PostScript 名称来声明字体名称。
安装和使用
安装 local-fonts-macos:
npm install local-fonts-macos --save
然后在你的 CSS 文件中使用 @font-face 来加载本地字体文件：
@font-face { font-family: 'PingFangSC-Regular'; src: local('PingFangSC-Regular'), url('path/to/font/PingFangSC-Regular.otf') format('opentype'); }
在这个例子中，字体文件的 PostScript 名称为 PingFangSC-Regular，将字体名称声明为 PingFangSC-Regular。
其中，src 属性中使用 local 来判断系统中是否存在该字体，如果不存在就使用 url 加载字体文件。这样就能够正确地加载字体文件了。
注意事项
macOS 下会缓存已经加载的字体，如果你修改了字体文件，需要重新命名该字体，或者删除旧缓存，否则新修改的字体文件不会生效。
如果你在 CSS 样式中有使用到不同字重的字体，不同字重的字体文件 PostScript 名称很可能也不相同，需要分别声明不同的字体名称。
总结
local-fonts-macos 这个 npm 包提供了一种简单的方式来使用本地字体，它解决了在 macOS 系统下通过 CSS 属性 font-family 声明字体名称和字体文件的名称不一致的问题。使用方法也非常简单，希望本文对你对使用本地字体有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ad581e8991b448d86e8
