使用 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：...
• 火狐：...
• Safari：...
• 移动 Safari：...

Answer 1

src

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

Answer 2

检查是否可以直接在浏览器中下载字体。如果不是，你的字体网址是错误的。

我今天也遇到了同样的问题。如果您遇到类似的错误，请检查以确保字体文件的路径正确。