Question

细分：

@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; }

Answer 1

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

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

Answer 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属性的末尾添加一个分号。

font-family中的url描述符

2 个答案: