使用 CSS @font-face 时，浏览器使用不同类型的顺序是啥？

Posted 2023-03-15

【中文标题】使用 CSS @font-face 时，浏览器使用不同类型的顺序是啥？

【英文标题】：When using CSS @font-face, in what order do browsers use the different types?使用 CSS @font-face 时，浏览器使用不同类型的顺序是什么？

【发布时间】：2014-02-04 21:55:25

【问题描述】：

当在 CSS 中使用@font-face 时，它是否记录了每种主要浏览器中的字体类型以及如果缺少一种或多种字体类型时它们给予不同字体类型的优先级？我试过 Google 答案，但失败了。

@font-face 
    font-family: 'myfont';
    src: url('myfont.eot');
    src: url('myfont.eot?#iefix') format('embedded-opentype'),
    url('myfont.woff') format('woff'),
    url('myfont.ttf') format('truetype'),
    url('myfont.svg#myfont') format('svg');
    font-weight: normal;
    font-style: normal;

希望有类似...的东西

按优先顺序允许的格式：

IE10：TTF、EOT、WOFF IE9：EOT、WOFF IE8：... 铬：... 移动 Chrome：... 火狐：... Safari：... 移动 Safari：...

【参考方案1】：

src 属性的值是一个优先列表，因此每个浏览器都会使用列表中它支持的格式的第一个字体。来自 CSS Fonts Module Level 3 CR，4.3 Font reference: the src descriptor 部分：“它的值是一个优先的、以逗号分隔的外部引用列表或本地安装的字体名称。当需要字体时，用户代理会遍历列出的引用集，使用第一个可以成功激活的引用。包含无效数据的字体或未找到的本地字体将被忽略，用户代理会加载列表中的下一个字体。”