自从使用 Cufon 后带来的问题，我不再使用外部字体资源，但最近，我一直在寻找替代方法来加载字体，看看是否有更好的方法；更好的方法总是会突然出现。
有很多新方法，似乎每种方法都有变化；我应该使用 typekit？还是使用 Google Web Fonts (带js或css)？我应该继续使用本地加载字体(例如 fontsquirrel.com 生成的方法)吗？
下面我将列出似乎最受欢迎的方法以及一些测试，但是真的值得转向Web字体吗？它似乎会带来更高的资源负载(Http请求)，并且具有较少的文件格式类型（兼容性较差）等。但看起来，在大多数情况下，文件是异步和高效加载的。
- 这只是情况和需求的问题吗？如果是，它们是什么？
- 这些方法之间有明显的区别吗？
- 是否存在我未列出的更好的方法?
- 性能、外观、依赖关系和兼容性的优缺点是什么？
我真的在寻找最佳实践，性能是很重要的，但可扩展性和易用性也很重要。更不用说外观和感觉了。
Google CSS
- 只使用外部样式表
- 只使用最小兼容文件类型
- 可以使用
@import或<link>，或将样式表的内容(@font-face)直接放入您自己的样式表中。
测试结果
78ms load of html 36ms load of cssGoogle JS Method
- 使用
webfont.js加载样式表- 仅使用最小的兼容文件类型
- 将
:root元素附加到类- 将脚本添加到头部。
测试结果
171ms load of html 176ms load of js 32ms load of cssTypekit方法
- 添加具有类别的
:root元素。- 可以使用
*.js片段或外部加载的*.js文件。- 使用
data:font/opentype替代字体文件。- 将脚本添加到头部。
- 将嵌入式CSS添加到头部。
- 将外部样式表添加到头部。
您可以轻松地从typekit.com中添加/删除/调整字体和目标选择器。
测试结果
169ms load of html
213ms load of js
31ms load of css
3ms load of data:font/
……和Font Squirrel方法
@font-face{
font-weight:400;
font-style:normal;
font-family:open_sanslight;
src:url(../font/opensans-light-webfont.eot);
src:url(../font/opensans-light-webfont.eot?#iefix) format(embedded-opentype),
url(../font/opensans-light-webfont.woff) format(woff),
url(../font/opensans-light-webfont.ttf) format(truetype),
url(../font/opensans-light-webfont.svg#open_sanslight) format(svg)
}
…或使用数据:font方法…
@font-face {
font-family: 'open_sanslight';
src: url('opensans-light-webfont-f.eot');
}
@font-face {
font-family: 'open_sanslight';
src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAF4sABMAAAAArXQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABqAAAABwAAAAcZLn0KkqwK44Jq866WBSpzpsNY2IyGAhoJFBbYjuxmyns5sNa4NwldcJ7eh3Uy5gQkURIlqWzONe3HcLsDX1x/+jifDXvbzgTBjopZElndil3hJkERJkmRJkVRJk3TJkEzJkmzOc4HLXOEOF7nEX/*thisisnotafullencodingjustanexample*/bZwUnK4yS3JlTx2Sr4USKEUSbHVX9fcGNBs4fqgw+GoNHU7lKr36Eqn0lCWt6pHFpWaUlc6lS6loSxRlirLlP/uuU01dVfT7L6gPxyqraluCpgj3WtqeC1V4VBDW2N4K1r1esw/IupKp9L1FwlqnuIAAAB42j3NvQ7BUBjG8R5tTz/0u2UjNTTESYQbMGmXLiISbeI6zBYjbuWtye7CeMJxtuf3LP8ne1+IXbWa7G3TMXZru4qLZkJRW1O2wzi3I+Li2Gik5yXpYkNGXj70YU98YQLGHxwwXxIWwO8SNmAdJBzAXku4gFNI9AF38QMjTwZ9vN6yJzq9OoEB6I8VQzDYK0ZguFKMwWiumIDxTDEFk6liBqaF4gDMFFvKxAfOxFUGAAABUxSL9gAA) format('woff'),
url('opensans-light-webfont-f.ttf') format('truetype'),
url('opensans-light-webfont-f.svg#open_sanslight') format('svg');
font-weight: normal;
font-style: normal;
}
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet'>。 - lefoy@font-face声明，或许你可以找到有用的信息。http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/ - lefoy