企业官网建设流程全解析

做排版和前端交付这些年，被问得最多的两个问题，一个是“这个字体能不能商用”，另一个是“有没有免费又好看的开源字体推荐”。前者是授权问题，后者是选型问题。免费开源字体恰好能同时回应这两件事：只要授权协议选对、使用方式合规，它既能省下商业授权预算，又能让设计稿、网页、文档、视频字幕保持统一的视觉语言。我平时给团队做字体规范、给客户交付源文件、给前端项目配 Web Font，踩过的坑不算少。这篇就把我常用的开源字体、说明链接的识别方法、字体展示的排版参数，以及从下载到落地的完整流程一次讲透。适合设计师、前端开发、自媒体作者、经常做汇报文档的职场人，也适合刚接触字体排版的初学者。

1. 先搞懂开源字体的授权边界：别让“免费”变成“免责”

1.1 三类常见授权协议与商用红线

开源字体不是“不要钱随便用”这么简单，它背后是一套许可证。最常见的三类是SIL Open Font License 1.1（简称 OFL）、Apache License 2.0和GPLv2 + Font Exception。OFL 是我推荐优先级最高的一类：允许免费使用、研究、修改、分发，也允许嵌入文档、网页、应用程序，商用没有额外费用。它的核心限制有两条，一是修改后的字体不能继续使用原来的保留字体名（Reserved Font Name），二是不能单独售卖字体文件本身。换句话说，你可以把字体嵌进海报、App、电子书里收费，但不能把字体文件拷到网盘上标价出售。

Apache 2.0 更偏向软件生态，允许商用、修改、再分发，要求保留版权声明和 NOTICE 文件，修改过的文件需要注明。它没有 OFL 那种“保留字体名”的限制，但专利授权条款更明确，适合一些由大型项目孵化的字体。GPLv2 + Font Exception 则常见于早期开源字体：字体本身是 GPL，但“字体例外”条款允许把字体嵌入文档而不让文档也变成 GPL。如果你要修改字体并分发，就需要把字体源码一起开放。还有 CC0 和 IPA Font License，前者放弃版权、最宽松，后者允许商用但修改后需要改名，衍生作品也要沿用同样授权。

商用红线我一般总结成四句话：不单独售卖字体文件；不用字体名注册商标；修改后主动改名；再分发时把 LICENSE 或 OFL.txt 一起带上。很多纠纷不是因为“用了开源字体”，而是因为“把开源字体当成了自有资产”去卖或者去注册。尤其是给甲方做品牌项目时，甲方如果要求“字体版权买断、排他使用”，开源字体是满足不了排他性的，这一点要提前说清楚，避免后期扯皮。

1.2 字体文件格式与安装位置的选择逻辑

下载字体时会遇到 TTF、OTF、TTC、WOFF、WOFF2 和可变字体。TTF 用二次贝塞尔曲线，兼容性最好，Windows 和各类设计软件都稳；OTF 用三次贝塞尔曲线，字形精度高，适合印刷和高质量排版，但一些老系统或老软件支持一般。TTC 是字体集合，一个文件里打包多个字重或地区版本，安装后家族列表会多出好几项，优点是管理集中，缺点是某些办公软件只识别第一个字体。WOFF 和 WOFF2 是网页字体格式，WOFF2 压缩率更高，适合线上加载，不适合直接双击安装。

可变字体（Variable Font）是我近两年用得比较多的方案。一个文件里包含字重、字宽等多个轴，比如一个字重轴从 100 到 900，文件体积比装七个静态字重小很多，做响应式设计时很灵活。但它对软件有要求：较新的设计工具和浏览器支持较好，老版本办公软件可能只识别默认字重，甚至直接回退。给团队交付时，如果对方软件版本不可控，我会优先给静态字重，避免“我这边看是细体，你那边看是粗体”的尴尬。

