带有 React Native 的 iOS 模拟器上无法识别的字体系列答案

【问题标题】：Unrecognized font family on iOS simulator with React Native带有 React Native 的 iOS 模拟器上无法识别的字体系列
【发布时间】：2017-07-13 14:46:53
【问题描述】：

我已将 Linux Biolinum 字体（http://www.dafont.com/linux-biolinum.font、LinBiolinum_R.ttf、LinBiolinum_RB.ttf）添加到我的 React Native 项目中。安卓版本还行。但在 iOS 上，我总是看到错误 “无法识别的字体系列 LinBiolinum_R”。

我的风格是：

customFontRegular: {
    fontFamily: 'LinBiolinum_R',
},

我尝试将字体文件和字体系列重命名为“MyFont”，但在 iOS 上再次出现错误。

有什么想法吗？

【问题讨论】：

尝试 customFontRegular: { fontFamily: 'LinBiolinum R', },
见stackoverflow.com/a/67880817/3437900

标签： react-native

【解决方案1】：

在 Android 上，它采用文件名，您就完成了。然而，在 iOS 上，它有点复杂。

您应该采取几个步骤：

仔细检查字体文件是否包含在 XCode 的目标中
确保它们包含在“复制捆绑资源”步骤中（添加文件，而不是文件夹）
将它们包含在应用的 Info.plist 中
通过 FontBook 或 AppDelegate 中的一些日志语句查找字体名称

这里有更详细的解释： http://codewithchris.com/common-mistakes-with-adding-custom-fonts-to-your-ios-app/

祝你好运！

【讨论】：

是的，我有类似的问题是android使用文件名但IOS使用字体的“实际名称”（可能与文件名不同）。
我已经接受了答案。我已经检查了日志中的字体名称。字体名称应为 LinBiolinum 和 LinBiolinumB。谢谢。
上述解决方案适用于我的应用程序中的许多 fontFamily，但在我的情况下，它显示特定 fontFamily 的错误。太奇怪了。请让我知道任何其他方法来了解这个问题。我已经完成了以上步骤。
节省了很多时间，非常感谢。 :) 有没有办法重命名字体的“实际名称”？
轰隆隆！你拯救了我的一天。谢谢

【解决方案2】：

在您的 appdelegate 文件中实现以下代码

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

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

您应该使用 FONT FAMILY NAME 而不是您的字体文件名，如下所示

fontFamily: "FuturaBT-Book"

【讨论】：

这对我有用！我在返回之前将它放在 didFinishLaunchingWithOptions 内的 AppDeletegate.M 文件中。你可以在 Xcode 中看到日志。
Appdelegate 在哪里？

【解决方案3】：

2021 年简单/有效的解决方案。React Native 0.64。 XCode 12+

在ios/<ProjectName>/Info.plist 中添加这些行。重建 ios 应用程序。就是这样！

<key>UIAppFonts</key>
    <array>
      <string>AntDesign.ttf</string>
      <string>Entypo.ttf</string>
      <string>EvilIcons.ttf</string>
      <string>Feather.ttf</string>
      <string>FontAwesome.ttf</string>
      <string>FontAwesome5_Brands.ttf</string>
      <string>FontAwesome5_Regular.ttf</string>
      <string>FontAwesome5_Solid.ttf</string>
      <string>Fontisto.ttf</string>
      <string>Foundation.ttf</string>
      <string>Ionicons.ttf</string>
      <string>MaterialIcons.ttf</string>
      <string>MaterialCommunityIcons.ttf</string>
      <string>SimpleLineIcons.ttf</string>
      <string>Octicons.ttf</string>
      <string>Zocial.ttf</string>
    </array>

【讨论】：

【解决方案4】：

对我来说，将文件名更改为字体名称（在我打开文件时显示）就可以了。

【讨论】：

这对我也有用，即使我的字体名称中有空格（我认为这会产生问题），实际上也没关系。
这也是给我们的。 ICOMOON 有一个为字体命名的设置。它与我给出的文件名和 json 数据名不同。我很惊讶这很重要。如果其他人遇到这种情况，请确保在从 icomoon 或任何其他字体创建软件下载字体包之前设置字体名称。

【解决方案5】：

将此添加到您的package.json

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

然后在命令行中运行react-native link

【讨论】：

正确，但已弃用。见github.com/react-native-community/cli/blob/master/docs/…
嗯，好的@E.A.T，那么用rnpm 部分完成与react-native-link 相同的事情的替换方法是什么？
我添加的链接提供了说明。简而言之，这是移动到react-native.config.js

【解决方案6】：

