中文、日文、英文切换时页面为什么会变大变小

这个网站做多语言后，我遇到一个很微妙的问题：切换中文、日文、英文时，页面布局会有明显的变大变小。不是整体坏掉，但视觉上会感觉不稳。

一开始我以为是 JavaScript 切换内容导致的。后来排查下来，真正的原因主要是字体、字形度量和内容长度。

问题一：不同系统字体的视觉大小不一样

浏览器默认字体栈里，中文、日文、英文可能落到不同字体。即使 CSS 都是 font-size: 16px，不同字体的 x-height、字面高度、字重和行距也不一样。

中文看着合适，切到日文可能显得更大；英文又可能因为单词长度和换行方式，看起来占用更少空间。这不是错觉，是字体度量差异。

问题二：内容长度会改变布局

多语言不是逐字替换。同一句中文可能很短，日文可能需要更多字符，英文可能因为空格和长单词产生不同换行。

如果卡片、按钮、hero 文案没有稳定尺寸，语言一切换，容器高度就会跟着变。看起来就像页面在呼吸，但不是那种好看的呼吸。

我最后怎么处理

我没有让每种语言都强行完全一样，因为那样会牺牲可读性。最后的思路是让差异变小、让布局稳定：

• 使用覆盖中文、日文、英文的 CJK 字体，减少系统字体差异
• 给关键区域设置稳定的行高和最小高度
• 按钮、语言切换器、产品卡片使用固定或可预期的尺寸
• 字体文件自托管，避免外部字体加载不稳定
• 通过字体子集减少 Web 字体体积，降低首次加载压力

字体加载也会造成跳动

还有一个隐藏问题：如果页面先用系统字体渲染，Web 字体加载完后再替换，就会发生字体闪动和布局变化。

所以我把字体作为站点资源的一部分维护，并在部署时自动重建子集。这样体积不会太夸张，也能保持中文、日文、英文的视觉统一。

这次学到的

多语言页面的稳定感，不只是 CSS 写得整齐。它还取决于字体、文案长度、换行、加载顺序和组件尺寸。

尤其是中日英混合的网站，如果只用系统字体栈，很容易在某些设备上看起来不一样。要做得舒服，就要把字体当成界面的一部分，而不是浏览器自己解决的细节。