安装位置也有讲究。Windows 可以右键“安装”到当前用户，不需要管理员权限；macOS 用“字体册”安装到当前用户；Linux 放到~/.local/share/fonts后执行缓存刷新。我的习惯是按项目建字体目录，而不是一次性往系统里塞几百个字体。字体越多，系统和设计软件的字体缓存越大，启动越慢，家族名冲突的概率也越高。尤其是同一款字体装了多个版本，软件可能调用到旧版本，排查起来非常费时间。

# Linux 用户级安装示例 mkdir -p ~/.local/share/fonts/project-fonts cp *.ttf ~/.local/share/fonts/project-fonts/ fc-cache -fv # 查看字体内部家族名与样式名，排查冲突 fc-scan --format '%{family}\n%{style}\n%{fontversion}\n' font.ttf

提示：不要从不明网盘或字体聚合站下载“破解版”“全集包”。开源字体的官方仓库一般会提供 LICENSE、OFL.txt、AUTHORS 和 Release 压缩包，文件命名清晰，版本号可查。来源不明的字体文件除了授权风险，还可能被篡改。

2. 中文开源字体选型：黑体、宋体、楷体的实际使用场景

2.1 黑体家族：从正文到标题的层级搭配

中文黑体是日常排版的主力。我常用的第一梯队是思源黑体，它的字形中性、字重齐全，从细体到粗体覆盖完整，屏幕显示和印刷都能胜任。它有两个常见的地区字形版本，做简体中文排版时选 SC 版本，避免出现日式或繁体字形。思源黑体的优点是“没有明显性格”，放在正文里不抢戏，放在标题里也不塌，适合企业文档、产品界面、汇报材料。缺点是全量安装体积大，我的做法是只装 Regular、Medium、Bold 三个字重，足够覆盖大多数场景。

更纱黑体是我做技术文档和代码界面时的常用选择。它把中文黑体和等宽西文字体做了整合，中文宽度和英文宽度能对齐，表格、终端、代码注释里的混排不会出现“中英文对不齐”的问题。它的等宽版本适合代码编辑器，非等宽版本适合技术文档正文。霞鹜新晰黑的字形更圆润一些，阅读长文时眼睛不容易累，适合公众号正文、教程类文档。得意黑则是另一种思路：倾斜、紧凑、有速度感，适合海报标题、短视频封面、活动 banner，但千万别拿它排正文，小字号下会显得拥挤。未来荧黑的几何感更强，适合品牌标题和 UI 大标题，搭配中性黑体正文效果不错。

黑体搭配的核心是字重差。正文用 Regular 400，标题用 Bold 700，中间至少拉开两档，视觉层级才清楚。如果正文用 Medium 500，标题也用 Bold 700，差异不够明显，读者会觉得“标题只是稍微粗了一点”。标题字距可以适当收紧，比如-0.01em到-0.02em，让大字看起来更紧凑；正文字距保持 0，不要乱调，中文的字面率本来就高，收紧字距会影响阅读。

2.2 宋体与楷体：长文阅读与人文气质的平衡

宋体在屏幕上的表现比黑体挑环境。思源宋体是我最放心的选择，字重齐全，笔画细节保留得好，适合书籍正文、报告、文化类设计。印刷场景下，宋体正文常用 10.5 到 12 磅，行高放到 1.8 到 2.0；屏幕场景下，正文建议 16 到 18 像素，低于 16 像素时细笔画容易发虚。思源宋体的粗体适合做文化类标题，细体适合做引文或注释，但不要用 100、200 这种极细字重排正文，屏幕上的横画会断断续续。

霞鹜文楷是楷体风格里我用得最多的一款。它的字形接近手写楷书，适合引用、诗歌、文化类标题、手帐排版，也适合给儿童读物做正文。但楷体在屏幕小字下的可读性不如黑体，正文使用建议不小于 16 像素，且行高要放宽到 1.8 以上。朱雀仿宋适合公文、证书、注释这类需要“正式感”的场景，仿宋的笔画比宋体更匀称，小字号下反而比宋体稳。花园明朝和京华老宋体偏向古籍、传统文化主题，适合封面、海报、文化类长图，不适合大段正文。

