2

这是一个示例 @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');
}

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

4

1 回答 1

3

根据我对@font-face 的了解，使用本地的主要担心是字体在某人的桌面上不会被命名为相同的名称。你在那里放弃控制权，如果你错了，它就会失败。不过，您确实提出了一个有趣的问题，我并不是说您错了。您可以在此处和此处阅读更多相关信息。

附录

通常，它用作掩码以防止IE 中不需要的 http 请求。

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

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

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

于 2012-05-01T02:07:56.393 回答