企业官网建设流程全解析

KaTeX 字体定制指南：3 个层级，快速搞定数学公式字体

【免费下载链接】KaTeXFast math typesetting for the web.项目地址: https://gitcode.com/GitHub_Trending/ka/KaTeX

博客里的公式渲染出来了，但大小和观感跟网站整体风格格格不入？这正是做 KaTeX 字体定制最典型的动机。好消息是：大多数需求改一行 CSS 就能解决，不需要动构建脚本，更不用碰字体文件。

30 秒看懂：KaTeX 字体定制的 3 个层级

KaTeX 是一款快速的 Web 数学排版引擎，它的字体放在 fonts/ 目录，覆盖 TTF、WOFF、WOFF2 三种格式；公式默认以周围文本 1.21 倍的大小渲染。定制按改动成本分三档：

按需选深度，停在任何一档都可以。

这是 KaTeX 默认字体的渲染效果，也是你定制时的对照基准。

方案一：改一行 CSS，把公式大小调下来

默认 1.21 倍是为了让上下标更易读，但在某些页面上会显得偏大。在站点样式表里加一行就行：

.katex { font-size: 1.1em; }

完事。这一档完全不碰 KaTeX 本身，无需构建，效果不满意随时回滚。

方案二：用 Sass 变量控制字体格式和字体路径

这一档面向自己用 Sass 管理样式表的场景。

先分清三种格式：WOFF2文件最小，适合现代浏览器；WOFF兼容面最广；TTF主要照顾很老的浏览器和本地安装。构建时三种默认都会带上，如果目标浏览器够新，关掉 TTF 能省掉一部分体积。

用 Sass 引入 KaTeX 样式时，可以直接覆盖配置变量——格式开关和字体目录路径都走变量，不需要重新构建 KaTeX 核心库：

@use 'node_modules/katex/src/styles/katex' with ( $font-folder: "path/to/fonts", $use-ttf: false, $use-woff: true, $use-woff2: true );

不走 Sass 的话，也可以在自行构建 KaTeX 时用环境变量强制指定每种格式是否包含，具体写法见方案三的构建步骤。

多层嵌套公式会放大尺寸问题，调整完记得检查各层级的比例是否协调。

方案三：替换字体文件并自行构建（重度改装）

如果确实要换字形——比如期刊指定了某款数学字体——那就只有这一条路。流程分四步：

1. 拿源码：克隆 KaTeX 仓库（git clone https://gitcode.com/GitHub_Trending/ka/KaTeX），然后在项目目录里执行yarn install装依赖。
2. 放字体：把自定义字体文件（TTF、WOFF 或 WOFF2）放进fonts/目录，命名遵循KaTeX_<FontFamily>-<Style>.ext规范。
3. 看引用：src/styles/fonts.scss 里的$font-folder（字体目录路径）和$use-woff2/$use-woff/$use-ttf（各格式是否包含）控制着构建行为，确认它们与你的字体文件对得上。
4. 构建：运行yarn build，拿到新生成的dist/katex.min.css和字体文件后投入使用。

两个容易忽略的细节：

• 想换字体目录，就设$font-folder变量，相对或绝对路径都可以；默认构建假设字体位于katex.min.css旁边的fonts文件夹。另一个入口是构建配置 webpack.common.js 里的sassVariables变量，自行构建时可以在其中追加$font-folder: "/custom/fonts/path";。
• 想强制指定格式组合，就在构建时传环境变量：

USE_TTF=false USE_WOFF=true USE_WOFF2=true yarn build

难度高、代价是一整套源码构建，只有在真的需要换字形时才值得做 🔧

通过 \mathbb 命令渲染的黑板粗体字体，常用于集合符号——这类字形背后对应的是独立的字体文件。

KaTeX 字体定制避坑清单

1. 字体 404、公式掉回系统字体：先核对$font-folder是否和字体文件夹真实位置一致，再看浏览器控制台报的 404。
2. 部分符号消失：KaTeX 的字形分散在 20 个字体族（Main、AMS、Math、Size 系列等）里，自定义字体要覆盖用到的符号，别只换一族。
3. 加载变慢：生产环境优先 WOFF2 并砍掉 TTF；若必须兼容老浏览器，至少保留 WOFF。另外可以把$font-display（默认block）改成swap，加载体验更顺滑。
4. 嵌套公式比例失调：上下标、分数这类嵌套场景会放大尺寸问题，改完一定要用多层嵌套的公式再验一遍。
5. 改完回不去：动字体前先备份原始文件，渲染不对劲时第一时间恢复。

收尾：按需挑一档，到此为止

一句话总结：大小交给 CSS，格式和路径交给 Sass 变量，字形交给字体文件。更多细节以官方文档 docs/font.md 为准，它就是这一块的权威说明 🎯

【免费下载链接】KaTeXFast math typesetting for the web.项目地址: https://gitcode.com/GitHub_Trending/ka/KaTeX