前言

项目中需要展示一些别的平面或者其他民族文字时，需要使用该文字对应的字体文件，一般来说都是.ttf的。

在React Native中，使用字体文件就是在style中设置fontFamily属性！
比如，这里的字体文件为：FangSong.ttf，那么使用

fontFamily: 'FangSong'

后边不要加.ttf后缀！

下边来具体说一下，两个平台使用字体文件时具体的操作！

Android平台

Android平台相对来说还是比较简单的，我们在项目目录/android/app/src下，新建assets目录，然后再建fonts目录，把我们的字体文件拷贝到该目录下即可！

iOS平台

这边就稍微复杂一些！
①首先我们要将字体文件，拖入到我们的项目下边，当然前提是我们使用xcode打开了项目，拖入指的就是拖入到xcode里边打开的项目目录下，然后记得要勾选Create groups和 Add to targets 项目

②然后编辑info.plist文件，在Information Property List这一项右键，选择add row，然后选择添加key为Fonts provided by application的Array中添加item ，value为FangSong.ttf，这里要填写完整的名称，包括后缀！

这样就可以了！

遇到的坑

在Android端，我们是可以随便修改字体文件的名称，然后对应的在代码中写上对应的修改的字体文件就可以了！
但是iOS就不可以，可能大家在iOS端都遇到过这样一个错误！

Unrecognized font family 'xxxxxxxx'

原因就是不能识别你给的字体文件名称，因为iOS下fontFamily要求使用字体家族名，而不是我们随意更改的字体文件名。

当然，我们可以使用下边代码来把项目中引入的所有字体的字体家族名打印出来：
在ios/项目/下的AppDelegate.m文件中，（iOS小白，请见谅）

  NSInteger totalCount = 0;for (NSString *familyName in [UIFont familyNames]) {NSArray *familyNameArr = [UIFont fontNamesForFamilyName:familyName];NSLog(@"familyName:%@   count=%ld", familyName,[familyNameArr count]);NSInteger tempCount = [familyNameArr count];totalCount += tempCount;for (NSString *fontName in familyNameArr) {NSLog(@"++++     %@", fontName);}}NSLog(@"totalCount=%ld",totalCount);

然后在控制台找一下，我们对应字体的字体家族名！

或者呢，我们可以使用Font Creator软件查看字体里的字体家族名，打开字体文件之后，在最上边显示的：

图中红框圈起来的格式为字体文件名-字体家族名
或者选择字体->属性，然后在标识符一项中字系就是我们要的！

然后在iOS中使用它的字体家族名！

关于Font Creator软件呢，我之前在Android端文本或者webview引入字体文件的时候提到过，需要了解的可以翻一下之前的博客！

所以为了两个平台的一致，代码需要统一的话（不用三目运算去作平台的判断），我们的文件名命名的时候，也尽量使用字体家族名去命名，然后在代码中使用字体家族名，当然也是字体文件名，从而避免这个问题的出现！

其他

我在使用的过程中遇到了一个问题，就是fontFamily属性目前只能设置一个字符串的值，也就是说只接收一个字体，而css中，我们是可以使用font-family来设置一组字体的！
然后它是一个字体回退的机制来从前到后去匹配的！目前我还不知道如何在RN中实现这一功能！
我在github上提过issue，没人搭理！哈哈哈哈。。。。。。
也在各种问答网站提过问题，也没人回答！。。。。。。。
希望有知道的，可以解决这个问题的，告知我！谢谢！

React Native入门（十二）之使用第三方字体文件相关推荐

React Native 入门实战视频教程（36 个视频）
React Native 入门实战视频教程(36 个视频) #1 React Native 课程介绍「02:14」 #2 搭建 React Native 开发与运行环境跑起来「05:07」 #3 演示 ...
React Native 入门实战视频教程（37 个视频）
我这里有视频教程,全部是我自己辛苦录的,有兴趣的可以看下. React Native 入门实战视频教程(37 个视频) 从零开始入门学习 React Native 开发,手把手教你写 App 项目 # ...
React Native 入门实战视频教程（4 个视频）
React Native 入门实战视频教程(4 个视频) #1 React Native 课程介绍「02:14」 #2 搭建 React Native 开发与运行环境跑起来「05:07」 #3 演示在 ...
网络编程懒人入门(十二)：快速读懂Http/3协议，一篇就够！
本文中文译文由作者"ably.io"发布于公众号"高可用架构",译文原题:<深入解读HTTP3的原理及应用>.英文原题:<HTTP/3 dee ...
IM开发者的零基础通信技术入门(十二)：上网卡顿？网络掉线？一文即懂！
[来源申明]本文引用了微信公众号"鲜枣课堂"的<上网慢?经常掉线?这篇文章告诉你该怎么办!>文章内容.为了更好的内容呈现,即时通讯网在引用和收录时内容有改动,转载时请注 ...
【Visual C++】游戏开发笔记四十四浅墨DirectX教程十二网格模型和X文件使用面面观
本系列文章由zhmxy555(毛星云)编写,转载请注明出处. 文章链接: http://blog.csdn.net/zhmxy555/article/details/8586540 作者:毛星云(浅墨 ...
【Visual C++】游戏开发笔记四十四浅墨DirectX教程十二网格模型和X文件使用面面观...
本系列文章由zhmxy555(毛星云)编写,转载请注明出处. 文章链接:http://blog.csdn.net/zhmxy555/article/details/8586540 作者:毛星云(浅墨) ...
react native开发Android 篇——集成自定义的字体
react native开发Android 篇--集成自定义的字体第一种:link添加自定义字体第二种:直接复制字体到`android/app/src/main/assets/fonts`目录下 ...
React Native入门（十四）之动画（1）Animated详解
前言在APP的开发中,流畅合理的动画能大大提高用户体验,Android和iOS原生都有对应的动画系统,同样的在RN中也有用于创建动画的API,就是Animated.Animated库使得开发者可以非 ...

React Native入门（十二）之使用第三方字体文件

前言

Android平台

iOS平台

遇到的坑

其他

React Native入门（十二）之使用第三方字体文件相关推荐

最新文章

热门文章