react-native android fontFamily 不生效

Posted 2023-05-07

【中文标题】react-native android fontFamily 不生效

【英文标题】：react-native android fontFamily does not take effect

【发布时间】：2016-01-10 08:50:09

【问题描述】：

问题一：

我在 index.android.js 的欢迎样式中添加了一个 fontFamily，但是没有任何效果。 fontFamily 真的可以在安卓上运行吗？

欢迎： 字体大小：20， fontFamily:'roboto-thin', 文本对齐：'中心'， 边距：10

问题2：

如果 fontFamily 在 android 上工作，有没有办法从资产加载自定义字体？或者这是由 react-native 实现的一些功能？

【问题讨论】：

用sans-serif-thin怎么样？

是的，“sans-serif-thin”有效。

好。这是使用细字体系列的标准方法。 Android 不使用名称roboto（指南中除外）。回答问题2：谷歌。这是非正式的可能，并且有多个问题。

【参考方案1】：

对于安卓： 使用 0.16.0-rc 添加了自定义字体。所以你需要先有 0.16.0-rc 版本，然后你可以从网上下载任何字体。

将字体文件放入 projectfolder/android/app/src/main/assets/fonts/font_name.ttf 记得重新编译是：react-native run-android 然后您可以在自己的风格中使用fontFamily: 'font_name'。

【讨论】：

如果我想在全局范围内将特定字体应用到我的应用程序的每个组件怎么办？例如 :- 就像在 html 中一样，我们将 font-family 写入 body 标签，以便在任何地方都获得相同的基本字体，同样对于 android 有什么技巧吗？

@YashVekaria 是的 - 在这里查看 react-native-global-props：github.com/Ajackster/react-native-global-props

@peteclark3 谢谢。

一个什么版本？

【参考方案2】：

还要注意 react-native 中自定义 Android 字体的以下限制：

字体必须放在android/app/src/main/assets/fonts 仅支持 .ttf 文件 文件名必须与fontFamily 完全匹配。例如，如果fontFamily 是'Source Sans Pro'， 该文件必须称为Source Sans Pro.ttf（而不是SourceSansPro.ttf）。下一段中提到的任何后缀都会自动从文件中删除。 当字体为粗体和/或斜体时，必须使用以下后缀： _bold（例如Source Sans Pro_bold.ttf） _italic _bold_italic

【讨论】：

嗨。在我的 plist 中，我有 SourceSansPro-Italic.ttf、SourceSansPro-Bold.ttf 和 SourceSansPro-Regular.ttf。当我将Source Sans Pro 放入fontFamily 中时（例如：fontFamily: 'Source Sans Pro'）工作正常。但我找不到打电话给-Italic 和-Bold 的方法。我试过Source Sans Pro-Bold，Source Sans Pro_Bold，但不起作用。你能帮我解决这个问题吗？

这个解决方案对我特别有帮助。我没有在任何其他答案中看到此信息。我已经根据需要设置了所有内容，并且显然缺少正确命名字体文件。一旦我将_bold_italic 添加到其中，一切正常。仅供参考，我还必须在使用该字体的样式上声明等效的 CSS 属性。 @ljzerenHein 谢谢你的回答！

【参考方案3】：

我相信以下方法比这里已经解释的方法更干净：

将你所有的字体放在你的 React-Native 项目目录中

./assets/fonts/

在您的 package.json 中添加以下行

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

最终从你的项目目录在终端运行

$ react-native link

在您的样式中以这种方式声明使用它

fontFamily: 'your-font-name without extension'

如果你的字体是 Raleway-Bold.ttf 那么，

fontFamily: 'Raleway-Bold'

---

来源https://medium.com/@danielskripnik/how-to-add-and-remove-custom-fonts-in-react-native-b2830084b0e4

【讨论】：

谢谢，完美答案！

【参考方案4】：

你好这个问题腰我两天多用“El+Messiri”字体“https://fonts.google.com/specimen/El+Messiri”

我正在做每一个想法写：

将字体文件放入 projectfolder/android/app/src/main/assets/fonts/ElMessiri-Regular.ttf 记得重新编译也就是：react-native run-android 然后

你可以在你的风格中使用 fontFamily: 'ElMessiri-Regular'。

但 错误 是在 fontFamily: 'ElMessiri-Regular' 之后使用 fontWeight : 'bold' 并且 fontWeight 覆盖了fontFamily 因为 "El+Messiri" 字体有他自己的 fontFamily 粗体，即 "ElMessiri-Bold"

【参考方案5】：

此功能尚未实现。查看github上的相关问题here。

【讨论】：

过时了。请修改

【参考方案6】：

似乎添加了自定义字体，请查看此提交：

https://github.com/facebook/react-native/commit/bfeaa6a4f531cfc18c097bc9ffb6a8dbe3ddc702

【参考方案7】：

对于那些仅面临 ios 问题的人 - 有时无法正确识别 fontFamily 名称：

解决我的问题的唯一解决方案是记录所有字体以找出正确的命名

（确保仅在添加资产/字体并运行react-native link 后执行以下步骤）：

无论如何，要记录它们，请使用 xcode 打开 appName.xcworkspace 文件，然后编辑 AppDelegate.m 将这些行放在 didFinishLaunchingWithOptions 方法的末尾（并且在 return 语句之前）：

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

因此，当您（从 xcode）运行应用程序时，它会输出如下内容：

这样，我可以在我的 react-native 样式中使用 fontFamily Barow-Light 或 Zapfino

希望对您有所帮助！

【参考方案8】：

即使遵循了我找到的所有建议，我也很难做到这一点。

什么对我有用：确保字体文件仅使用小写字母和下划线命名。重新链接。完成。

已经为此做了很多头发拉扯，但据我所知，它没有在任何地方提及。