字体

了解如何在应用中使用本地文件或 Google Font 包来集成自定义字体

Android 和 iOS 自带一套平台字体。为了提供一致的用户体验并提升应用的品牌形象，可以使用自定义字体。

本指南介绍了在项目中添加和加载自定义字体的不同方法，并提供与字体相关的额外信息。

添加自定义字体

有两种方法可以将自定义字体添加到您的项目中：

• 将字体文件放入本地资产中。例如，将字体文件放在 assets/fonts 目录。
• 安装一个 Google Font 包。例如，安装 @expo-google-fonts/inter 包。

支持的字体格式

Expo SDK 官方在 Android、iOS 和网页平台上原生支持 OTF 和 TTF 字体格式。如果你的字体是其他字体格式，则需要在项目中进行高级配置以支持该格式。

可变字体

可变字体（包括 OTF 和 TTF 的可变字体实现）并非在所有平台上都得到支持。要获得完整的跨平台支持，请使用静态字体。或者，使用诸如 fontTools 之类的工具，从可变字体中提取你想要使用的特定轴配置，并将其保存为单独的字体文件。

如何在 OTF 与 TTF 之间进行选择

如果你使用的字体同时有 OTF 和 TTF 版本，优先选择 OTF。.otf 文件比 .ttf 文件小。某些情况下，OTF 在某些上下文中还会有略微更好的渲染效果。

使用本地图形字体

将文件复制到你项目的 assets/fonts 目录中。

assets/fonts 目录路径是在 React Native 应用中放置字体文件的常见约定。若遵循自定义约定，您也可以将这些文件放在其他位置。

在项目中使用本地字体文件的两种方式：

• 将字体文件嵌入使用 expo-font 配置插件 。
• 在运行时使用 useFonts 钩子异步加载字体文件。

使用 expo-font 配置插件

expo-font 配置插件允许在项目的原生代码中嵌入一个或多个字体文件。它对 Android 和 iOS 同时支持 ttf 和 otf，并且仅在 iOS 上支持 woff 和 woff2。这是向应用中添加字体的推荐方法，原因如下：

• 字体在设备上应用启动时即可立即可用。
• 应用启动时无需额外的代码来异步加载字体。
• 字体在应用安装的所有设备上都可用，因为它们被捆绑在应用中。

然而，这种方法也有一些局限性：

• 不适用于 Expo Go，因为此方法需要 创建开发构建 。

要在项目中嵌入字体，请按照以下步骤：

{
  "expo": {
    "plugins": [
      [
        "expo-font",
        {
          "fonts": [
            "./assets/fonts/FiraSans-MediumItalic.ttf"
          ],
          "android": {
            "fonts": [
              {
                "fontFamily": "Inter",
                "fontDefinitions": [
                  {
                    "path": "./assets/fonts/Inter-BoldItalic.ttf",
                    "weight": 700,
                    "style": "italic"
                  },
                  {
                    "path": "./assets/fonts/Inter-Bold.ttf",
                    "weight": 700
                  }
                ]
              }
            ]
          },
          "ios": {
            "fonts": ["./assets/fonts/Inter-Bold.ttf", "./assets/fonts/Inter-BoldItalic.ttf"]
          }
        }
      ]
    ]
  }
}

<Text style={{ fontFamily: 'Inter', fontWeight: '700' }}>Inter Bold</Text>
<Text style={{ fontFamily: 'Inter', fontWeight: '700', fontStyle: 'italic' }}>Inter Bold Italic</Text>
<Text style={{ fontFamily: 'FiraSans-MediumItalic' }}>Fira Sans Medium Italic</Text>

如何确定要使用的字体族名称

• 如果你按照上面所述将字体作为文件路径数组提供，在 Android 上，文件名（不包含扩展名）将成为字体族名称。在 iOS 上，字体族名称是从字体文件本身读取的。我们建议将字体文件命名为与其 PostScript name 相同，这样在两个平台上的字体族名称就保持一致。

• 如果你使用对象语法，请提供 "Family Name"。可以在 macOS 的 Font Book 应用、fontdrop.info 或其他程序中找到。

字体文件的 PostScript 名称是什么？

字体文件的 PostScript 名称 是按 Adobe 的 PostScript 标准分配给字体的唯一标识符。它被操作系统和应用程序用于引用该字体。它不是字体的 显示名称 。

例如，Inter Black 字体文件的 PostScript 名称是 Inter-Black。

来自 macOS 的 Font Book 应用截图。

使用 useFonts 钩子

useFonts 钩子来自 expo-font 库，允许异步加载字体文件。该钩子会跟踪加载状态，并在应用初始化时加载字体。

它可与所有 Expo SDK 版本以及 Expo Go 一起使用。要在使用 useFonts 钩子的项目中加载字体，请按照以下步骤：

在项目中添加自定义字体文件后，安装 expo-font 和 expo-splash-screen 库。

import { useFonts } from 'expo-font';
import * as SplashScreen from 'expo-splash-screen';
import {useEffect} from 'react';

SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
  const [loaded, error] = useFonts({
    'Inter-Black': require('./assets/fonts/Inter-Black.otf'),
  });

  useEffect(() => {
    if (loaded || error) {
      SplashScreen.hideAsync();
    }
  }, [loaded, error]);

  if (!loaded && !error) {
    return null;
  }

  return (
    %%placeholder-start%%... %%placeholder-end%%
  )
}

