V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
chuck1in
V2EX  ›  前端开发

网站支持 i18n 并提供了 zh 和 en 两种环境下的字体。为何当用户代理为 zh 环境时会两个字体都加载?

  •  
  •   chuck1in · 172 天前 · 487 次点击
    这是一个创建于 172 天前的主题,其中的信息可能已经有所发展或是发生改变。

    代码里面定义了两种字体:

    @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 字体,不用再加载英文字体? 如果可以的话,应该怎么实现呢?

    4 条回复    2023-11-07 16:41:05 +08:00
    mcluyu
        1
    mcluyu  
       172 天前
    不太懂,英语里可能不会出现汉字,但是你们页面的中文里一个字母都不会出现的吗?
    guanbeilang
        2
    guanbeilang  
       172 天前
    从表现来看应该是浏览器 css 资源加载的解析没有想象的那么智能。
    如果一定要省这部分流量,短期内就只能刻意避开浏览器的管理逻辑,就只能试试看用 JS 动态添加、或者 Node 根据 UA 输出 webfont 的样式了。
    chuck1in
        3
    chuck1in  
    OP
       172 天前
    @mcluyu 一般的中文字体应该都可以表示英文字母的,不是只有中文字体。
    chuck1in
        4
    chuck1in  
    OP
       172 天前
    @guanbeilang 英文字体体积很小,其实就算在加载一个也不算什么大事。只是有点奇怪为什么 zh 的环境就必须再加载一个英文字体,但是 en 的环境就能够只加载 robot
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3000 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 13:30 · PVG 21:30 · LAX 06:30 · JFK 09:30
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.