Question

当使用font-face时，我总是想知道是否真的有必要添加关于格式的部分，例如＆＃39;格式（＆＃39; eot＆＃39;）＆＃39;？这似乎是两次声明格式，浪费时间和代码。

有没有人有一个很好的解释为什么这样做？如果可以，就把它留下来？

@font-face {
  font-family: 'Font_name';
  src: url('Font_name.eot?') format('eot'), url('Font_name.woff') format('woff'),  url('Font_name.ttf') format('truetype');
}

Answer 1

根据定义，format(...)部分是声明字体格式的部分。无论url(...)部分包含的是一个URL，一个用于访问资源的字符串。实际上，在没有正确声明信息的情况下，浏览器可能会尝试从用于访问它的URL的最后几个字符中猜测资源的内容类型，但这不是不写正确声明的好借口。

src descriptor的定义说：

外部引用由URL组成，后跟可选提示描述该URL引用的字体资源的格式。该 format提示包含以逗号分隔的格式字符串列表表示众所周知的字体格式。符合条件的用户代理必须跳过如果格式提示仅指示，则下载字体资源不支持或未知的字体格式。如果没有提供格式提示，用户代理应该下载字体资源。

因此，如果省略format(...)部分，浏览器将下载字体资源 - 在执行此操作之前，他们期望分析URL。这可能意味着相当低效，因为浏览器将下载他们无法处理的资源;只有在下载之后，比如EOT字体资源才会查看其内容并看到它们无法处理它，并且必须下载列表中的下一个资源。

Answer 2

eot embedded-opentype 格式主要用于IE浏览器。

因此，这是针对旧版IE浏览器的规则。所有最新浏览器都支持woff字体格式。

如果对网络使用custom font，则为CSS规则。

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

为什么使用'format（'extension_here'）'在font-face中声明格式两次

2 个答案: