Network-Font with glyph variations is displayed wrong in chrome

32 views Asked by At

I have a very strange phanomen. First, I used this HTML code to display a font for testing:

<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>

The font "Zfull-BIG5" is installed on my computer (Windows 11). The output looks fine: enter image description here

Then i tried to use network ressources:

<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>

The output is now completly different:

enter image description here

I also tried only using the ttf in the font-face, with the same not working result. It seems that the browser can not display the font directly if it is loaded from the web. You can find the font-face generated code here: https://www.onlinewebfonts.com/download/cfdb2532f2c9299da3c61fa9c953583d

0

There are 0 answers