使用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中的Target中
• 确保它们包含在"复制捆绑资源"步骤中
• 将它们包含在应用的Info.plist中
• 通过FontBook或AppDelegate中的一些日志语句查找Font的名称

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

祝好运!

Answer 2

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

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

Answer 3

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

Answer 4

将此添加到您的 package.json

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

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

Answer 5

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

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

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

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

Answer 6

在您的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"

Answer 7

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

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

Answer 8

简单/可行的解决方案 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>

Answer 9

您可能需要链接您的字体。在项目的根目录中，创建一个文件：react-native.config.js 考虑到您的字体放置在PROJECT_NAME/assets/fonts将其添加到新的配置文件中：

module.exports = {
    project: {
        ios:{},
        android:{}
    },
    assets:['./assets/fonts/'],
}

现在只需链接它们：

npx react-native link

or for react-native + 0.69

npx react-native-asset

此后，您的字体应该已经添加到android/app/src/main/assets/fonts目录和Info.plistIOS 中。

感谢这篇博文。