添加字体以响应本机项目的故障排除答案

【问题标题】：Troubleshooting adding fonts to react native project添加字体以响应本机项目的故障排除
【发布时间】：2017-09-19 03:32:25
【问题描述】：

我正在尝试向我的 react-native 项目添加一些自定义字体。我将字体文件放在/fonts 文件夹中，并将这个sn-p 添加到package.json：

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

然后跑了react-native link。我可以在 Android 上使用这些字体。到目前为止一切顺利。

问题出在 iOS 上。因此，我已经阅读了有关此问题的所有堆栈溢出问题，但没有一个解决方案有效。我已经：

确保它们包含在目标中。目标成员资格框中我的项目名称旁边的复选框已选中。
仔细检查我的字体是否作为资源包含在我的包中。
在应用程序 plist 中包含字体。react-native link 正确完成了前 3 个步骤。
清理项目并重建。
杀死打包程序，然后重新运行项目。

我还是不能使用字体。所以我把这个 sn-p 添加到我的appDelegate.m:

for (NSString* family in [UIFont familyNames])
{
    NSLog(@"%@", family);

    for (NSString* name in [UIFont fontNamesForFamilyName: family])
    {
        NSLog(@"  %@", name);
    }
}

将所有可用的字体名称打印到 xCode 日志。看来我只能使用 Graphik-Medium：

Graphik Web 出现在列表中的其他位置，字体名称混乱：

bebas-neue 在此列表中找不到。

有人知道我做错了什么吗？是不是字体不兼容iOS？

【问题讨论】：

我曾经遇到过一个问题，xcode 中的字体不是文件的名称，而是文件的内容声明的字体名称。
我最终通过使用 .otf 文件而不是 .ttf 解决了这个问题

标签： ios xcode fonts react-native

【解决方案1】：

这就是我们如何让我们的自定义字体在 iOS/Android 中运行，所以希望这对您有所帮助。删除node_modules，清除模拟器历史并删除iOSbuild文件夹。我们手动将字体（.otf 和 .ttf）放到android/app/src/main/assets/fonts 和ios 文件夹中。然后在 XCode 中，我们确保它们位于 Info.plist 的“应用程序提供的字体”部分中，然后确保它们位于“构建阶段”的“复制捆绑资源”部分中。如果我们正在更新它们，我们会删除它们并在该部分重新安装它们。然后，如果您重新安装所有内容，它应该可以工作。希望这会有所帮助！

【讨论】：