字体

运行时替换字体

字体可以在运行时动态加载。这允许你在不增加导出 .riv 文件大小的情况下本地化你的 Rive 内容。

有关更多信息，请参见加载资源。

回退字体

渲染文本时，并非所有字形（字符）在活动字体中都可用。这通常发生在以下情况：

使用的自定义字体不支持所有语言或 Unicode 范围
嵌入字体是字体的子集
用户生成或动态文本包含意外的字符

当主字体无法渲染特定字形时，会自动使用回退字体。这些通常是系统字体，通常提供广泛的 Unicode 覆盖。

出于安全原因，浏览器不允许直接访问用户的系统字体。因此，必须为此运行时显式提供回退字体。

从 v2.37.1 开始，JS 运行时提供了用于提供回退字体的 API。当默认字体无法渲染某个字形时，Rive 将调用你提供的回调来获取要尝试的解码字体列表。重要的是，此回调必须在 Rive 开始渲染之前注册。

首先，从 JS 包导入 RiveFont 命名导出，并调用其静态方法 setFallbackFontCallback()，传入你的回调。该回调接收无法渲染的字形（作为 Unicode 码位）和字体粗细，并应返回回退字体列表。如果连续的回退字体也不支持该字形，可能会多次调用此回调。

import { RiveFont, decodeFont, Rive } from "@rive-app/webgl2";

const THAI_FALLBACK_FONT_URL =
  "https://raw.githubusercontent.com/google/fonts/main/ofl/notoserifthai/NotoSerifThai%5Bwdth%2Cwght%5D.ttf";

const setFallbackFonts = async () => {
  const notoSerifThai = await fetch(THAI_FALLBACK_FONT_URL).then((res) => res.arrayBuffer());
  const riveThaiDecodedFont = await decodeFont(new Uint8Array(notoSerifThai));

  RiveFont.setFallbackFontCallback((codePoint: number, weight: number) => {
    console.log("fallback font missing glyph: ", codePoint, " + weight: ", weight);
    // 对于泰语，使用 Noto Serif Thai 字体
    if (codePoint >= 0x0E00 && codePoint <= 0x0E7F) {
      return [riveThaiDecodedFont];
    }
    return null;
  });
};

const main = async () => {
  await setFallbackFonts();
  const r = new Rive({ 
    src: "my.riv",
    autoplay: true,
    stateMachines: "State Machine 1",
    // ...
  });
};
main();

运行时替换字体​

回退字体​

运行时替换字体

回退字体