Fonts 嵌入式字体与外部资源

我一直在解决各种浏览器中的Webfonts问题，并一直遵循最新推荐的解决方案

然而，当我使用CDN并从另一个域提供CSS文件时，我很快发现IE或Firefox都不会从CDN加载WebFonts，从而出现错误，例如

@font-face未能通过跨源请求

。在我的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来提供字体文件，而且我对性能要求很高。由于我似乎无法回避跨源域名的问题，我一直在考虑嵌入字体。如果您看一下，您会发现他们推荐一种数据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编码在样式表中嵌入两次字体，我会使我的样式表膨胀到这样一种程度：嵌入的优势可能会被样式表中的数据加倍或更多而抵消
• 示例中为什么在每个url（数据：…）之前不使用src:。这是打字错误还是故意的
• 如果我嵌入字体，所有浏览器会使用嵌入版本而不是EOT版本，从而节省服务器往返时间吗？哪些浏览器将使用嵌入的TTF或WOFF文件
• 为什么我们不嵌入EOT版本

我很感激这篇文章有很多内容，但我希望这篇文章能对其他面临同样困境的人有所帮助

---

Matt

感谢FontSpring链接如果您收到

失败的跨源请求

，这可能意味着您的CDN存在配置问题。允许访问控制允许来源设置正确吗？MaxCDN为此发表了一篇文章，为我解决了这个问题：感谢FontSpring链接如果您收到

失败的跨来源请求

，这可能意味着您的CDN存在配置问题。是否正确设置了allow Access Control allow Origin？MaxCDN为此发表了一篇文章，为我解决了这个问题：