NarraLeaf

自定义字体

加载自定义字体并应用到 Player，再用 Texts 与 Item 设置对白与选项文字的默认样式

字体分为两层：普通播放器 UI 继承 CSS；对话和选项文字还可以通过 Texts、Item 单独指定默认值

1. 加载字体

网页优先使用 WOFF2，并保留系统字体作为回退

@font-face {
    font-family: "GameText";
    src: url("/fonts/game-text.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

.game-player {
    font-family: "GameText", system-ui, sans-serif;
}

Next.js 项目也可以使用 next/font/local，把生成的 className 放在同一个 Player 边界上

2. 应用到播放器

<GameProviders>
    <Player
        story={story}
        className="game-player"
        onReady={({ liveGame }) => liveGame.newGame()}
    />
</GameProviders>

页面、按钮和其他继承 font-family 的 UI 都会使用该字体

3. 设置对话文字默认值

从 NarraLeaf 0.10 开始，对话字体默认值属于组件 props，不再放在 GameConfig 中

import { Dialog, Nametag, Texts } from "narraleaf-react";

export function GameDialog() {
    return (
        <Dialog className="game-player rounded-xl bg-black/75 p-6">
            <Nametag color="#fbbf24" />
            <Texts
                defaultColor="white"
                fontFamily="GameText, system-ui, sans-serif"
                fontSize={22}
                fontWeight={400}
                fontWeightBold={700}
            />
        </Dialog>
    );
}

Sentence 和 Word 上的局部样式仍然优先

4. 设置选项文字默认值

自定义菜单在每个 Item 上设置文字样式

<Item
    defaultColor="white"
    fontFamily="GameText, system-ui, sans-serif"
    fontSize={20}
    fontWeight={400}
    fontWeightBold={700}
/>

检查项

  • 确认字体 URL 返回 200，且没有被 CORS 拦截
  • 检查常规和粗体字重。缺少字重时浏览器会自行合成
  • 保留 font-display: swap，避免加载期间文字长时间不可见
  • 游戏使用中日韩文字时，检查字体是否包含对应字形。只有拉丁字符的字体会逐字回退到系统字体

本页目录

1. 加载字体2. 应用到播放器3. 设置对话文字默认值4. 设置选项文字默认值检查项