宋体和楷体的选型逻辑与黑体不同。黑体看“层级”，宋体看“气质”。一份企业年度报告，正文用宋体、标题用黑体，会显得正式；一本文化类手册，正文用宋体、引文用楷体，会显得有呼吸感。但要注意字体性格不要打架：宋体配楷体是传统搭配，宋体配几何黑体是現代搭配，宋体配手写体会显得杂乱。我的经验是，一个页面里的中文语系不超过两种，黑体负责信息层级，宋体或楷体负责气质点缀，足够了。

2.3 手写体与创意字体：慎用但出彩的场景

手写体和创意字体是“调味料”，不是“主食”。它们适合标题、海报、包装、短视频封面、活动页头图，不适合正文、表格、小字注释。原因很直接：创意字体的字形设计往往牺牲了可读性，笔画连写、结构变形、字面率不统一，放到小字号里会糊成一团。我见过不少海报，标题用了手写体，副标题也用，正文还用，结果整张图没有视觉重点，读者不知道先看哪里。

创意字体的另一个问题是字符集覆盖。很多手写体只覆盖常用汉字和基本标点，遇到生僻字、人名、地名、专业术语就会缺字，软件自动回退到系统字体，画面里突然出现一个“不是这个风格”的字，非常扎眼。使用前一定要用样张测试：把项目里可能出现的人名、品牌名、专业词、数字、英文、标点都打一遍，看看有没有缺字。商用授权也要逐个确认，有些字体标着“免费”，但只允许个人使用，商用需要额外授权。

搭配上，我的做法是一个页面只用一个创意字体，而且只用在最大的标题上。正文和副标题用中性黑体或宋体，把风格冲突降到最低。比如得意黑做活动标题，正文用思源黑体 Regular；霞鹜文楷做引文，正文用思源宋体。创意字体和中性字体之间要有明显的字重或风格差异，否则读者会以为“你是不是装错字体了”。

3. 西文与编程字体：等宽、连字与多语言混排

3.1 编程等宽字体的核心指标

编程字体首先得是等宽，否则代码缩进会对不齐。但等宽只是底线，真正影响体验的是几个细节：0和O、1和l和I、rn和m是否容易混淆；标点是否居中；连字（ligature）是否丰富；中文混排时宽度是否对齐。我常用的几款里，Fira Code的连字最丰富，=>、!=、===会合并成符号，看起来舒服，但代码审查时有人会误读，团队协作可以关掉连字。Cascadia Code的终端友好度高，字形偏圆，长时间看眼睛不累。Maple Mono对中文友好，圆润耐看，适合中英混排的注释。Iosevka可以自定义字宽和字形，适合喜欢窄字体的人。Hack和Victor Mono则偏中性，Victor Mono 的斜体带手写感，做代码展示图很出片。

等宽字体和中文字体混排时，要注意宽度比例。大多数等宽英文字符宽度是 0.6em 左右，中文是 1em，两个英文字符刚好对一个中文。更纱黑体的等距版本就是按这个逻辑做的，代码注释里的中文和英文能对齐。如果你用的英文字体宽度不是标准比例，中文注释就会错位。配置时把英文字体放在前面，中文字体放在后面，浏览器和编辑器会按字符逐个回退。

{ "editor.fontFamily": "'Fira Code', 'Sarasa Mono SC', monospace", "editor.fontLigatures": true, "editor.fontSize": 14, "editor.lineHeight": 1.6 }

注意：连字功能在演示和截图时很好看，但在团队代码规范里建议统一关闭，避免新人把连字符号误认为实际输入的字符。可以只在个人编辑器里开，提交代码前不影响源文件。

3.2 中西文混排的基线、字重与字距调校

