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

前言

项目中需要展示一些别的平面或者其他民族文字时，需要使用该文字对应的字体文件，一般来说都是.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，没人搭理！哈哈哈哈。。。。。。
也在各种问答网站提过问题，也没人回答！。。。。。。。
希望有知道的，可以解决这个问题的，告知我！谢谢！