自定义字体在 React Native 中不起作用

Posted 2023-04-13

【中文标题】自定义字体在 React Native 中不起作用

【英文标题】：Custom font not working in React Native

【发布时间】：2017-08-18 16:37:42

【问题描述】：

我想在我的应用程序中使用来自 google 字体的字体。 Here is the font.

我已将 .ttf 文件放在app/fonts 中。

package.json:

    "name": "xxx",
    "version": "0.0.1",
    "private": true,
    "scripts": 
        "start": "node node_modules/react-native/local-cli/cli.js start",
        "test": "jest"
    ,
    "rnpm": 
        "assets": ["./app/fonts"]
    ,
    "jest": 
        "preset": "react-native",
        "moduleNameMapper": 
            "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
            "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
        
    ,
    "dependencies": 
        "flow-typed": "^2.0.0",
        "immutable": "^3.8.1",
        "react": "~15.4.1",
        "react-native": "0.42.0",
        "react-native-vector-icons": "^4.0.0",
        "react-redux": "^5.0.3",
        "redux": "^3.6.0",
        "redux-immutable": "^4.0.0",
        "redux-observable": "^0.14.1",
        "rxjs": "^5.2.0"
    ,
    "devDependencies": 
        "babel-eslint": "^7.1.1",
        "babel-jest": "19.0.0",
        "babel-preset-react-native": "1.9.1",
        "eslint": "^3.17.0",
        "eslint-plugin-flowtype": "^2.30.3",
        "eslint-plugin-jsx": "^0.0.2",
        "eslint-plugin-react": "^6.10.0",
        "eslint-plugin-react-native": "^2.3.1",
        "flow-bin": "^0.42.0",
        "jest": "19.0.2",
        "jest-cli": "^19.0.2",
        "react-test-renderer": "~15.4.1",
        "redux-devtools": "^3.3.2",
        "remote-redux-devtools": "^0.5.7"
    

然后运行react-native link。

然后在我的应用中使用字体：

import  View, Text  from 'react-native'
import React from 'react'
import Width from '../width/Width'
import Shape from '../shape/Shape'
import Height from '../height/Height'
import Thickness from '../thickness/Thickness'

export const Volcalc = () => (
  <View style=styles.container>
    <Text style=styles.text>SHAPE</Text>
    <Shape />
    <Text style=styles.text>HEIGHT</Text>
    <Height />
    <Text style=styles.text>WIDTH</Text>
    <Width />
    <Text style=styles.text>THICKNESS</Text>
    <Thickness />
  </View>
)

const $mainColor = '#00d1b2'
const styles = 
  container: 
    flex: 1,
    padding: 20,
    backgroundColor: $mainColor
  ,
  text: 
    textAlign: 'center',
    color: 'rgba(255, 255, 255, 0.9)',
    fontSize: 15,
    fontFamily: 'Orbitron'
  

在 android 中它不显示新字体但没有错误。在ios中它有错误：

无法识别的字体系列“Orbitron”

我做错了什么？

如何找出要放入fontFamily: 'xxx' 的确切值？

【参考方案1】：

react-native for version

中的自定义字体有很多答案

对于那些使用 react-native version > 0.60 ， 'rnpm' is deprecated 和自定义字体的人将无法使用。

现在，为了在 react-native 版本 > 0.60 中添加自定义字体，您必须：

1- 在项目的根文件夹中创建一个名为 react-native.config.js 的文件。

2- 在新文件中添加这个

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

3- 在根项目路径下运行react-native link 命令。

4- 使用react-native run-android 或react-native run-ios 命令运行它

【讨论】：

Appart 从上面看，我必须再次运行react-native run-android 才能看到字体工作。

这是解决我工作了大约 2 小时的问题的答案。是否有可以跟踪版本之间差异的页面？

@yunusemremeral 你可以在这里跟踪版本之间的差异react-native-community.github.io/rn-diff-purge

@HarshitAgrawal 我按照这些步骤操作，但在运行 react-native 链接时没有发生任何事情。没有日志没有信息。知道发生了什么吗？

@HarshitAgrawal 是的，存在路径问题。谢谢你的时间伙伴。

【参考方案2】：

如果有人正在阅读这篇文章，因为他们的设置很好并且自定义字体在 iOS 上工作，而在某些情况下在 Android 上不工作：

除了上面给出的安装答案 - 确保您没有设置字体fontWeight 参数（或样式中的其他额外字体转换）。就我而言，它“破坏”了自定义字体，因此我必须添加和使用带有变体的字体 ttf（如 Roboto-Thin、Roboto-Bold 等），而不是在样式中设置粗体。

另外值得注意的是：Manuel Hernandez 在下面的评论中发现可以使用 fontWeight:800 代替 fontWeight:'bold'。

【讨论】：

这对我有用，但后来我发现我可以用 fontWeight:800' 替换 fontWeight:'bold'

为我工作，但我想知道这个的根本原因是什么

我想补充一点，如果我使用他们的内置 h1、h2 等属性，react-native-elments 会给我造成这个问题。

【参考方案3】：

React Native 中的字体以与原生应用程序相同的方式处理，作为原生项目的资产。

在 iOS 中，您必须将它们添加为资源。可以好好描述here。

在 Android 中，您必须将它们添加为资产。 Here你可以看看怎么做。

另外请注意，iOS 中的字体名称是包含在 .ttf 文件的元数据中的名称，而在 Android 中它们由文件名和几个后缀匹配。

【讨论】：

谢谢。如何找出 android 字体名称（后缀）？

后缀对应字体属性（粗体、斜体...），名称任意。您可以在文章中看到一些示例。