<Text style={{ fontFamily: 'Inter-Black' }}>Inter Black</Text>

使用 Google Fonts

Expo 对 Google Fonts 列出的所有字体提供一流的支持。它们可以通过 Google Fonts 使用 @expo-google-fonts 库获得。使用此库中的任意字体包，您可以快速集成该字体及其变体。

在你的项目中使用 Google Font 的两种方式：

• 使用 expo-font 配置插件 将已安装的字体嵌入。
• 在运行时异步地通过 useFonts 钩子加载已安装的字体。

使用 expo-font 配置插件

注意： 使用 expo-font 配置插件嵌入 Google Fonts，与自行嵌入自定义字体具有相同的好处与限制。有关更多信息，请参见 使用本地字体文件配合 expo-font 配置插件 。

{
  "plugins": [
    [
      "expo-font",
      {
        "fonts": ["node_modules/@expo-google-fonts/inter/900Black/Inter_900Black.ttf"]
      }
    ]
  ]
}

import { Platform } from 'react-native';

// Inside a React component:
<Text
  style={{
    fontFamily: Platform.select({
      android: 'Inter_900Black',
      ios: 'Inter-Black',
    }),
  }}>
  Inter Black
</Text>

使用 useFonts hook

注意： 使用 useFonts hook 加载 Google Font 与自行嵌入自定义字体具有相同的优点与限制。有关更多信息，请参阅 使用本地字体文件与 useFonts hook。

每个 google Fonts 包都提供 useFonts hook，用以异步加载字体。该 hook 会跟踪加载状态，并在应用初始化时加载字体。该字体包还会导入字体文件，因此你无需显式导入。

// Rest of the import statements
import { Inter_900Black, useFonts } from '@expo-google-fonts/inter';
import * as SplashScreen from 'expo-splash-screen';
import {useEffect} from 'react';

SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
  const [loaded, error] = useFonts({
    Inter_900Black,
  });

  useEffect(() => {
    if (loaded || error) {
      SplashScreen.hideAsync();
    }
  }, [loaded, error]);

  if (!loaded && !error) {
    return null;
  }

  return (
    %%placeholder-start%%... %%placeholder-end%%
  )
}

<Text style={{ fontFamily: 'Inter_900Black' }}>Inter Black</Text>

附加信息

最小示例

超出 OTF 和 TTF

如果你的字体格式不是 OTF 或 TTF，你需要 自定义 Metro bundler 配置，将其作为额外的资源 ，以使其能够工作。在某些情况下，渲染一个平台不支持的字体格式可能会导致应用崩溃。

供参考，以下表格提供在每个原生平台上可使用的列表格式：

平台内置字体

如果你不想通过指定 fontFamily 使用自定义字体，系统默认字体将被使用。每个平台都具有一组内置字体。在 Android 上，默认字体是 Roboto。在 iOS 上，是 SF Pro。

平台的默认字体通常易于阅读。然而，当系统默认字体被更改为另一种不易阅读的字体时，也不要感到惊讶。在这种情况下，使用你的自定义字体，这样你就可以对用户看到的内容进行精确控制。

处理 @expo/vector-icons 的初始加载

当 @expo/vector-icons 库的图标首次加载时，它们在你的应用中会以不可见的图标呈现。加载完成后，它们会被缓存，供应用的后续使用。为避免在应用首次加载时显示不可见的图标，可以在初始加载屏幕阶段通过 useFonts 进行预加载。例如：

import { useFonts } from 'expo-font';
import Ionicons from '@expo/vector-icons/Ionicons';

export default function RootLayout() {
  useFonts([require('./assets/fonts/Inter-Black.otf', Ionicons.font)]);

  return (
    %%placeholder-start%%... %%placeholder-end%%
  )
}

现在，您可以在 React 组件中使用 Ionicons 库中的任意图标：

<Ionicons name="checkmark-circle" size={32} color="green" />

直接从网络加载远程字体

如果你正在加载远程字体，请确保它们来自一个正确配置 CORS 的源 。如果你不这样做，远程字体在网页平台上可能无法正确加载。

从本地资源加载字体是应用程序中加载字体的最安全方式。当将字体作为本地资源包含时，在你将应用提交到应用商店后，这些字体会随应用下载打包并可立即使用。你无需担心 CORS 或其他潜在问题。

然而，直接从网页加载字体文件，是通过将 require('./assets/fonts/FontName.otf') 替换为下面示例所示的字体 URL 来实现。

import { useFonts } from 'expo-font';
import { Text, View, StyleSheet } from 'react-native';

export default function App() {
  const [loaded, error] = useFonts({
    'Inter-SemiBoldItalic': 'https://rsms.me/inter/font-files/Inter-SemiBoldItalic.otf?v=3.12',
  });

  if (!loaded || !error) {
    return null;
  }

  return (
    <View style={styles.container}>
      <Text style={{ fontFamily: 'Inter-SemiBoldItalic', fontSize: 30 }}>Inter SemiBoldItalic</Text>
      <Text style={{ fontSize: 30 }}>Platform Default</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});