字体的英文名与浏览器CSS font-family 字体加载机制不兼容

[experdot]

字体的英文名是“Smiley Sans Oblique”，安装到本地计算机。

假如在网页的CSS中像下面两种方式引用，可以正常加载本地的得意黑字体。

element.style {
    font-family: "Smiley Sans";
}
element.style {
    font-family: "Smiley Sans Regular";
}

但是，下面的写法不能正常加载

element.style {
    font-family: "Smiley Sans Oblique";
}

猜测 Oblique 后缀是浏览器的关键字，触发了浏览器的后缀匹配机制，这也解释了为什么“Smiley Sans Regular”也可以正常加载。即浏览器先试图找“Smiley Sans”的字体，然后再匹配“Oblique”模式，但是得意黑不支持“Oblique”模式。

而在 https://github.com/atelier-anchor/smiley-sans/blob/main/src/SmileySans.ttx 中，可以发现如下定义：

    <namerecord nameID="2" platformID="1" platEncID="0" langID="0x0" unicode="True">
      Regular
    </namerecord>

这是不是意味着 “Smiley Sans Oblique” 实质是一种 Regular 字体？

这造成一些困惑，因为一些代码生成器会自动读取字体FontFamily，然后生成CSS代码，代码中使用了“Smiley Sans Oblique”，结果导致浏览器不能正常加载。

[stone-zeng]

注意这个是和浏览器相关的：

Chrome

Edge

Firefox

Safari

[experdot]

@stone-zeng 我的结果与你不太一致。

1. Windows10 操作系统，安装 得意黑.otf，版本V1.1.1
2. 在 Edge、Chrome 中访问 index.html
   index.zip

Edge

Chrome

[stone-zeng]

毕竟不同系统的字体查找机制也不一样（