字体系列中的 URL 描述符答案

【问题标题】：Url descriptor in font-family字体系列中的 URL 描述符
【发布时间】：2018-10-03 17:13:21
【问题描述】：

细分：

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

从the post，我了解到它的价值是comma-separated 列表的优先级。然后，从the post，我了解到这种url的布局是为了浏览器的兼容性（尤其是ie9）。

但是，我还是不知道semicolon的优先级，所以我很困惑，为什么我从来没有见过下面这样的布局？它是正确的版本吗？

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

【问题讨论】：

仅供参考：../font/jura-demibold.eot 中的 .. 如果在 Web 请求中使用，则没有任何意义。这是向上移动一个目录的文件系统快捷方式，但 URL 不像文件系统那样工作。
@JDB 好的，我只是从一个网站中提取片段。

标签： html css font-face

【解决方案1】：

src 属性的值是一个优先列表，因此每个浏览器都会使用列表中它支持的格式的第一个字体。

https://www.w3.org/TR/css-fonts-3/#src-desc

【讨论】：

优先级对分号列表也有意义吗？
分号只是为了解决 IE8 和更早版本中的错误。他们在 src 属性的解析器中有一个错误，如果 css 中有超过 1 个字体源，则会导致它们变为 404。你可以添加任何东西而不是 ?#iefix 只要你先使用问号

【解决方案2】：

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

这就是我在生产现场的做法和做法。唯一的变化是在您的第一个 src 属性的末尾添加一个分号。

【讨论】：

我想知道为什么第二个版本不正确？
这可能是因为您需要在第二个版本的第 3 行末尾放置一个分号。