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

Question

在CSS中使用@font-face时，它会记录每个主要浏览器中哪些字体类型有效，以及如果缺少一个或多个字体类型，它们会给予不同字体类型的优先级？我试过谷歌答案了。

@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：...
• 移动Chrome：...
• FireFox：......
• Safari：...
• 移动Safari：...

Answer 1

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