Question

我想在本地计算机中添加自定义字体，我在字体文件本身名为src/fonts/的{{1}}中添加了字体。

我发现有一个答案建议我应该这样写，并将这一行添加到我的DIN Next LT Arabic Regular.ttf文件中

index.css

，然后将@font-face { font-family: 'DIN Next LT Arabic Regular' !important; src: local('DIN Next LT Arabic Regular'), url('./fonts/DIN Next LT Arabic Regular.ttf') format('truetype'); }导入到我的index.css中，这已经通过index.js命令完成了。

但是它不起作用，我也不知道为什么。

PS：我有一个create-react-app文件，其中包含此行.env，不使用相对路径。

Answer 1

您可以使用“ Web Font Loader”将字体导入您的react-app，因此您可以使用此工具安装

npm install webfontloader --save

这只是一个例子：

1-在您的public / index.html中复制字体的链接

2-然后打开src / index.js并添加：

import WebFont from 'webfontloader';

  WebFont.load({

    google: {
      families: ['Droid Sans', 'Droid Serif']

     }});

Answer 2

此问题可能源于支持和/或兼容性问题（即，在浏览器x上有效的内容在浏览器y上无效）。

如果您使用的浏览器不支持该特定字体格式，怎么办？

虽然我通常建议您使用Google Fonts之类的（免费）服务来获取字体，但是有时候您需要托管和加载自己的自定义字体，因此我认为使用它会更好。 FontSquirrel's Web-Font Generator，它是一项服务，使您可以上传.ttf文件并创建Webfont程序包（包含所有不同字体格式的.zip文件夹）。

它还为您提供了一个CSS文件，该文件正确地链接了所有不同的字体格式，以确保您获得适当的支持，您可以在their blog上找到有关Font Squirrel的更多信息。

注意：我与Google Fonts或Font Squirrel没有关系，也不能工作，只是两种服务的满意用户。

React JS添加本地字体

2 个答案: