React-Native设置自定义字体文件
2020/05/14更新
接入第三方字体ttf
AirbnbCereal-Bold.ttf
AirbnbCereal-Light.ttf
Android
字体文件放在android/app/src/main/assets/fonts/文件目录下就行了
使用的时候在style中指定fontFamily即可
fontFamily: 'AirbnbCerealApp-Bold',
iOS
1、把字体文件拖到iOS工程目录下
- Copy items if needed
- Create groups
确保在xcode中的TARGETS->PROJECT->Build Phases->Copy Bundle Resources中包含这些字体文件
2、修改Info.plist:
加入以下代码（本质上是添加 Fonts provided by application项）
<key>UIAppFonts</key>
<array>
<string>AirbnbCereal-Bold.ttf</string>
<string>AirbnbCereal-Light.ttf</string>
</array>
3、输出iOS系统支持的所有字体
-(void)logFont {
// 输出所有的字体名称，搜索是否有刚加入的字体文件名
for (NSString *familyName in [UIFont familyNames]) {
NSArray *familyNameArr = [UIFont fontNamesForFamilyName:familyName];
NSLog(@"----------------");
NSLog(@"familyName: %@", familyName);
NSInteger tempCount = [familyNameArr count];
for (NSString *fontName in familyNameArr) {
NSLog(@"fontName: %@", fontName);
}
}
}
在输出的结果中搜索包含
Airbnb的项
familyName: Airbnb Cereal App
fontName: AirbnbCerealApp-Bold
fontName: AirbnbCerealApp-Light
因此iOS端不能在代码中直接使用AirbnbCereal-*，而应该使用AirbnbCerealApp-*
//以使用 AirbnbCereal-Bold.ttf 为例
❌
fontFamily: 'AirbnbCereal-Bold',
✅
fontFamily: 'AirbnbCerealApp-Bold',
接下来说的是使用iconfont，字体文件 —> 图标
今天主要说说如何通过字体文件加载应用中的一些图标
首先推荐一个网站iconfont-阿里巴巴矢量图标库，这里有海量的图标，可以下载你想要的各种矢量图标，你也可以在注册并登陆账号后，把自己想要的图标打包、下载为文件
效果
关于
<Text>组件
通过fontFamily可以指定<Text>显示的字体文件，下文将详细说明-
代码
<View style={styles.container} > <Text style={styles.iconStyle}></Text> <Text style={styles.iconStyle}></Text> <Text style={styles.iconStyle}></Text> <Text style={styles.iconStyle}></Text> <Text style={styles.iconStyle}></Text> </View> //样式 const styles = StyleSheet.create({ container:{ backgroundColor:'white', width:width-44, height: 36, marginTop: 2, flexDirection:'row', alignItems: 'center', justifyContent: 'space-around' }, iconStyle: { color: 'red', fontFamily:'iconfont', fontSize: 30 } }) -
效果图：
用字体文件加载图标
解释
-
从阿里巴巴矢量图标库中选择适合的图标，并打包下载
-
下载后得到如下文件，
iconfont.tff即为所需文件
-
在根工程目录下创建
assets/fonts/文件夹，导入iconfont.ttf文件
1. iOS
- 把
iconfont.ttf文件拖到iOS工程目录下
-
修改Info.plist
在info.plist文件中添加key为
Fonts provided by application的Array中添加itemiconfont.ttf，到此为止，已经可以在RN项目（iOS端）中使用对应fontFamily:iconfont中的字体图标了
如下图所示：
2. Android
之所以在工程目录下创建assets/fonts这样的路径，就是为了iOS和Android统一，因为Android必须要把字体文件放在[project root]/android/app/src/main/assets/fonts/文件夹下才能生效，好吧，我们把工程目录下的assets拷贝一份（可以通过编写脚本自动执行）到Android/app/src/main目录下
3. 使用
<View style={styles.container} >
<Text style={{fontFamily:'iconfont'}}></Text>
<Text style={{fontFamily:'iconfont'}}></Text>
<Text style={{fontFamily:'iconfont'}}></Text>
<Text style={{fontFamily:'iconfont'}}></Text>
<Text style={{fontFamily:'iconfont'}}></Text>
</View>
效果就是文章开篇的效果图了
4. 弊端
图标对应的是unicode码，不够直观， (如："", "")跟显示的图标没有直接的对应关系
更新
最近注意到有评论反映在iOS端运行报错
Unrecognized font family 'iconfont'
通过跟@_MinYa_的沟通，发现了一种导致上述问题的可能性
在阿里巴巴矢量图标库中新建项目的时候注意FontClass/Symbol前缀和Font Family
默认值是icon和iconfont
如果这里有自定义的情况的话，在代码中引用的时候fontFamily:'自定义FontFamily'
鉴于上述问题，强烈建议创建字体文件项目的时候使用默认名称
