自从React Native 0.66.0(已测试过RN 0.66.3)以来,这是完全可行的!解决方案是使用Android的
XML字体功能。我已经在
这里写了一个完整的指南,以实现一致的跨平台字体体验。本文重点关注Android端。结果为:
![](https://github.com/jsamr/react-native-font-demo/raw/main/img/react-native-fonts-android.png)
注意:自从2019年5月7日提交的React Native版本
fd6386a07eb75a8ec16b1384a3e5827dea520b64以来,已经添加了
ReactFontManager::addCustomFont
方法。
我将以
Raleway
为例,但是这个方法适用于任何字体系列!我假设您已经将
整个Raleway字体系列的TTF文件提取到临时文件夹
/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
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" 替换为在前一步中找到的名称(找到字体系列名称)。
import com.facebook.react.views.text.ReactFontManager;
public class MainApplication extends Application implements ReactApplication {
@Override
public void onCreate() {
super.onCreate();
ReactFontManager.getInstance().addCustomFont(this, "Raleway", R.font.raleway);
}
}
4. 尽情享受吧!
现在您可以渲染了
<Text style={{ fontFamily: "Raleway", fontStyle: "italic", fontWeight: "900" }}>
Hello world!
</Text>
在Android和iOS上都可以(只要您使用CLI链接资产,
请参阅iOS方面的文档)。