Question

我一直在各种浏览器中解决Webfonts的问题，并且一直关注recommendations of FontSpring，这似乎是最新推荐的解决方案。

然而，当我使用CDN并从不同的域提供我的CSS文件时，我很快发现IE或Firefox都不会从CDN加载WebFonts，从而导致@font-face failed cross-origin request等错误。在我的CSS中，我有类似以下内容：

@font-face {
    font-family: 'ClarendonRoman';
    src: url('/assets/fonts/clarendon-bt-webfont.eot?#iefix') format('embedded-opentype'),
       url('/assets/fonts/clarendon-bt-webfont.woff') format('woff'),
       url('/assets/fonts/clarendon-bt-webfont.ttf')  format('truetype'),
       url('/assets/fonts/clarendon-bt-webfont.svg#svgFontName') format('svg');
    font-weight: normal;
    font-style: normal;
}

正如您所看到的，字体的路径是相对于CSS的，因此字体不会从CDN加载。我所拥有的是网站域中的硬编码到我的样式表中，以便字体从同一来源加载。所以我的新样式表看起来像这样：

@font-face {
    font-family: 'ClarendonRoman';
    src: url('//mydomain.com/assets/fonts/clarendon-bt-webfont.eot?#iefix') format('embedded-opentype'),
       url('//mydomain.com/assets/fonts/clarendon-bt-webfont.woff') format('woff'),
       url('//mydomain.com/assets/fonts/clarendon-bt-webfont.ttf')  format('truetype'),
       url('//mydomain.com/assets/fonts/clarendon-bt-webfont.svg#svgFontName') format('svg');
    font-weight: normal;
    font-style: normal;
}

现在使用嵌入式域，一切都可以在HTTPS和HTTP流量中完美运行。但是，我并不完全高兴，因为我不再使用我的CDN来提供字体文件，而且我是性能的坚持者。由于我似乎无法绕过跨域域问题，我一直在考虑嵌入字体。如果您查看http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax，您会看到他们推荐使用数据uri嵌入格式，如下所示：

@font-face {
  font-family: 'MyFontFamily';
  src: url('myfont-webfont.eot?') format('embedded-opentype');
  }

@font-face {
  font-family: 'MyFontFamily';
  url(data:font/truetype;charset=utf-8;base64,BASE64_ENCODED_DATA_HERE)  format('truetype'),
  url(data:font/woff;charset=utf-8;base64,BASE64_ENCODED_DATA_HERE)  format('woff'),
  url('myfont-webfont.svg#svgFontName') format('svg');    
}

所以我对此有很多疑问：

当然，如果我使用Base64编码为TTF和WOFF格式在我的样式表中嵌入两次字体，我将膨胀我的样式表，以至于可能嵌入的优势被我的数据加倍或更多所取代样式表？
为什么在示例中是src：在每个url之前没有使用（data：...）。这是一个错字，还是故意的？
如果我嵌入字体，是否所有浏览器都使用嵌入式版本而不是EOT版本，从而节省了服务器往返？哪些浏览器将使用嵌入式TTF或WOFF文件？
为什么我们没有嵌入EOT版本？

我很欣赏这篇文章中有相当多的内容，但我希望这篇文章对那些面临同样困境的人有用。

马特

嵌入字体与外部资源

0 个答案: