网站支持 i18n 并提供了 zh 和 en 两种环境下的字体。为何当用户代理为 zh 环境时会两个字体都加载？
chuck1in · 2023-11-07 14:55:28 +08:00 · 666 次点击这是一个创建于 380 天前的主题，其中的信息可能已经有所发展或是发生改变。
代码里面定义了两种字体：
@font-face {
font-family: 'MiSans';
src: url('/font/MiSans-Regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Robot';
src: url('/font/roboto-latin-400-normal.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
:lang(en) {
font-family: 'Robot', sans-serif;
}
:lang(zh) {
font-family: 'MiSans', sans-serif;
}
- 当浏览器为英文语言时打开网页，会只加载 robot 字体并且正常渲染页面
- 当浏览器为中文语言时，打开网页会把两个字体都加载，然后使用中文字体渲染页面
能否做到用户代理为 zh 环境时，也只加载 MiSans 字体，不用再加载英文字体？ 如果可以的话，应该怎么实现呢？
 |
1
mcluyu 2023-11-07 15:34:49 +08:00
不太懂，英语里可能不会出现汉字，但是你们页面的中文里一个字母都不会出现的吗？
|
 |
2
guanbeilang 2023-11-07 15:41:54 +08:00
从表现来看应该是浏览器 css 资源加载的解析没有想象的那么智能。
如果一定要省这部分流量，短期内就只能刻意避开浏览器的管理逻辑，就只能试试看用 JS 动态添加、或者 Node 根据 UA 输出 webfont 的样式了。 |
 |
4
chuck1in OP @guanbeilang 英文字体体积很小，其实就算在加载一个也不算什么大事。只是有点奇怪为什么 zh 的环境就必须再加载一个英文字体，但是 en 的环境就能够只加载 robot
|
Select Language