react native 添加自定义字体

首先介绍一下OTF字体，TTF字体，TTC字体。
OTF字体（OpenType）由Microsoft和Adobe公司开发的字体格式，而ttf字体（TrueType）是由美国苹果公司和微软公司开发的字体格式，两种字体相比OTF字体更为先进，支持多个平台，拥有很大的字符集，还有版权保护等特性，目前多数字体厂商不在支持TTF字体，仅提供OTF字体。如果有些比较老的设备仅支持ttf字体可以找工具将OTF字体转成TTF字体。
TTC 档会含超过一种字型，例如繁体 Windows 的 Ming.ttc 就包含细明体及新细明体两种字型 (两款字型不同处只是英文固定间距)，而 TTF 就只会含一种字型.
TTC是几个TTF合成的字库，安装后字体列表中会看到两个以上的字体。两个字体中大部分字都一样时，可以将两种字体做成一个TTC文件，现在常见的TTC中的不同字体，汉字一般没有差别，只是英文符号的宽度不一样，以便适应不同的版面要求。
虽然都是字体文件，但.ttc是microsoft开发的新一代字体格式标准，可以使多种truetype字体共享同一笔划信息，有效地节省了字体文件所占空间，增加了共享性。但是有些软件缺乏对这种格式字体的识别，使得ttc字体的编辑产生困难。

1.首先，确保字体格式是ttf格式的字体，并将自定义的字体整体存入项目文件夹中

比如新建个文件夹名为fonts放在根目录下

image.png

2.其次，修改项目文件夹的package.json文件，要类似于文件中键值的写法，

添加一行如下的json，要求是双引号严格的json

"rnpm": {
    "assets": [
        "./src/fonts/"
    ]
  }

注意，上一行的json要以英文逗号结尾，这一行的json一定不能以英文逗号结尾

3.随后，命令行进入项目文件夹根目录，运行如下命令

react-native link
如果package.json文件写对了，一定能够完成文件的链接
这个链接过程会自动将字体文件夹拷入安卓的资源文件夹中，
ios项目的info.plist 会自动添加如下几项

<key>UIAppFonts</key>
    <array>
        <string>xindiFont.ttf</string>
    </array>

android会自动拷贝到 android/app/src/main/assets/fonts/ 目录下

完成链接字体文件后，就可以使用了，亲测有效

注意！！！

安卓下fontFamily样式属性直接填写字体的文件名称即可（不填写后缀）
然而ios下fontFamily要求使用字体家族名，这相当麻烦，没有文件名直观

，你可能需要使用font creator软件查看字体命名里的字体家族名，

然后在ios中使用它的家族名

因此，跨平台开发时，可以使用Platform.OS三元判断系统类型适配一个字体名，

或者将字体文件名称改成字体家族名（如果反向改字体家族名需要使用字体软件）

此外，注意字体的侵权问题，没有版权一旦上架就是侵权事实，

避免侵权可以更麻烦地服务端渲染需要用到字体成图片远程获取，就说用的是第三方的

字体转图片服务，具体是哪个第三方，就说是商业机密，字体公司也拿你没辙。

=====2023/09/20====更新

manual linking has been removed from react-native 0.69 in favour of autolinking feature so now you have link your assets in native module or else you can use react-native-asset

remaining steps are same as before crate a file in root directory of project

react-native.config.js

module.exports = {
    project: {
        ios: {},
        android: {}
    },
    assets: ['./src/assets/'],
};

after installing react-native-asset run below command

yarn react-native-asset or npx react-native-asset

最后编辑于：2023.09.20 16:42:07