Question

以下是@ font-face CSS规则的示例：

@font-face {
  font-family: 'DroidSerifBoldItalic';
  font-weight: normal;
  font-style: normal;
  src: url('DroidSerif-BoldItalic-webfont.eot');
  src: url('DroidSerif-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
       local('Droid Serif Bold Italic'), local('DroidSerif-BoldItalic'),
       url('DroidSerif-BoldItalic-webfont.woff') format('woff'),
       url('DroidSerif-BoldItalic-webfont.ttf') format('truetype');
}

你不觉得，以下@ font-face CSS规则更好吗？（如您所见，浏览器，在这种情况下甚至IE，可以在下载之前首先检查用户计算机上的字体是否可用。）

@font-face {
  font-family: 'DroidSerifBoldItalic';
  font-weight: normal;
  font-style: normal;
  src: local('Droid Serif Bold Italic'), local('DroidSerif-BoldItalic');
  src: url('DroidSerif-BoldItalic-webfont.eot');
  src: url('DroidSerif-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
       url('DroidSerif-BoldItalic-webfont.woff') format('woff'),
       url('DroidSerif-BoldItalic-webfont.ttf') format('truetype');
}

这里有没有陷阱？如果没有，为什么不是每个人都使用后者？

Answer 1

根据我对@ font-face的了解，使用local的主要担心是在某人的桌面上不会将字体命名为相同。你在那里放弃了控制权，如果你错了，它就会失败。你确实提出了一个有趣的问题，我并不是说你错了。您可以详细了解here和here。

<强>附录

通常，它在IE中用作a mask to prevent unwanted http requests。

顺序很重要因为IE（至少在IE8之前）不支持local描述符，并且在EOT字体格式之后放置local描述符会阻止旧版本的Internet Explorer下载其他字体格式（在src声明中），因为它们不受支持，并且无论如何都不会被使用。

@BoltClock评论的是真的。这就是为什么我们使用两个local定义 - local('Droid Serif Bold Italic'), local('DroidSerif-BoldItalic'),的原因。第一个是字体的正常名称（除了Safari之外的所有浏览器都可以识别），后者是Safari所需的字体的PostScript名称（至少在Mac / OS X系统上）。

为了避免两个不同字体（主要在两个不同的操作系统上）具有相同名称的问题，有些只使用local('☺')。

在@ font-face CSS规则中，我们可以为'local'定义单独的'src'声明吗？

1 个答案: