css - @font-face 仅当字体安装在本地计算机上时才有效

Question

我正在尝试使用自定义字体，Google 字体无法提供该字体。我解压字体并将其放入我的 React 元素的 src/assets/fonts 中。

在我的 index.css 中，我加载的字体如下:

@font-face {
  font-family: 'LemonMilk';
  src: local('LemonMilk'), url(./assets/fonts/LemonMilk.otf) format('otf');
}

我在本地主机上测试了该应用程序并将其托管在网络上进行测试，它工作正常，因为字体是在我的机器上本地安装的，但如果我在另一台机器上打开该应用程序，它就无法工作。我还从我的机器上删除了字体，从那时起后备字体开始显示。我错过了什么？谢谢

Answer 1

正确的字体名称是 Lemon/Milk，您还需要将其转换为其他格式，例如 WOFF WOFF2。

请按此操作:

1. 转到这个Website免费在线字体生成器
2. 上传您的字体并检查 TTF、EOT、WOFF、WOFF2(参见 browser support)
3. 点击转换 > 下载
4. 将新转换的字体上传到您的服务器

最后，您的 CSS 应该与此类似。

@font-face {
    font-family: 'Lemon/Milk';
    src: url('LemonMilkbold.eot');
    src: url('LemonMilkbold.eot?#iefix') format('embedded-opentype'),
        url('LemonMilkbold.woff2') format('woff2'),
        url('LemonMilkbold.woff') format('woff'),
        url('LemonMilkbold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

请注意您还需要转换任何其他字体粗细。并且不要忘记添加正确的路径