美文网首页React Native开发
react-native 自定义字体

react-native 自定义字体

作者: MurphyYue | 来源:发表于2020-03-02 15:18 被阅读0次

react-native使用第三方字体时分为Android端和iOS端。

准备工作:.ttf格式的字体文件(Google Web Fontsdafont.comfont.chinaz.com

Android端

安卓端比较简单,只需要把字体文件放到指定文件夹中,代码可以通过fontFamily:"字体文件名称"就可以使用字体。

1.找到路径

项目名/android/app/src/main/assets/fonts(如果没有fonts文件夹的话就自己建一个)

Android端字体文件位置

2.在代码中使用

 <Text style={{fontFamily: 'QUIVEIT_'}}>这些文字的字体使用的是自定义字体</Text>


iOS端

其实iOS端也不是很复杂,只是Android端可以在代码中通过字体文件的名字使用字体文件,但是iOS端需要我们知道字体的名称而不是字体文件的名称。

首先我们需要把字体文件放到:项目名称/src/assets/fonts文件夹中

1.获取字体文件的名称

这里需要第三方工具来获取字体名,鉴于大家的开发设备大多是Windows和Mac两种,接下来根据这两个操作系统来说获取字体名称

1.Windows系统

1)找到c盘/Windows/Fonts文件夹

2)打开后可以看到系统中现存的字体文件

3)只需要把我们的字体文件粘贴到这里,粘贴完就可以显示我们的字体文件了

4)双击刚刚添加的ttf字体文件,就可以看到字体名称。

Windows获取字体名称

2.Mac系统

Mac系统有个叫字体册的app

搜索字体册

1)打开字体册app

2)将我们的ttf字体文件拖入该app中就可以看到我们的字体名称了(红框中的名称)

字体文件拖入红框中

2.修改字体文件名称

为了便于我们后期使用该字体时清楚知道该字体的名称,我们最好是把该字体文件的名称就设置为以上步骤获取到的字体名称。(当然,记得也需要把安卓端步骤fonts文件夹的字体文件也改一下名字)

3.xcode配置

1)用code打开项目

2)找到Resources文件夹

3)将项目名称/src/assets/fonts文件夹中的字体文件拖拽到Resources目录下,按照下图选择

字体文件拖入Resources目录

3)在项目名称目录下找到info.plist并单击,在Fonts provided by application下添加键值对,值就是我们字体文件的文件名

添加键值对

4.在代码中使用

```html

<Text style={{fontFamily: 'DIN Alternate'}}>这些文字的字体使用的是自定义字体</Text>

```

相关文章

网友评论

    本文标题:react-native 自定义字体

    本文链接:https://www.haomeiwen.com/subject/fpnmkhtx.html