Question

我设法通过以下方式添加自定义字体：

将* .ttf文件放在ProjectName/android/app/src/main/assets/fonts/中，如下所示：
- 打开Sans.ttf
- 打开Sans_italic.ttf
- 打开Sans_bold.ttf
- 打开Sans_bold_italic.ttf
并按fontFamily: "Open Sans"

但是我想要使用额外的字体权重，如'Semi Bold'，'Extra Bold'。我尝试将它们添加为“Open Sans_900.ttf”并设置fontWeight: 900，但这不起作用，它显示字体的粗体版本。

有没有办法添加这些额外的字体权重？

Answer 1

Android上的自定义字体的开箱即用支持在React Native中有点受限。它不支持normal和bold以外的字体权重（它还支持italic fontStyle）。如果您需要其他自定义权重，则必须将它们添加为具有不同名称的单独字体（正如David在其答案中提到的那样）。

RN将找到的唯一字体文件具有以下格式：

{fontFamilyName}
{fontFamilyName}_bold
{fontFamilyName}_italic
{fontFamilyName}_bold_italic

支持的扩展程序：.ttf和.otf

这在任何地方都没有记录（我知道），但您可以在此处阅读字体管理器代码：https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactFontManager.java

Answer 2

我遇到了同样的问题，不得不用字体重量文件制作“新字体”（因为它的工作方式是字体名称而不是文件名）

使用FontForge之类的东西 - 加载字体粗细文件（例如，打开Sans_bold.ttf）并将其重命名为“Open Sans Bold”（实际名称不是文件名），然后将其用作{{1在react-native中（显然将该字体附加到你的项目中）所以你将有2个字体文件：“Open Sans”和“Open Sans Bold”

希望这有帮助！

Answer 3

Android has limitation for using fontWeight property even if you tried

{ fontFamily: 'fontFamily-bold', fontWeight: 'bold' }

It will not show font correctly, you will need to remove fontWeight to make it work.

My solution for that is to depend on platform.OS property:

import { Platform, ... } from 'react-native';

const styles = StyleSheet.create({
   text: {
     fontFamily: 'fontFamily',
     color: '#336666',
     backgroundColor: 'transparent',
   },
   bold: Platform.OS === 'ios' ? {
     fontFamily: 'fontFamily',
     fontWeight: 'bold'
   } : {
    fontFamily: 'fontFamily-bold'
   },
});

In render section:

<Text style={[styles.text, styles.bold]}>My bold text</Text>

It will works on both iOS and Android

Answer 4

以下是我的建议：

在assets/fonts/中，您可以放置以下文件：

YourFont-Regular.tff
YourFont-Bold.tff

react-native link it

的package.json

“rnpm”: {
   “assets”: [“./assets/fonts/”]
}

在你的风格中，你可以：

const styles = StyleSheet.create({
  text: {
    fontFamily: 'YourFont-Regular',
    color: '#336666',
    backgroundColor: 'transparent',
    },
  bold: {
    fontFamily: 'YourFont-Bold',
    },
  })

然后，在你的渲染中它是这样的：

<Text style={[styles.text, bold]}>Hello World</Text>

此方法适用于Android和iOS。

如何为react-native android项目添加不同字体权重的字体？

4 个答案: