如何为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"

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

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

Answer 1

从React Native 0.66.0开始（用RN 0.66.3测试），绝对可行！解决方案是使用Android 的XML 字体功能。我在这里写了一份完整的指南，以获得一致的字体多平台体验。这篇文章主要关注Android端。结果：

\n\n

\n

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

\n

\n

我将用于Raleway此示例，但此方法应该适用于任何字体系列！我假设您拥有整个 Raleway 字体系列 TTF 文件，并提取到临时文件夹中/tmp/raleway。那是：

\n

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

\n

0.查找确切的字体家族名称

\n

\n

您需要在系统中安装otfinfo才能执行此步骤。\n许多 Linux 发行版都附带了它。在 MacOS 上，通过lcdf-typetools brew 包安装它。

\n

\n

otfinfo --family Raleway-Regular.ttf\n

\n

应打印“Raleway”。必须保留此值以供稍后使用。\n此名称将在 ReactfontFamily风格中使用。

\n

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

\n

mkdir android/app/src/main/res/font\ncp /tmp/raleway/*.ttf android/app/src/main/res/font\n

\n

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

\n

\n
• -用。。。来代替_;
\n
• 将任何大写字母替换为其对应的小写字母。
\n

\n

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

\n

#!/bin/bash\n# fixfonts.sh\n\ntypeset folder="$1"\nif [[ -d "$folder" && ! -z "$folder" ]]; then\n  pushd "$folder";\n  for file in *.ttf; do\n    typeset normalized="${file//-/_}";\n    normalized="${normalized,,}";\n    mv "$file" "$normalized"\n  done\n  popd\nfi\n

\n

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

\n

2. 创建定义文件

\n

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

\n

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

\n

3.注册新字体

\n

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

\n

\n

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

\n

\n

\n// Add this!\nimport com.facebook.react.views.text.ReactFontManager;\n\npublic class MainApplication extends Application implements ReactApplication {\n\n  // ...\n  @Override\n  public void onCreate() {\n     super.onCreate();\n     // And that line! Note that "raleway" in R.font.raleway must be the name of\n     // the XML file.\n     ReactFontManager.getInstance().addCustomFont(this, "Raleway", R.font.raleway);\n   }\n  // ...\n}\n\n

\n

4.享受吧！

\n

您现在可以渲染

\n

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

\n

在 Android 和 iOS 上（假设您将资产与 CLI 链接，请参阅 iOS 端的此文档）。

\n

Answer 2

对于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的/反应/视图/文本/ ReactFontManager.java

Answer 3

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

{ 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”（实际名称而不是文件名），然后使用它作为fontFamilyreact-native（显然将该字体附加到您的项目）所以你将有 2 个字体文件：“Open Sans”和“Open Sans Bold”

希望这可以帮助！