javascript - 如果无论如何它必须调用多个文件，字体是否值得？

Question

因此，跨浏览器 @font-face 解决方案似乎需要多个 HTTP 请求。这是我能找到的最好的代码：

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('Graublau Web Regular'), local('Graublau Web'),
    url("GraublauWeb.woff") format("woff"),
    url("GraublauWeb.otf") format("opentype"),
    url("GraublauWeb.svg#grablau") format("svg");
}

就此而言，我最好只使用 Javascript 还是会同样减慢加载时间？我的加载速度（以及我的首要任务是 SEO）的最终解决方案是使用图像吗？

谢谢！

Answer 1

浏览器只会根据该规则进行一次连接和一次下载。该规则并没有告诉浏览器下载所有指定的字体——这没有任何意义。相反，它告诉浏览器下载它找到的第一个指定字体。

该行：

src: url('GraublauWeb.eot');

位于单独的规则中，因为该行目标 (IE) 的浏览器不支持备用字体列表。这利用了浏览器将忽略他们不理解的 CSS 规则这一事实。