对于已经尝试了一切但仍然面临这个问题的人来说，这是字体文件命名的问题，您需要将所有字体文件名重命名为其 postscript 名称。在 Mac 上，我可以使用 fontbook 打开字体并找出它。

一旦我将所有字体名称重命名为它们的 postscript 名称，错误就消失了，我还可以使用 font-weight css 属性来设置字体粗细。

【讨论】：

你刚刚拯救了我的夜晚，伙计。这是我从没想过的。

【解决方案7】：

只需执行这 5 个步骤。它救了我的命。 ^.^

添加文件夹字体包括您的字体（路径：src/assets/fonts）
将此代码粘贴到文件 package.json => "rnpm": { “资产”：[ “./资产/字体/” ] }
运行 cmd react-native link
打开 Xcode 选择 Target -> Build Phases 选项卡 -> Copy Bundle Resources 并添加您的字体
重建应用打开 Xcode 构建或运行 cmd react-native run-ios

【讨论】：

这对我有用！仅从第 4 步开始。谢谢。

【解决方案8】：

对于IOS，

确保将字体添加到资源复制捆绑资源
确保您在 Xcode 中有文件夹 Resources，不知何故它已被删除，您必须手动创建、导入字体到该文件夹
确保在字体册中使用家庭的名称

【讨论】：

【解决方案9】：

我有同样的问题，虽然这里的回答是正确的，但我想我会尝试为那些在阅读了上面的帖子后仍然感到困惑的人提供我自己的版本:)

我关注this article 将我的自定义字体添加到 XCode 项目中：

您实际上不必打开 XCode 来为 iOS 添加字体。我以 VSCode 为例。

步骤如下：

转到 node_modules>react-native-vector-icons>字体
您必须搜索它，模块不按字母顺序排列
复制所有可用的字体
转到您的 ios 文件夹并创建一个名为“Fonts”的 new 文件夹
小心！命名区分大小写，请确保使用大写的“F”（我没有，并且花了太多时间弄清楚我哪里出错了）
将之前复制的字体粘贴到字体文件夹中
接下来打开您的 info.plist 文件（它位于 ios>Your_Project_Name>info.plist）
对于您在 Fonts 文件夹中添加的每个新字体，在 UIAppFonts 键下添加一行，如下所示

最终的结果应该是这样的：

<key>UIAppFonts</key>
     <array>
        <string>font1.ttf</string>
        <string>font1.ttf</string>
        <string>[Add your font names here]</string>
    </array>

最后关闭 iOS 模拟器，在 ios 文件夹中运行 pod install 并在你的根目录中运行 npm install（为了更好的衡量），然后你可以运行 react-native run-ios 再次。

如果您使用的是最新版本的 React-Native，请不要使用 react-native link 命令，因为您会遇到 duplicate 错误

【讨论】：

最好在答案中包含资源的内容而不是链接，因为这会随着时间的推移而保留，而指向外部资源的链接可能不会。

【解决方案10】：

如果您有从 Internet 下载的自定义字体，请将它们放置在例如 src/assets/fonts 文件夹。
在根文件夹中创建一个名为react-native.config.js的文件，并在其中写入以下内容：
- module.exports = { assets: ['./src/assets/fonts'], };
通过在终端中运行 npx react-native link 来链接您的字体资源

【讨论】：

【解决方案11】：

在我的情况下，ttf 文件的名称是错误的。我必须编辑 ios/MyApp/Info.plist 并手动更改字体的文件名。

发件人：

...
<array>
  <string>Roboto_medium.ttf</string>
...

收件人：

...
<array>
  <string>Roboto-Medium.ttf</string>
...

【讨论】：

【解决方案12】：

你也可以试试这个，用这种方式指定你的字体，将它们映射成三种样式：

例如 Gilroy-SemiBoldItalic

// iOS
{
  fontFamily: 'Gilroy',
  fontWeight: '600',
  fontStyle: 'italic'
}

// Android
{
  fontFamily: 'Gilroy-SemiBoldItalic'
}

您还可以创建一个函数来为具有给定粗细和样式的字体生成样式。

希望对你有帮助

【讨论】：

【解决方案13】：

就我而言，它在 Android 上运行良好，但在 iOS 上却不行。字体文件名为PlayfairDisplay-VariableFont_wght.ttf。但是当我打开那个文件时，我看到的名字是：

。

所以，我把文件名改成了PlayfairDisplay-Regular.ttf，效果很好！

【讨论】：

【解决方案14】：

简单的解决方案。别担心

将其添加到您的项目中，然后将其添加到您的 Bundle 资源中

【讨论】：

【解决方案15】：

对我来说，解决方法是我忘记为字体添加目标。如果您不为字体添加目标，它将无法正常工作。

【讨论】：

【解决方案16】：

我通过将字体文件名更改为 Futura-Medium 来修复，如果我使用 FuturaMedium 会出现上述错误

【讨论】：

【解决方案17】：

我重命名了字体文件并重新运行react-native link 并最终处于这种状态。

我通过确保从 Resources 文件夹和 Info.plist 中删除旧字体来解决此问题，然后再次运行构建。

【讨论】：

【解决方案18】：

如果你正在运行 react-native ios 模拟器，你应该在 xcode 项目目录中包含字体。

react-native 链接 react-native-vector-icons 这样做，将字体添加到 xcode 项目中的 Resources 文件夹，并将字体添加到 pinfo 列表。

【讨论】：

【解决方案19】：

我遇到了同样的问题。我检查了是否已将字体正确添加到 xcode 项目中。然后我检查了 info.plist。

原来我拼错了名字。我写的不是 FontAwesome5_Solid.ttf，而是 FontAwesoem5_Solid.ttf。所以我修好了。这为我解决了问题。

总而言之 - 输入名称和检查名称时要非常小心。

【讨论】：

【解决方案20】：

2021 年回答 “反应原生”：“0.65.1”， "react-native-vector-icons": "8.1.0"

运行本机反应通常不起作用。它会创建一个重复的资源声明，您需要删除多余的行。另外，当你手动运行 react-native 链接时，它会修复你的 android，但是当你运行你的 ios 时，构建会说你需要取消链接，我们也会修复这个问题。

运行：

react-native link react-native-vector-icons

转到你的 ios->Podfile

删除此行（修复取消链接问题）：

pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

转到 ios->YOUR_PROJECT.xcodeproj->project.pbxproj

并删除“PBXResourcesBuildPhase”部分中的这些行：

            939BE13DDBD94B1FA64AA9EC /* AntDesign.ttf in Resources */,
            E863EAC557374C78B1C1A44F /* Entypo.ttf in Resources */,
            AA1DC0C0FC504FF98744B883 /* EvilIcons.ttf in Resources */,
            76E382E015E1470A9FDE5E08 /* Feather.ttf in Resources */,
            99E9B4823AAE456C89BF6DAF /* FontAwesome.ttf in Resources */,
            BCE22C5804AD4EC988CB4AD6 /* FontAwesome5_Brands.ttf in Resources */,
            FE4AA6C0F54D4A26A2088CDA /* FontAwesome5_Regular.ttf in Resources */,
            096B6D92BD5F4B59A1D262BE /* FontAwesome5_Solid.ttf in Resources */,
            1031EC31F55B40378CAD9D3D /* Fontisto.ttf in Resources */,
            2815970EABC94327BA107658 /* Foundation.ttf in Resources */,
            3CB0C5395AE44CEAB966AE51 /* Ionicons.ttf in Resources */,
            76E538C39D604AC4A0EAE522 /* MaterialCommunityIcons.ttf in Resources */,
            AC62C33B70D04559AC57B231 /* MaterialIcons.ttf in Resources */,
            49299510939246209A803546 /* Octicons.ttf in Resources */,
            6AF5C757975E45839F276B17 /* SimpleLineIcons.ttf in Resources */,
            45F326492D5E453E99A6EEAA /* Zocial.ttf in Resources */,

【讨论】：

【解决方案21】：

如果没有资产和字体目录，请创建它们！
将字体添加到您创建的assets/font/
添加你的根目录react-native.config.js文件
把react-native.config.js文件改成这个；

module.exports = {
    assets: ['./assets/fonts']
}

将你的字体和资源链接到 react-native 所以运行这个命令

npx react-native link

在你想要的地方使用你的字体，所以改变你的样式表，比如;

fontFamily: 'texgyreadventor-regular'

小心！如果您的字体没有粗体版本而不是删除

fontWeight: 'bold'

来自您的样式表类

在模拟器或物理设备中删除您的应用程序。比重新构建它。因为您必须重新构建您的应用，而不是刷新它才能看到新字体！

【讨论】：

【解决方案22】：

我遇到了同样的问题并通过在 Xcode 中打开项目并在 Project Navigator 的 Resources 文件夹下修复它，有重复的字体并将它们从 Resources 文件夹和 Info.plist 中删除，问题得到解决。删除后只需在 Xcode 中运行该应用程序，然后您也可以在其他工具中进行验证，而无需重新安装 npm。只需运行'react-native run-ios'，干杯:)

【讨论】：