免费咨询
网站设计

为什么双语网站的中文页面加载更慢?字体瘦身的 3 个实用办法

同一个网站上,中文页面常常比英文页面打开得慢——原因通常是中文字体文件天生更大。根据谷歌 web.dev 的说明,中日韩字体覆盖的字符数量是拉丁字体的 15 到 20 倍;系统字体兜底、字符精简和 unicode-range,这三招不用重新设计就能补上大部分差距。

同一个双语网站上,中文页面往往比英文页面打开得慢——问题通常不在设计或服务器,而在字体文件。中文字体要覆盖的字符数量远超英文字体,浏览器在显示中文文字之前,往往要先下载一个大得多的文件。好消息是不需要重新设计网站:只让浏览器下载页面实际用到的字符,或者对中文正文干脆不下载字体、直接用系统自带字体,就能解决大部分问题。

为什么网站的中文版感觉比英文版慢?

英文排版只需要拉丁字母、数字和标点,总共一百个左右的字符;中文常用字则有几千个。根据谷歌官方 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 分钟测试你网站的双语字体加载

  1. 打开中文首页(不是英文版),用 Chrome 开发者工具 Network 面板,按 "Font" 过滤。
  2. 记下字体传输的 KB 数,和英文首页对比——中文页面明显是好几倍,就是本文说的情况。
  3. 检查网站是在下载自定义中文字体,还是已用系统字体兜底。
  4. 确认 CSS 用了 font-display: swap,让文字不会隐身等待字体下载完。
  5. 如果自定义字体只在标题或 Logo 真正需要,正文部分改用系统字体组合。

常见问题

换成系统字体,中文页面看起来会不一样吗?

会有一点差别,但多数访客不会注意到。苹方、微软雅黑、Noto Sans CJK 本身就是清晰易读的中文字体,多数商家只需要在 Logo 或少数标题上用特定字体,正文不需要。

这个方法对英文页面也有用吗?

字符精简和 unicode-range 对任何网页字体都适用,但本文说的体积差距是中日韩字体特有的问题。如果英文页面本来就快,主要收益是把中文页面补到同一水平。

需要把网站重做一遍吗?

不需要。这只是字体加载和 CSS 层面的调整,不会动到排版、配色或内容本身。

我们是怎么做的

我们做双语网站时,会把中文和英文页面的字体加载分开测试——因为即便排版完全相同,两个语言版本的实际表现也真的不一样。中文正文默认用系统字体组合,只在品牌真正需要的地方,才上自定义、做过字符精简的中文网页字体。

了解我们如何打造双语网站,请看网站设计服务页面,或免费申请一次网站字体加载检查。

资料来源