中西文混排是最容易“看起来哪里不对”的地方。西文字体的 x 高度和中文字面率不同，同样字号下，西文看起来偏小，中文看起来偏大。我的处理方式是：中文用思源黑体 Regular，西文用 Inter 或 Fira Sans，西文字号比中文小 0.5 到 1 像素，视觉重量就接近了。字重也要匹配，中文用 400，西文不要用 300，否则一行里中文黑、西文灰，像两种字体拼出来的。行高按中文的阅读节奏来，正文 1.7 到 1.8，代码 1.6，标题 1.3 左右。

字距方面，中文正文保持默认，西文标题可以收紧-0.01em，但不要收得太狠，字母会粘在一起。数字对齐用等宽数字，CSS 里写font-variant-numeric: tabular-nums;，表格里的金额、日期、编号就能上下对齐。中英文之间的空格，我一般手动加一个四分之一空格，或者用 CSS 的text-spacing（支持度有限），最稳的还是人工检查。不要依赖“自动中英文加空格”的插件处理正式稿件，插件对专有名词和标点的判断不一定准。

:root { --font-sans: 'Inter', 'Source Han Sans SC', 'Noto Sans SC', sans-serif; --font-serif: 'Source Serif', 'Source Han Serif SC', serif; --font-mono: 'Fira Code', 'Sarasa Mono SC', monospace; } body { font-family: var(--font-sans); font-size: 17px; line-height: 1.75; letter-spacing: 0; } h1, h2, h3 { font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; } .data-table td { font-variant-numeric: tabular-nums; }

4. 字体展示与效果验证：本地预览、网页嵌入与样张制作

4.1 本地快速预览与字体样张排版

下载完字体，别急着往设计稿里套，先做一张字体样张。样张不用很复杂，但内容要覆盖项目里可能出现的字符：常用汉字、标点、数字、英文大小写、易混字符（未末、己已巳、日曰、0O、1lI）、项目里的人名和品牌名。字号梯度至少放 12、14、16、18、24、32、48、72 像素，行高梯度放 1.4、1.6、1.8、2.0，字重把安装了的都列出来。这样一眼就能看出这款字体在小字号下是否发虚、粗体是否糊、标点是否居中、数字是否等宽。

我做样张时会标注四类信息：字体名、版本号、授权协议、适用场景。版本号很重要，同一款字体不同版本的字形可能有微调，团队里有人用旧版、有人用新版，交付时就会出现“字重对不上”的问题。授权协议写在样张上，是为了让团队其他人拿去用的时候知道边界，不用每次都来问。适用场景写清楚“正文可用”“仅标题”“不建议小字”，减少误用。

“说明链接”这块，我一般不直接给一个可能失效的下载地址，而是给识别路径：在主流代码托管平台搜索字体的英文名，认准官方仓库，看 README 里是否注明授权协议，看 Release 页面是否有按版本打包的字体文件，看仓库里是否有 LICENSE、OFL.txt、AUTHORS 这些文件。如果只有网盘链接、没有协议文件、没有版本记录，我基本不会用。字体文件下载后可以用命令核对内部名称和版本，确认下载的不是“套壳改名”的文件。

# 查看字体家族名、样式名、版本号 fc-scan --format '%{family}\n%{style}\n%{fontversion}\n' downloaded-font.ttf # 查看字体包含的字符集范围（粗略） fc-query --format '%{charset}\n' downloaded-font.ttf | head -5

4.2 网页字体加载与子集化压缩

中文网页字体最大的问题是体积。全量中文 TTF 动辄 8 到 12MB，直接加载会让首屏白屏好几秒。我的做法是按需子集化：正文用系统字体，标题和品牌字用 Web Font；如果必须用自定义中文字体，就提取项目实际用到的字符，压成 WOFF2。常用 3500 字加标点的子集，WOFF2 大概 0.8 到 1.5MB；如果只做标题几十个字，可以压到 100KB 以内。这个体积差异非常明显，移动端感受最深。

