Folia字体栈与排版技巧FontFallbackStack让歌词更好看的8个设置【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-majorFolia Major 是一款专注于绚丽歌词动画效果的本地音乐、Navidrome 与多平台在线音乐播放器。它的歌词渲染引擎内置了一套完整的字体栈Font Stack系统本文通过 FontFallbackStack 回退字体、字重、字号等 8 个关键设置手把手教你让歌词排版既好看又稳定跨平台显示不翻车。git clone https://gitcode.com/GitHub_Trending/fo/folia-major一、先认识 Folia 的字体系统Folia 的字体逻辑集中在 fontStacks.ts它做了三件重要的事内置三套字体栈无衬线sans、衬线serif、等宽mono每套都按「西文字体 → CJK 字体 → 系统字体」的顺序逐级回退保证中英混排不出丑自定义字体追加你上传的字体或手动填写的字体名会被自动插到内置栈最前面字重规范化字重限制在 100–900 之间、按 10 取整并支持「自动」模式跟随动画效果取设计值二、8个设置让歌词字体更好看设置 1选对字体风格sans / serif / mono在外观设置里字体风格决定整组字体栈。Folia 的内置栈示例见 fontStacks.tssansInter → Noto Sans CJK SC → 苹方 → 微软雅黑……适合绝大多数歌词serif自带「獅尾四季春加糖SC」→ Iowan Old Style → 思源宋体……文艺感最强monoIBM Plex Mono → 更纱黑体 Mono……适合电子、实验风格设置 2上传自定义字体个性拉满Folia 支持上传自己的歌词字体实现在 customLyricsFont.ts。上传后字体会自动成为字体栈的第一优先级且会跟随主题一起导出、分享给别人。注意移动端浏览器无法读取系统字体列表时上传入口会自动出现在歌词动画面板底部。设置 3用字号缩放找到最佳比例歌词字号由lyricsFontScale控制在 VisPlayground.tsx 的面板中以百分比滑块调节默认 100%。经验值横版全屏动画 90%–110%竖屏直播画面 120% 左右更醒目。拖动时是即时预览松手才真正保存可以放心大胆试。设置 4字重别用「自动」之外乱调字重fontWeight支持 100–900 滑杆但建议先保持「自动」。Folia 的规则是一旦你手动设置了字重它会覆盖所有动画效果的默认设计字重规则见 reuse-project-utilities/SKILL.md。喜欢细线条歌词可以试 300喜欢粗壮冲击力选 700 以上。设置 5核心技巧——添加 FontFallbackStack 回退字体这是本文标题的主角。在歌词动画面板的字体区有一个字体回退栈输入框由 FontFallbackStackControl.tsx 实现用逗号或换行分隔多个字体名自动去重、去掉引号你只需写干净的字体名填写的内容会被 resolveThemeFontStack 拼接到内置栈最前面实用写法示例分行填写即可LXGW WenKai Screen, Inter, Noto Sans CJK SC这样即使对方电脑没装你的首选字体也会优雅降级而不会整段歌词变成默认宋体。设置 6翻译字幕字体——继承或独立控制翻译/假名字幕可以「继承歌词字体」也可以独立设置字号、字重与字体名设置项见 AppearanceSettingsSubview.tsx。Folia 还为翻译字幕准备了专用回退栈TRANSLATION_FONT_STACKS把 system-ui 等系统字体排在前面让副歌词比主歌词更「本地化」。设置 7跨平台不翻车——字体栈的正确顺序一条黄金法则西文优先字体放前面CJK 字体做兜底。因为 CSS 字体栈是逐字回退的同一行中英混排时每个字符都会独立找栈里第一个能渲染它的字体。Folia 的内置栈正是这个思路Inter 渲染英文、Noto Sans CJK SC 渲染中文你自定义时照着这个结构写即可。设置 8用配置码保存和分享整套排版调好的字体风格、字号、字重、回退栈全部包含在 Folia 的外观配置里可以一键复制为压缩配置码或 JSON 分享见 AppearanceSettingsSubview.tsx 的导出区OBS 推流链接也会自动烧入当前字体设置。别人导入时会弹出差异确认可以选择只导入字体相关项、不动主题色。三、快速上手清单打开「设置 → 外观 → 歌词动画调节」先选字体风格再按需上传自定义字体字号滑到合适比例字重保持自动在字体回退栈里补 2–3 个兜底字体翻译字幕按需继承歌词字体满意后复制配置码备份四、相关源码与文档字体栈核心逻辑src/utils/fontStacks.ts回退栈输入控件src/components/visualizer/FontFallbackStackControl.tsx歌词动画调试面板src/components/visualizer/VisPlayground.tsx外观设置界面src/components/modal/settings/AppearanceSettingsSubview.tsx自定义字体服务src/services/customLyricsFont.ts渲染架构说明src/components/visualizer/README.md项目技术文档docs/technical.md掌握 FontFallbackStack 之后你的歌词动画就能在任何设备上保持一致的精致排版——这正是 Folia Major「绚丽歌词动画」体验的底层保障。【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Folia字体栈与排版技巧：FontFallbackStack让歌词更好看的8个设置
Folia字体栈与排版技巧FontFallbackStack让歌词更好看的8个设置【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-majorFolia Major 是一款专注于绚丽歌词动画效果的本地音乐、Navidrome 与多平台在线音乐播放器。它的歌词渲染引擎内置了一套完整的字体栈Font Stack系统本文通过 FontFallbackStack 回退字体、字重、字号等 8 个关键设置手把手教你让歌词排版既好看又稳定跨平台显示不翻车。git clone https://gitcode.com/GitHub_Trending/fo/folia-major一、先认识 Folia 的字体系统Folia 的字体逻辑集中在 fontStacks.ts它做了三件重要的事内置三套字体栈无衬线sans、衬线serif、等宽mono每套都按「西文字体 → CJK 字体 → 系统字体」的顺序逐级回退保证中英混排不出丑自定义字体追加你上传的字体或手动填写的字体名会被自动插到内置栈最前面字重规范化字重限制在 100–900 之间、按 10 取整并支持「自动」模式跟随动画效果取设计值二、8个设置让歌词字体更好看设置 1选对字体风格sans / serif / mono在外观设置里字体风格决定整组字体栈。Folia 的内置栈示例见 fontStacks.tssansInter → Noto Sans CJK SC → 苹方 → 微软雅黑……适合绝大多数歌词serif自带「獅尾四季春加糖SC」→ Iowan Old Style → 思源宋体……文艺感最强monoIBM Plex Mono → 更纱黑体 Mono……适合电子、实验风格设置 2上传自定义字体个性拉满Folia 支持上传自己的歌词字体实现在 customLyricsFont.ts。上传后字体会自动成为字体栈的第一优先级且会跟随主题一起导出、分享给别人。注意移动端浏览器无法读取系统字体列表时上传入口会自动出现在歌词动画面板底部。设置 3用字号缩放找到最佳比例歌词字号由lyricsFontScale控制在 VisPlayground.tsx 的面板中以百分比滑块调节默认 100%。经验值横版全屏动画 90%–110%竖屏直播画面 120% 左右更醒目。拖动时是即时预览松手才真正保存可以放心大胆试。设置 4字重别用「自动」之外乱调字重fontWeight支持 100–900 滑杆但建议先保持「自动」。Folia 的规则是一旦你手动设置了字重它会覆盖所有动画效果的默认设计字重规则见 reuse-project-utilities/SKILL.md。喜欢细线条歌词可以试 300喜欢粗壮冲击力选 700 以上。设置 5核心技巧——添加 FontFallbackStack 回退字体这是本文标题的主角。在歌词动画面板的字体区有一个字体回退栈输入框由 FontFallbackStackControl.tsx 实现用逗号或换行分隔多个字体名自动去重、去掉引号你只需写干净的字体名填写的内容会被 resolveThemeFontStack 拼接到内置栈最前面实用写法示例分行填写即可LXGW WenKai Screen, Inter, Noto Sans CJK SC这样即使对方电脑没装你的首选字体也会优雅降级而不会整段歌词变成默认宋体。设置 6翻译字幕字体——继承或独立控制翻译/假名字幕可以「继承歌词字体」也可以独立设置字号、字重与字体名设置项见 AppearanceSettingsSubview.tsx。Folia 还为翻译字幕准备了专用回退栈TRANSLATION_FONT_STACKS把 system-ui 等系统字体排在前面让副歌词比主歌词更「本地化」。设置 7跨平台不翻车——字体栈的正确顺序一条黄金法则西文优先字体放前面CJK 字体做兜底。因为 CSS 字体栈是逐字回退的同一行中英混排时每个字符都会独立找栈里第一个能渲染它的字体。Folia 的内置栈正是这个思路Inter 渲染英文、Noto Sans CJK SC 渲染中文你自定义时照着这个结构写即可。设置 8用配置码保存和分享整套排版调好的字体风格、字号、字重、回退栈全部包含在 Folia 的外观配置里可以一键复制为压缩配置码或 JSON 分享见 AppearanceSettingsSubview.tsx 的导出区OBS 推流链接也会自动烧入当前字体设置。别人导入时会弹出差异确认可以选择只导入字体相关项、不动主题色。三、快速上手清单打开「设置 → 外观 → 歌词动画调节」先选字体风格再按需上传自定义字体字号滑到合适比例字重保持自动在字体回退栈里补 2–3 个兜底字体翻译字幕按需继承歌词字体满意后复制配置码备份四、相关源码与文档字体栈核心逻辑src/utils/fontStacks.ts回退栈输入控件src/components/visualizer/FontFallbackStackControl.tsx歌词动画调试面板src/components/visualizer/VisPlayground.tsx外观设置界面src/components/modal/settings/AppearanceSettingsSubview.tsx自定义字体服务src/services/customLyricsFont.ts渲染架构说明src/components/visualizer/README.md项目技术文档docs/technical.md掌握 FontFallbackStack 之后你的歌词动画就能在任何设备上保持一致的精致排版——这正是 Folia Major「绚丽歌词动画」体验的底层保障。【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考