2

我一直在解决各种浏览器中的 Webfonts 问题，并且一直遵循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，您会看到他们推荐的 data-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');    
}

所以我对此有很多疑问：

  • 当然，如果我使用针对 TTF 和 WOFF 格式的 Base64 编码将字体两次嵌入到样式表中，我将会使我的样式表膨胀到可能嵌入的优势被样式表中的数据加倍或更多所抵消的地步？
  • 为什么在示例中是 src: 在每个 url(data:...) 之前没有使用。这是笔误，还是故意的？
  • 如果我嵌入字体，所有浏览器都会使用嵌入式版本而不是 EOT 版本，从而节省服务器往返行程吗？哪些浏览器会使用嵌入的 TTF 或 WOFF 文件？
  • 为什么我们不嵌入 EOT 版本？

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

马特

4

0 回答 0