同一个双语网站上,中文页面往往比英文页面打开得慢——问题通常不在设计或服务器,而在字体文件。中文字体要覆盖的字符数量远超英文字体,浏览器在显示中文文字之前,往往要先下载一个大得多的文件。好消息是不需要重新设计网站:只让浏览器下载页面实际用到的字符,或者对中文正文干脆不下载字体、直接用系统自带字体,就能解决大部分问题。
为什么网站的中文版感觉比英文版慢?
英文排版只需要拉丁字母、数字和标点,总共一百个左右的字符;中文常用字则有几千个。根据谷歌官方 web.dev 文档,中日韩(CJK)字体通常要覆盖的字符数量,是拉丁字体的 15 到 20 倍——这也是为什么同一页面上,完整的中文字体文件体积常常是英文字体的好几倍。手机网速稍慢时,访客感受到的就是中文文字迟迟不出现,英文版却正常打开。
这值得小企业官网花时间解决吗?
值得,原因有两个:主要内容多快出现(Largest Contentful Paint)是 Google 核心网页指标之一,直接影响排名;而且这个问题容易被忽略——多数网站主只测试英文页面,从没单独打开中文页面检查过。
最简单的做法:中文正文干脆不下载字体
每个主流操作系统都自带高质量中文字体:苹方(PingFang SC/TC)、微软雅黑、Noto Sans CJK。把系统字体写在自定义字体前面,浏览器就会直接用设备已装好的字体显示中文,零下载。这一个改动就能解决大部分问题,多数读者也看不出设计差别:
font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
如果确实需要自定义中文字体,怎么保持轻量?
有些品牌希望标题或 Logo 用特定中文字体。这时目标是只下载页面实际用到的那些字,而非整套字符集。谷歌从 2011 年起就提供了内置做法:在谷歌字体请求里加上 text= 参数,就能让接口只返回请求中指明的字符,而非整个字体文件,这对中日韩字体同样适用。配合 CSS 的 unicode-range——把字体按字符区间切成"切片",浏览器只取用到的那一片——谷歌自己的 web.dev 文档说明,这种做法相比下载完整字体,能把传输量减少约 90%。部分字体厂商也开始提供中日韩可变字体格式,把多个字重打包进一个文件——具体能省多少因厂商和字体而异,不要假设一个固定比例。
自查清单:10 分钟测试你网站的双语字体加载
- 打开中文首页(不是英文版),用 Chrome 开发者工具 Network 面板,按 "Font" 过滤。
- 记下字体传输的 KB 数,和英文首页对比——中文页面明显是好几倍,就是本文说的情况。
- 检查网站是在下载自定义中文字体,还是已用系统字体兜底。
- 确认 CSS 用了
font-display: swap,让文字不会隐身等待字体下载完。 - 如果自定义字体只在标题或 Logo 真正需要,正文部分改用系统字体组合。
常见问题
换成系统字体,中文页面看起来会不一样吗?
会有一点差别,但多数访客不会注意到。苹方、微软雅黑、Noto Sans CJK 本身就是清晰易读的中文字体,多数商家只需要在 Logo 或少数标题上用特定字体,正文不需要。
这个方法对英文页面也有用吗?
字符精简和 unicode-range 对任何网页字体都适用,但本文说的体积差距是中日韩字体特有的问题。如果英文页面本来就快,主要收益是把中文页面补到同一水平。
需要把网站重做一遍吗?
不需要。这只是字体加载和 CSS 层面的调整,不会动到排版、配色或内容本身。
我们是怎么做的
我们做双语网站时,会把中文和英文页面的字体加载分开测试——因为即便排版完全相同,两个语言版本的实际表现也真的不一样。中文正文默认用系统字体组合,只在品牌真正需要的地方,才上自定义、做过字符精简的中文网页字体。
了解我们如何打造双语网站,请看网站设计服务页面,或免费申请一次网站字体加载检查。
资料来源
- Google web.dev:An API for fast, beautiful web fonts —— 中日韩字体字符数对比与 unicode-range 传输量削减数据
- Google Developers Blog:Streamline your web font requests — introducing "text=" —— 动态字体字符精简参数说明
