带字形变体的Zfull-BIG5网络字体在Chrome中显示异常

问题重现 #

本地字体显示正常 #

Windows 11本地安装Zfull-BIG5字体后，以下HTML代码可正常渲染字体：

<html style="margin:0; padding:0; height:525px; width:525px;">
   <meta charset="utf-8" />
   <body style="margin:0; padding:0; height:525px; width:525px;">
     <span style="font-family: Zfull-BIG5; font-size: 10px">10: test llll 123</span><br>
     <span style="font-family: Zfull-BIG5; font-size: 11px">11: test llll 123</span><br>
     <span style="font-family: Zfull-BIG5; font-size: 12px">12: test llll 123</span><br>
     <span style="font-family: Zfull-BIG5; font-size: 13px">13: test llll 123</span><br>
     <span style="font-family: Zfull-BIG5; font-size: 14px">14: test llll 123</span><br>
     <span style="font-family: Zfull-BIG5; font-size: 15px">15: test llll 123</span><br>
     <span style="font-family: Zfull-BIG5; font-size: 16px">16: test llll 123</span><br>
     <span style="font-family: Zfull-BIG5; font-size: 17px">17: test llll 123</span><br>
     <span style="font-family: Zfull-BIG5; font-size: 18px">18: test llll 123</span><br>
     <span style="font-family: Zfull-BIG5; font-size: 19px">19: test llll 123</span><br>
     <span style="font-family: Zfull-BIG5; font-size: 20px">20: test llll 123</span><br>
     <span style="font-family: Zfull-BIG5; font-size: 21px">21: test llll 123</span><br>
     <span style="font-family: Zfull-BIG5; font-size: 22px">22: test llll 123</span><br>
     <span style="font-family: Zfull-BIG5; font-size: 23px">23: test llll 123</span><br>
     <span style="font-family: Zfull-BIG5; font-size: 24px">24: test llll 123</span><br>
     <span style="font-family: Zfull-BIG5; font-size: 25px">25: test llll 123</span>
   </body>
</html>

网络字体显示异常 #

使用@font-face加载在线平台提供的网络字体时，Chrome中字体显示完全异常：

<html style="margin:0; padding:0; height:525px; width:525px;">
   <meta charset="utf-8" />
   <header>
      <style>* { -webkit-font-smoothing: antialiased; }</style>
      <style>@font-face {
    font-family: "Zfull-BIG5";
    src: url("https://db.onlinewebfonts.com/t/cfdb2532f2c9299da3c61fa9c953583d.eot");
    src: url("https://db.onlinewebfonts.com/t/cfdb2532f2c9299da3c61fa9c953583d.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/cfdb2532f2c9299da3c61fa9c953583d.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/cfdb2532f2c9299da3c61fa9c953583d.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/cfdb2532f2c9299da3c61fa9c953583d.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/cfdb2532f2c9299da3c61fa9c953583d.svg#Zfull-BIG5")format("svg");
}</style>
   </header>
   <body style="margin:0; padding:0; height:525px; width:525px;">
     <span style="font-family: Zfull-BIG5; font-size: 10px">10: test llll 123</span><br>
     <span style="font-family: Zfull-BIG5; font-size: 11px">11: test llll 123</span><br>
     <span style="font-family: Zfull-BIG5; font-size: 12px">12: test llll 123</span><br>
     <span style="font-family: Zfull-BIG5; font-size: 13px">13: test llll 123</span><br>
     <span style="font-family: Zfull-BIG5; font-size: 14px">14: test llll 123</span><br>
     <span style="font-family: Zfull-BIG5; font-size: 15px">15: test llll 123</span><br>
     <span style="font-family: Zfull-BIG5; font-size: 16px">16: test llll 123</span><br>
     <span style="font-family: Zfull-BIG5; font-size: 17px">17: test llll 123</span><br>
     <span style="font-family: Zfull-BIG5; font-size: 18px">18: test llll 123</span><br>
     <span style="font-family: Zfull-BIG5; font-size: 19px">19: test llll 123</span><br>
     <span style="font-family: Zfull-BIG5; font-size: 20px">20: test llll 123</span><br>
     <span style="font-family: Zfull-BIG5; font-size: 21px">21: test llll 123</span><br>
     <span style="font-family: Zfull-BIG5; font-size: 22px">22: test llll 123</span><br>
     <span style="font-family: Zfull-BIG5; font-size: 23px">23: test llll 123</span><br>
     <span style="font-family: Zfull-BIG5; font-size: 24px">24: test llll 123</span><br>
     <span style="font-family: Zfull-BIG5; font-size: 25px">25: test llll 123</span>
   </body>
</html>

单独引入TTF格式字体文件时，问题依然存在。

解决方法 #

1. 替换字体文件 #

在线平台转换的字体可能存在字形损坏，建议：

• 从官方渠道获取原始Zfull-BIG5字体文件
• 使用专业工具（如Font Squirrel Webfont Generator）重新转换为woff2/woff格式，确保保留所有字形变体

2. 配置字体特性 #

该字体包含字形变体，需在@font-face中明确启用对应特性：

@font-face {
    font-family: "Zfull-BIG5";
    src: url("path/to/Zfull-BIG5.woff2") format("woff2"),
         url("path/to/Zfull-BIG5.ttf") format("truetype");
    /* 根据字体实际特性调整，例如启用连字、替代字形 */
    font-feature-settings: "liga" 1, "calt" 1, "dlig" 1;
    font-display: swap; /* 避免页面加载时字体闪烁 */
}

3. 调整Chrome字体设置 #

• 在Chrome地址栏输入chrome://flags/#enable-font-antialiasing，将该项设置为Disabled后重启浏览器
• 关闭chrome://flags/#font-cache-invalidation等实验性字体优化选项

4. 检查跨域访问 #

如果字体托管在第三方服务器，需确保服务器返回Access-Control-Allow-Origin响应头，允许你的域名访问字体资源。

5. 简化@font-face规则 #

移除不必要的字体格式（如eot、svg），优先使用woff2格式：

@font-face {
    font-family: "Zfull-BIG5";
    src: url("path/to/Zfull-BIG5.woff2") format("woff2");
    fallback: local("Zfull-BIG5"); /* 优先使用本地安装的字体 */
}

内容的提问来源于stack exchange，提问作者Michael Eckhart-Wöllkart