Joomla网站字体与排版指南：让外贸站的中英文内容更好读

你有没有过这种体验：打开一个外贸站，产品图挺专业，可正文一读就累——行太长、字太小，中英文挤在一起，看两段就想关掉。字体和排版平时不起眼，却直接决定访客愿不愿意把你的内容读下去。这篇文章不聊设计理论，就说几件能马上动手的事：字体怎么选、字号行高怎么定、字体加载怎么才不拖慢首屏。

中英混排为什么最容易翻车

英文字母有大小写、有小写字母高度（x-height），中文是方块字，两者视觉重量天生不一样。同一个字号下，中文看起来更“满”，英文更“轻”，直接混排就像两种字体硬拼在一起。

更麻烦的是字体栈。不少模板默认只写了英文字体，浏览器找不到中文字形就回退到系统默认——Windows 上常见的是宋体，Mac 上是苹方。结果同一段文字里，英文是一种字体、中文是另一种，连标点粗细都对不上。外贸站大部分页面是英文，可产品参数、公司资质、工厂介绍里常常夹着中文，这个坑迟早要踩。

顺手说个细节：英文单词和数字前后留半个字宽的空隙，读起来会舒服很多；中文标点老老实实用全角，别混 ASCII 的半角标点，那是最容易被一眼看穿“不专业”的地方。

字体怎么选：一个主字体加三个备选就够

正文用无衬线最稳，Inter、Source Sans 3、Roboto 都是成熟选择；中文配思源黑体（Noto Sans SC），或者干脆让系统字体兜底。字体栈可以这么写：

font-family: 'Inter', 'Noto Sans SC', 'Microsoft YaHei', -apple-system, Arial, sans-serif;

整站别超过两个字体家族。标题用同一家族的粗体，比再加载一个标题字体省一次下载，视觉上也不打架。中文正文别用宋体那类衬线体，小字号下发糊；英文标题想显质感，用衬线倒是可以。

还有个常被忽略的点：字体也有“性格”。工业设备、五金、包装这类 B2B 站，干净的中性无衬线比花体更可信；做消费品可以松一点。字体选错了，页面再漂亮也透着别扭。

字号、行高、行宽：三个数字定基调

正文 16 到 18px，行高 1.6 到 1.75，这是英文长文最舒服的区间。行宽控制在 60 到 75 个英文字符，落到页面上大概 700 到 800px 的内容区；超过这个宽度，眼睛换行时容易串行，读三行就想放弃。

移动端正文别小于 16px，否则 iOS 判断字号过小会自动放大整个页面，布局当场就乱。段间距靠 margin-bottom: 1em 控制，别用两个 <br> 撑空白——在手机上那就是一道沟。标题层级用字号和字重拉开差距就够了：H2 大概 28 到 32px，H3 20 到 24px，别靠颜色区分层级。

改完记得用手机真机看一遍。桌面浏览器缩窄窗口和真机渲染差别不小，尤其是中文字体的回退结果。

字体加载：别让排版拖慢首屏

字体文件是实打实的下载量。中文思源黑体全量五六个字重加起来能到十几 MB，直接引用等于让访客先等一个字体包。几个实用做法：

一是自托管 woff2，别依赖 Google Fonts——第三方请求多一次握手，某些地区还不稳定，自托管反而更可控。二是加上 font-display: swap，字体没下完时先用系统字体显示，别让正文空白几秒。三是中文做子集化，只保留常用字，体积能压到几百 KB。四是只加载真正用到的字重，400 和 700 基本够用，别把 100 到 900 全拉一遍。

要是站点本来就慢，先按图片优化那篇把图片和懒加载理顺，再来动字体，提速会更明显。

在 Joomla 里具体怎么落地

多数商业模板把字体设置放在模板参数里，比如 Helix 系模板的 Template Settings 里就有 Typography 一栏，可以直接选 Google Fonts 或者填自定义字体栈。用SP Page Builder 搭的页面，区块和文字元件还能单独设字体，适合落地页做局部强调。

最稳的做法是覆写模板的 custom.css，用 CSS 变量统一改，别一个个元件去点：把正文字体、颜色、行高收进一个变量块，改一处全站生效。动手前先备份 custom.css，改完清 Joomla 的系统缓存和模板缓存，挂了 CDN 的记得刷缓存，不然你会以为白改了。

页脚、侧栏这些模块区域的排版最容易失控，字号和行高常常跟正文对不上，统一收一遍会显得整站更整齐，模块管理那篇里写了各区域的位置。

可读性也是无障碍的一部分

字号太小的另一面，是四五十岁的采购经理拿着手机根本看不清。正文对比度按 WCAG 的 AA 标准来，浅灰字配白底是最常见的扣分项，这也是无障碍优化里最先要处理的地方。

排版这活儿，改好了没人夸，改坏了人人骂。要是你没时间一项项试，把站点交给六翼开源，我们按你的行业和目标市场把字体、字号、加载速度一起调顺，移动端的细节也顺手过一遍。