子集化命令用pyftsubset，属于 fonttools 工具链。参数里--text-file指定字符集文件，--flavor=woff2输出 WOFF2，--layout-features='*'保留排版特性，--no-hinting去掉微调指令减小体积。注意不要对可变字体做破坏性裁剪，除非你确认只用一个字重。子集化后一定要在页面里测试缺字情况，尤其是标点、数字、生僻字，缺字会回退到系统字体，视觉上很突兀。

# 提取项目字符集后做子集化 pyftsubset SourceHanSansSC-Regular.otf \ --text-file=chars.txt \ --flavor=woff2 \ --output-file=subset-regular.woff2 \ --layout-features='*' \ --no-hinting

@font-face { font-family: 'BrandSans'; src: url('./fonts/subset-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } .hero-title { font-family: 'BrandSans', 'Source Han Sans SC', sans-serif; font-weight: 700; }

提示：font-display: swap能让文字先用系统字体显示，字体加载完再替换，避免白屏。但替换瞬间会有字形跳动，品牌标题如果对视觉稳定性要求高，可以用font-display: optional或预加载关键字体文件。

4.3 字体展示页面的排版参数参考

如果要做一页字体展示页，参数不用太花哨，关键是让读者看清字形。我常用的配置是：正文 16 到 18 像素，行高 1.75，字重 400；大标题 40 到 56 像素，行高 1.2 到 1.3，字重 700，字距-0.02em；注释 12 到 14 像素，行高 1.6，字重 400；代码块 14 像素，行高 1.6，等宽字体。展示页顶部放字体名、版本、授权标签，中部放样张，底部放安装说明和获取路径。不要把下载按钮做成“直接给字体文件”，除非授权明确允许再分发；OFL 允许再分发，但要把协议文件一起带上。

5. 实操：从下载到落地的完整流程与避坑清单

5.1 下载、校验与安装

我的标准流程是：先确定字体的英文名，避免搜中文名搜到一堆转载站；再去主流代码托管平台找官方仓库，看 README 和 LICENSE；然后去 Release 页面下载对应版本，优先选打包好的压缩包，不要一个个文件点；下载后核对文件大小和哈希，如果仓库提供了校验值就比对一下；解压后先看有没有协议文件；安装时按项目目录放，不要全塞系统字体目录；装完重启设计软件或编辑器；最后用样张验证字重和字符覆盖。

安装这一步看似简单，坑却不少。Windows 上同一款字体如果安装了多个版本，字体列表里可能出现重复项，软件调用时不一定用哪个；macOS 的“字体册”会提示重复字体，选择“保留两者”还是“替换”要看版本号；Linux 上装完必须执行fc-cache -fv，否则新字体不生效。TTC 文件安装后，家族名可能带“SC”“TC”“JP”后缀，调用时要写全称，不然会回退。

# 安装后验证字体是否被系统识别 fc-list | grep -i "source han" fc-match "Source Han Sans SC" # 查看字体文件的基本信息 ttx -l font.otf | head -20

注意：不要一次性安装整个字体家族的所有地区版本和所有字重。字体缓存膨胀会让设计软件启动变慢，家族名冲突也会增加排查成本。按项目需要装三到五个字重，足够覆盖大多数排版场景。

5.2 设计软件与办公软件中的调用差异

设计软件对字体的支持通常比办公软件好。较新的设计工具支持可变字体，能直接拖字重轴；老版本可能只识别静态字重，可变字体只显示默认值。OTF 在印刷类软件里表现稳定，TTF 在屏幕类软件里兼容性更好。调用时注意字体家族名和样式名的区别：有些字体家族叫“思源黑体 SC”，样式叫“Regular”“Bold”；有些字体家族叫“Source Han Sans SC”，样式叫“Normal”“Bold”。名字写错，软件就会回退到默认字体。

办公软件的坑更多。Word 和 PowerPoint 对可变字体的支持有限，字重可能只显示 Regular 和 Bold 两档；TTC 文件可能只识别第一个字体；嵌入字体功能不是所有字体都允许使用，保存时勾选了“嵌入字体”也可能在别的电脑上被替换。给同事发文档时，我一般会做两件事：一是把关键标题转成图片或轮廓，二是附一份字体说明，写清楚用了什么字体、什么版本、在哪里获取。如果是正式交付，PDF 里嵌入字体子集更稳妥。

设计稿交付也是同理。源文件里用了开源字体，不等于甲方电脑上一定有。交付前把文字转曲或轮廓化，或者把字体文件和授权说明一起打包。转曲会丢失文本可编辑性，适合最终视觉稿；需要甲方继续编辑的稿子，就附字体安装包和安装说明。别假设对方会装字体，这个假设十有八九会翻车。

5.3 常见问题速查表

6. 常见问题与排查实录

6.1 字体不显示、乱码、缺字的排查路径

字体不显示，我通常按这个顺序排查：先确认字体有没有安装成功，用系统字体列表或命令行查；再确认软件有没有重启，很多软件只在启动时读字体缓存；然后看字体家族名有没有冲突，同名字体装了多个版本时，先卸掉旧的；最后看字符是否在字体覆盖范围内，尤其是生僻字、繁体字、特殊标点。网页端还要多看一步：打开开发者工具的网络面板，看 WOFF2 文件是否返回 200，控制台有没有 CORS 报错，CSS 里的font-family拼写是否和@font-face里的名字一致。

乱码和缺字是两回事。乱码通常是编码问题，文件本身不是 UTF-8，或者字体不支持该语言字符；缺字是字体字符集里没有这个字，软件回退到其他字体。排查缺字时，我会把可疑字符单独打出来，换一款覆盖更全的字体对比。如果换字体后正常，说明原字体覆盖不足；如果换字体后还是方框，可能是输入法或编码问题。中文排版里还要注意全角半角标点，有些字体只做了半角标点，全角逗号句号会回退，看起来像“标点突然变细了”。

# 查找系统里已安装的相似字体，排查家族名冲突 fc-list :lang=zh family | sort -u | grep -i "hei" # 查看某字符是否被字体覆盖（示例：字符“龘”） fc-match -s "Source Han Sans SC:charset=9f98"

提示：做古籍、人名、地名类项目时，优先选字符覆盖广的字体，并在样张里把项目专有字都测一遍。不要等排版到一半才发现缺字，返工成本很高。

6.2 商用合规与二次分发的注意事项

商用合规的核心不是“字体免费”，而是“授权允许”。OFL 字体商用没问题，但你要保留协议文件；修改字体后要改名；不能单独售卖字体文件；不能拿字体名去注册商标。把字体嵌进 App、游戏、电子书、视频字幕，OFL 和 Apache 一般都允许，但 GPL 字体要看字体例外条款。把字体打包进模板、主题、课程资料再分发时，要确认授权是否允许再分发，并且把 LICENSE 一起带上。有些字体标着“免费商用”，但禁止再分发，这种就不能放进模板包里。

团队协作时，我会建一份字体白名单，记录字体名、版本、授权协议、获取路径、安装位置、允许使用的场景。新项目开始时先查白名单，没有的就走一遍授权核对流程。给甲方交付时，如果对方要求“字体版权买断”或“排他使用”，开源字体满足不了，要提前说明并给出替代方案，比如转曲、用系统字体、或者购买商业授权。把丑话说在前面，比后期被法务追问要从容得多。

我自己的习惯是：每个项目建一个fonts目录，里面放字体文件、LICENSE 副本、样张截图和一份README，写清楚为什么选这款字体、用在哪些位置、有没有修改。项目结束后，这个目录就是字体使用记录，谁接手都能看懂。踩过几次“字体版本对不上”的坑之后，这个习惯帮我省了很多沟通成本。