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

Question

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

• 像这样将 *.ttf 文件放入ProjectName/android/app/src/main/assets/fonts/：

  • 打开 Sans.ttf
  • 打开 Sans_italic.ttf
  • 打开 Sans_bold.ttf
  • 打开 Sans_bold_italic.ttf

• 并通过fontFamily: "Open Sans"设置字体系列

但我想使用额外的字体粗细，例如“半粗体”、“超粗体”。我尝试将它们添加为“Open Sans_900.ttf”并设置fontWeight: 900，但这不起作用，它显示字体的粗体版本。

有没有办法添加这些额外的字体粗细？

Answer 1

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

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

其他答案已过时。从 React Native 0.60.0 开始，绝对可行！解决方案是为 Android 使用XML Fonts 功能。我已经写了一个完整的指南here 以获得一致的字体多平台体验。这篇文章侧重于 Android 方面。 结果：

备注：自提交 fd6386a07eb75a8ec16b1384a3e5827dea520b64（2019 年 5 月 7 日）起，此过程在 React Native 中可用，并添加了 ReactFontManager::addCustomFont 方法。

我将在此示例中使用Raleway，但此方法适用于任何字体系列！我假设你有whole Raleway font family TTF files，提取到一个临时文件夹/tmp/raleway。那就是：

• Raleway-Thin.ttf (100)
• Raleway-ThinItalic.ttf
• Raleway-ExtraLight.ttf (200)
• Raleway-ExtraLightItalic.ttf
• Raleway-Light.ttf (300)
• Raleway-LightItalic.ttf
• Raleway-Regular.ttf (400)
• Raleway-Italic.ttf
• Raleway-Medium.ttf (500)
• Raleway-MediumItalic.ttf
• Raleway-SemiBold.ttf (600)
• Raleway-SemiBoldItalic.ttf
• Raleway-Bold.ttf (700)
• Raleway-BoldItalic.ttf
• Raleway-ExtraBold.ttf (800)
• Raleway-ExtraBoldItalic.ttf
• Raleway-Black.ttf (900)
• Raleway-BlackItalic.ttf

0。查找确切的字体系列名称

您需要在系统中安装 otfinfo 才能执行此步骤。 它随许多 Linux 发行版一起提供。在 MacOS 上，通过安装它 lcdf-typetools brew 包。

otfinfo --family Raleway-Regular.ttf

应该打印“Raleway”。此值必须保留以备后用。 此名称将用于 React fontFamily 样式。

1。将资产复制并重命名到资源字体文件夹

mkdir android/app/src/main/res/font
cp /tmp/raleway/*.ttf android/app/src/main/res/font

我们必须按照这些规则重命名字体文件以符合 Android 资产名称限制：

• 将-替换为_；
• 用小写字母替换任何大写字母。

您可以使用以下 bash 脚本（确保将字体文件夹作为第一个参数）：

#!/bin/bash
# fixfonts.sh

typeset folder="$1"
if [[ -d "$folder" && ! -z "$folder" ]]; then
  pushd "$folder";
  for file in *.ttf; do
    typeset normalized="${file//-/_}";
    normalized="${normalized,,}";
    mv "$file" "$normalized"
  done
  popd
fi

./fixfonts.sh /path/to/root/FontDemo/android/app/src/main/res/font

2。创建定义文件

使用以下内容创建android/app/src/main/res/font/raleway.xml 文件。基本上， 我们必须为每个我们希望支持的fontStyle / fontWeight 组合创建一个条目，并且 注册对应的资产名称。

<?xml version="1.0" encoding="utf-8"?>
<font-family xmlns:app="http://schemas.android.com/apk/res-auto">
    <font app:fontStyle="normal" app:fontWeight="100" app:font="@font/raleway_thin" />
    <font app:fontStyle="italic" app:fontWeight="100" app:font="@font/raleway_thinitalic"/>
    <font app:fontStyle="normal" app:fontWeight="200" app:font="@font/raleway_extralight" />
    <font app:fontStyle="italic" app:fontWeight="200" app:font="@font/raleway_extralightitalic"/>
    <font app:fontStyle="normal" app:fontWeight="300" app:font="@font/raleway_light" />
    <font app:fontStyle="italic" app:fontWeight="300" app:font="@font/raleway_lightitalic"/>
    <font app:fontStyle="normal" app:fontWeight="400" app:font="@font/raleway_regular" />
    <font app:fontStyle="italic" app:fontWeight="400" app:font="@font/raleway_italic"/>
    <font app:fontStyle="normal" app:fontWeight="500" app:font="@font/raleway_medium" />
    <font app:fontStyle="italic" app:fontWeight="500" app:font="@font/raleway_mediumitalic"/>
    <font app:fontStyle="normal" app:fontWeight="600" app:font="@font/raleway_semibold" />
    <font app:fontStyle="italic" app:fontWeight="600" app:font="@font/raleway_semibolditalic"/>
    <font app:fontStyle="normal" app:fontWeight="700" app:font="@font/raleway_bold" />
    <font app:fontStyle="italic" app:fontWeight="700" app:font="@font/raleway_bolditalic"/>
    <font app:fontStyle="normal" app:fontWeight="800" app:font="@font/raleway_extrabold" />
    <font app:fontStyle="italic" app:fontWeight="800" app:font="@font/raleway_extrabolditalic"/>
    <font app:fontStyle="normal" app:fontWeight="900" app:font="@font/raleway_black" />
    <font app:fontStyle="italic" app:fontWeight="900" app:font="@font/raleway_blackitalic"/>
</font-family>

3。注册新字体

在android/app/src/main/java/com/fontdemo/MainApplication.java 中，将字体系列名称与我们刚刚在onCreate 方法中创建的资产绑定。

⚠️ 如果您要注册不同的字体，请确保将“Raleway”替换为上一步中找到的名称（查找字体系列名称）。

// Add this!
import com.facebook.react.views.text.ReactFontManager;

public class MainApplication extends Application implements ReactApplication {

  // ...
  @Override
  public void onCreate() {
     super.onCreate();
     // And that line!
     ReactFontManager.getInstance().addCustomFont(this, "Raleway", R.font.raleway);
   }
  // ...
}

4。享受吧！

您现在可以渲染

<Text style={{ fontFamily: "Raleway", fontStyle: "italic", fontWeight: "900" }}>
  Hello world!
</Text>

在 Android 和 iOS 上（假设您使用 CLI 链接资产，see this document for the iOS side）。

Answer 3

即使您尝试过，Android 也有使用 fontWeight 属性的限制

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

它无法正确显示字体，您需要删除fontWeight 才能使其正常工作。

我的解决方案是依赖于 platform.OS 属性：

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'
   },
});

在渲染部分：

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

它适用于 iOS 和 Android

Answer 4

我遇到了同样的问题，不得不从字体粗细文件中制作“新字体”（因为它使用字体名称而不是文件名）

使用类似FontForge的东西 - 加载字体粗细文件（例如Open Sans_bold.ttf）并将其重命名为“Open Sans Bold”（实际名称而不是文件名），然后将其用作fontFamily in react -native（显然将该字体附加到您的项目中）因此您将拥有 2 个字体文件：“Open Sans”和“Open Sans Bold”

希望这会有所帮助！

Answer 5

这是我的建议：

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

• YourFont-Regular.tff
• YourFont-Bold.tff

react-native link itby

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。