使用React Native在iOS模拟器上无法识别的字体系列

Question

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

我的风格是：

customFontRegular: {
    fontFamily: 'LinBiolinum_R',
},

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

有什么想法吗？

Answer 1

在Android上，它获取文件的名称，您就完成了。然而，在iOS上，它有点复杂。

您应该采取以下几个步骤：

• 仔细检查字体文件是否包含在XCode中的目标
中
• 确保它们包含在步骤＆＃34;复制捆绑资源＆＃34;
中
• 将它们包含在应用的Info.plist中
• 通过FontBook或AppDelegate中的某些日志语句查找Font的名称

此处详细说明： http://codewithchris.com/common-mistakes-with-adding-custom-fonts-to-your-ios-app/

祝你好运！

Answer 2

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

Answer 3

将此添加到您的package.json

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

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

Answer 4

简单/可行的解决方案 2021。React Native 0.64。 Xcode 12+

在 impl<'a, T> Alpha for Charlie<&'a mut T> { type Item = &'a T; fn bravo(self) -> Self::Item { &self.delta } } 中添加这些行。重建 ios 应用程序。就这样！

ios/<ProjectName>/Info.plist

Answer 5

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

1. 添加文件夹字体包括您的字体（路径：src/assets/fonts）
2. 在 package.json 文件中传递这段代码 => "rnpm": { “资产”：[ “./assets/fonts/” ] }
3. 运行 cmd react-native 链接
4. 打开 Xcode 选择 Target -> Build Phases 选项卡 -> Copy Bundle Resources 并添加您的字体
5. 重建应用程序打开 Xcode build 或运行 cmd react-native run-ios

Answer 6

在App.js文件中，只需导入缺少的字体系列并按如下所示加载字体

从“ react-native-vector-icons /羽毛”中导入羽毛

Feather.loadFont（）;

您可以在项目文件夹中找到这些字体

路径-Project-> node-modules-react-native-vector-icons->字体

Check this tested and works fine

希望这会有所帮助！

Answer 7

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

#include <experimental/propagate_const>

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

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

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

Answer 8

简单的解决方案。别担心

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

Answer 9

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

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

您实际上不必打开 XCode 即可为 iOS 添加字体。例如，我使用了 VSCode。

步骤如下：

• 转到 node_modules>react-native-vector-icons>字体
  您必须搜索它，模块不是按字母顺序排列的
• 复制所有可用的字体
• 转到您的 ios 文件夹并创建一个名为“Fonts”的新文件夹
  小心！命名区分大小写，请确保使用大写的“F”（我没有并且花了太多时间找出我出错的地方）
• 将您之前复制的字体粘贴到 Fonts 文件夹中
• 接下来打开你的 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 命令，因为您会遇到重复错误

Answer 10

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

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

Answer 11

1. 如果您有从 Internet 下载的自定义字体，请将它们放置在例如 src/assets/fonts 文件夹。

2. 在根文件夹中创建一个名为 react-native.config.js 的文件，并在其中写入以下内容：

   • module.exports = { assets: ['./src/assets/fonts'], };

3. 通过在终端中运行 npx react-native link 来链接您的字体资产

Answer 12

对于IOS，

• 确保将字体添加到资源复制捆绑资源

• 确保Xcode中有资源文件夹，不知何故已将其删除，您必须创建，手动将字体导入该文件夹

• 确保在字体图书中使用家庭的名称

Answer 13

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

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

Answer 14

就我而言，ttf文件的名称错误。 我必须编辑 ios / MyApp / Info.plist 并手动更改字体的文件名。

发件人：

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

收件人：

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

Answer 15

您也可以尝试这样做，以这种方式指定字体，将它们映射为三种样式：

例如 Gilroy-SemiBoldItalic

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

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

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

希望这会有所帮助

Answer 16

就我而言，它在Android上运行良好，但在iOS中却无法正常运行。字体文件名为PlayfairDisplay-VariableFont_wght.ttf。但是当我打开该文件时，我看到的名称是：

。

因此，我将文件名更改为PlayfairDisplay-Regular.ttf，并且效果很好！

Answer 17

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

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

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

Answer 18

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

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

Answer 19

我遇到了同样的问题，并通过在Xcode中打开项目并在Project Navigator中的Resources文件夹下修复了该问题，该字体存在重复的字体，并且只是从Resources文件夹和Info.plist中删除了它们，因此问题得以解决。删除后只需在Xcode中运行该应用即可，然后您也可以在其他工具中进行验证，而无需重新安装npm。只需运行“ react-native run-ios”，加油吧：）