chuck1in

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

  •  
  •   chuck1in · Nov 7, 2023 · 1414 views
    This topic created in 943 days ago, the information mentioned may be changed or developed.

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

    @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 replies    2023-11-07 16:41:05 +08:00
    mcluyu
        1
    mcluyu  
       Nov 7, 2023
    不太懂,英语里可能不会出现汉字,但是你们页面的中文里一个字母都不会出现的吗?
    guanbeilang
        2
    guanbeilang  
       Nov 7, 2023
    从表现来看应该是浏览器 css 资源加载的解析没有想象的那么智能。
    如果一定要省这部分流量,短期内就只能刻意避开浏览器的管理逻辑,就只能试试看用 JS 动态添加、或者 Node 根据 UA 输出 webfont 的样式了。
    chuck1in
        3
    chuck1in  
    OP
       Nov 7, 2023
    @mcluyu 一般的中文字体应该都可以表示英文字母的,不是只有中文字体。
    chuck1in
        4
    chuck1in  
    OP
       Nov 7, 2023
    @guanbeilang 英文字体体积很小,其实就算在加载一个也不算什么大事。只是有点奇怪为什么 zh 的环境就必须再加载一个英文字体,但是 en 的环境就能够只加载 robot
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   1052 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 39ms · UTC 18:05 · PVG 02:05 · LAX 11:05 · JFK 14:05
    ♥ Do have faith in what you're doing.