【参考方案4】：

我发现对于某些字体，您需要运行 npx react-native-asset 才能使其在 Android 上运行。如果它在 3rd 方组件中不起作用，则必须添加 fontWeight: 'normal' 以覆盖一些默认值。

【参考方案5】：

您的链接似乎不正确，或者您的应用没有加载新资源。

添加

"rnpm": 
    "assets": ["./app/fonts"]

到你的 package.json。

然后

rm -rf node_modules && npm install && react-native link

如果一切顺利，请在 android/app/src/main/assets/fonts/ 中搜索您的自定义字体。 如果你看到它，你就链接成功了。

同样适用于 iOS，运行 XCode 并为您的自定义字体展开资源下拉列表。

杀死你的模拟器并重试

react-native run-ios

【讨论】：

不确定为什么需要在此命令中删除 node_modules。该命令应该只是“react-native link”。

【参考方案6】：

路径可能链接错误 -

react-native 链接存储字体的路径是 - android/src/main/assets/fonts

路径应该是 - android/app/src/main/assets/fonts

即使使用 react-native 版本 0.62 也会存在此问题

【参考方案7】：

确保字体仅为小写并遵循以下模式：fontname.ttf、fontname_bold.ttf、fontname_light.ttf、fontname_bold_italic.ttf

【参考方案8】：

要找到用作 fontFamily 的确切值，您可以在将以下代码添加到 xcode 中的 AppDelegate.m 文件后从 xcode 运行项目。您将在 xcode 的输出部分中看到字体列表。

for (NSString* family in [UIFont familyNames])

    NSLog(@"%@", family);

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

添加自定义字体的有用链接：http://codewithchris.com/common-mistakes-with-adding-custom-fonts-to-your-ios-app/

【讨论】：

这对于帮助我找到问题至关重要。出于某种原因，我的字体名称从 fontFamily 名称中删除了特殊字符。例如，我的字体文件被命名为 Proxima-Nova-Soft-Bold.otf，我使用 Proxima-Nova-Soft-Bold 作为 fontFaimily 名称。但是，当我使用此日志检查 iOS 需要的字体系列名称时，它正在寻找 ProximaNovaSoft-Bold 的字体系列名称。 ?‍♂️

【参考方案9】：

这些步骤对我有用。

将您的字体添加到yourproject/assets 文件夹。 然后将"rnpm": "assets": ["./assets/fonts/"] 添加到您的 package.json 文件中。 运行react-native link 检查字体是否添加到yourproject/android/app/src/main/assets/fonts（适用于android） 必须运行 react-native run-android 以获取更改。（大多数人忘记运行此）

【参考方案10】：

在此处添加我的两美分，因为我花了 4 个小时才弄清楚：检查您的字体是否“有效”。在 Mac 上，您可以在 Font Book > File > Validate font 中执行此操作。 React-Native 链接不会抛出任何错误，Android Studio 或 Xcode 也不会。因此，如果您的字体已损坏，它将被忽略，您不知道为什么。为了使它有效，我从 Font Book 中导出它并再次运行 react-native link 命令。希望它可以帮助某人。

【参考方案11】：

删除 fontWeight 等默认样式属性也可以解决问题。

【参考方案12】：

这个问题的答案是

删除 fontWeight 属性是样式，它会工作！

我删除了它并立即获得了我的 poppins 字体样式。

【参考方案13】：

我的项目是针对 Android 的，我们没有 ios。我已经尝试了答案中的所有选项，但没有解决问题，发现问题出在npx react-native link 命令上。它实际上先循环了所有项目，然后是 ios。

我尝试了npx react-native link --platforms android，但没有成功。

所以，我删除了项目中的 ios 目录并运行了命令npx react-native link，它成功地为 android 链接了新资产。您可以简单地再次恢复 ios 目录。

【参考方案14】：

我遇到了类似的问题。对我来说，在本地构建应用程序时字体加载正常，但在我们的 CI 管道构建应用程序时加载失败。

事实证明，当我更改文件名的大小写以匹配 iOS 标识符时，git 没有接收到大小写更改。它似乎忽略了文件名的大小写变化。 检查远程存储库中的文件名是否与您机器上的文件名匹配。 可能有一种更直接的方式来更新 git 上的文件名，但我只是移动了字体文件夹，提交并将它们移回：

mv assets/fonts assets/fonts2
mv android/app/src/main/assets android/app/src/main/assets2
git commit -m "Make git pick up on correct font casing - part 1"
mv assets/fonts2 assets/fonts
mv android/app/src/main/assets2 android/app/src/main/assets
git commit -m "Make git pick up on correct font casing - part 2"

【参考方案15】：

我的字体在 android 上可以完美显示，但不会在 ios 上显示。我尝试了一切，但没有什么对我真正有用，直到我尝试查看我的资产文件夹中安装的其他字体是否会显示。其他字体确实有效。所以我决定删除我想使用的字体（gotham-medium）并从互联网上重新下载了相同字体的不同文件，然后将其包含到我的代码中。现在它起作用了！赞美神！我花了 2 天时间试图弄清楚这一点！

【参考方案16】：

我遇到了类似的问题。我所有的字体设置都很好，所有自定义字体都可以正常工作，除了 IOS 中的一种。

如果您查看屏幕截图，您会发现全名实际上与文件名并不完全相同。

您还可以通过在 appdelegate.m 中添加以下代码来列出所有应用程序可用的字体名称。

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

您必须使用将打印在 xcode 日志上的 ios 名称。我做了这样的事情

Platform.OS === 'ios' ? 'Agrandir-TextBold' : 'Agrandir-Bold'