@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

看起来你的浏览器在理解字体文件方面有问题。尝试从字体文件制作 webfont 包。有很多工具可以处理它：

https://www.fontsquirrel.com/tools/webfont-generator

Webfont 包将包含所有主要受支持格式的字体，并将为您生成 css @font 指令。

免责声明：确保您有权使用该字体。

Answer 2

好吧，我建议为你的字体创建一个不同的 css 文件，然后将它导入你的主文件 css 还有这个 site 为你的字体生成字体 css 文件！

Answer 3

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

请关注：

去这个 Website 免费在线字体生成器
上传您的字体并检查 TTF、EOT、WOFF、WOFF2（参见 browser support）
单击转换 > 下载
将新转换的字体上传到您的服务器

最后，您的 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;
}

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

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

@font-face only working if the font is installed on the local machine

css

font-face

reactjs