我花了几个晚上来研究用当今现代浏览器实现@font-face 的最佳方法。我是一名全职网络/系统开发人员，具有平面设计师背景，我发现网页设计的机会和可能性变得越来越有趣。所以，我做了一些测试，想听听是否有人对此有建议、更好的想法或意见。我的测试场景是这样的。
我测试了很多不同的在线工具和应用程序，但最后我把它归结为一个在线服务和一个应用程序。
- FontSquirrel，在线工具 - 免费。http://www.fontsquirrel.com/fontface/generator
- FontXChange，适用于 mac/win 的应用程序 - 99 美元。http://fontgear.net/fontxchange.html
我使用了 Mac 随附的字体 Tamil Sangam MN 和 Tamil Sangam MN Bold，它们都是开放式字体 .otf。
- TamilSangamMN.otf - 290 KB
- TamilSangamMNBold.otf - 271 KB
调查转化规模
字体松鼠
这是一个很好的在线工具，非常好。有几种不同的模式，我使用了 Basic 和 Optimal。我的 .otf 文件的输出是 svg、ttf、eot 和 woff。
基本的
常规的
- TamilSangamMN.svg 233 KB
- TamilSangamMN.ttf 71 KB
- TamilSangamMN.eot 25 KB
- TamilSangamMN.woff 30 KB
- 总计：359 KB
大胆的
- TamilSangamMNbold.svg 225 KB
- TamilSangamMNbold.ttf 69 KB
- TamilSangamMNbold.eot 25 KB
- TamilSangamMNbold.woff 30 KB
- 总计：349 KB
最佳
我注意到最佳字体的第一件事是它们比基本变体小得多~260 KB！
常规的
- TamilSangamMN.svg 33 KB
- TamilSangamMN.ttf 25 KB
- TamilSangamMN.eot 15 KB
- TamilSangamMN.woff 17 KB
- 总计：90 KB
大胆的
- TamilSangamMNbold.svg 33 KB
- TamilSangamMNbold.ttf 25 KB
- TamilSangamMNbold.eot 15 KB
- TamilSangamMNbold.woff 17 KB
- 总计：90 KB
字体转换
这个工具可以做的不仅仅是为网络处理字体。它可以相互转换多种格式；比如opentype、true type、web fonts、post script等等。结果是总体质量非常高，文件非常大，几乎是 FontSquirrels Basic 版本的两倍，是 FontSquirrels Optimal 版本的 7 倍以上。
常规的
- TamilSangamMN.svg 480 KB
- TamilSangamMN.ttf 72 KB
- TamilSangamMN.eot 72 KB
- TamilSangamMN.woff 80 KB
- 总计：704 KB
大胆的
- TamilSangamMNbold.svg 463 KB
- TamilSangamMNbold.ttf 69 KB
- TamilSangamMNbold.eot 70 KB
- TamilSangamMNbold.woff 80 KB
- 总计：682 KB
设置 CSS
一开始我有点困惑，字体列表中的实际顺序很重要。然后我发现有些人采用了它认为兼容的第一种格式，而不是坚持最佳的格式——这很糟糕。经过一些实验，我发现这是格式化 css 的最佳方式（注意文件类型的顺序 | 重要！）。
@font-face {
font-family: 'TamilSangam';
src: url('.eot');
src: url('.svg') format('svg'),
url('.eot?#iefix') format('embedded-opentype'),
url('.woff') format('woff'),
url('.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
我的测试结果
常规字体
我确实用 * 标记了最佳版本
火狐 MAC (15.0.1)
- FontSquirrel Optimal：渲染得有点胖
- FontSquirrel Basic：渲染有点胖
- FontXChange 4.0：渲染有点胖，但字距调整优于 FontSquirrel 版本 *
火狐 Windows (15.0.1)
- FontSquirrel Optimal：渲染得非常好
- FontSquirrel Basic：字体变得锯齿状/不连贯
- FontXChange 4.0：渲染非常好 *
Safari Mac (6.0)
- FontSquirrel Optimal：完美渲染
- FontSquirrel Basic：完美渲染
- FontXChange 4.0：完美渲染 *
铬 Mac (21.0)
- FontSquirrel Optimal：有点胖
- FontSquirrel Basic：有点胖
- FontXChange 4.0：完美渲染 *
铬窗口 (21.0)
- FontSquirrel Optimal：完美渲染
- FontSquirrel Basic：完美渲染
- FontXChange 4.0：完美渲染 *
互联网浏览器 (9.0)
- FontSquirrel Optimal：完美渲染 *
- FontSquirrel Basic：完美渲染
- FontXChange 4.0：字体变得锯齿状/不连贯
粗体字
火狐 MAC (15.0.1)
- FontSquirrel Optimal：渲染得非常肥大 *
- FontSquirrel Basic：渲染得非常胖
- FontXChange 4.0：渲染非常胖，但字距调整更好（我想为 mac 选择这个，但由于 windows 版本的 firefox 在这里不兼容，所以必须去）
火狐 Windows (15.0.1)
- FontSquirrel Optimal：渲染正常，抗锯齿效果不是很好*
- FontSquirrel Basic：字体变得锯齿状/不连贯
- FontXChange 4.0：字体有点扭曲/锯齿状
Safari Mac (6.0)
- FontSquirrel Optimal：完美渲染 *
- FontSquirrel Basic：完美渲染
- FontXChange 4.0：渲染脂肪
铬 Mac (21.0)
- FontSquirrel Optimal：完美渲染 *
- FontSquirrel Basic：良好的渲染，几个百分比的脂肪
- FontXChange 4.0：渲染脂肪
铬窗口 (21.0)
- FontSquirrel Optimal：完美渲染 *
- FontSquirrel Basic：完美渲染
- FontXChange 4.0：渲染得很胖
互联网浏览器 (9.0)
- FontSquirrel Optimal：完美渲染 *
- FontSquirrel Basic：完美渲染
- FontXChange 4.0：字体变得锯齿状/不连贯
最终实现
我通常按以下模式组织我的网络字体，<webfonts> / <conversion source> / <conversion method> / <fonts>
/* Regular */
@font-face {
font-family: 'TamilSangam';
src: url('webfonts/fontsquirrel/optimal/tamil_sangam_mn.eot');
src: url('webfonts/fontxchange/TamilSangamMN.svg#TamilSangamMN') format('svg'),
url('webfonts/fontsquirrel/optimal/tamil_sangam_mn.eot?#iefix') format('embedded-opentype'),
url('webfonts/fontxchange/TamilSangamMN.woff') format('woff'),
url('webfonts/fontxchange/TamilSangamMN.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/* Bold */
@font-face {
font-family: 'TamilSangam';
src: url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.eot');
src: url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.svg#tamil_sangam_mnbold') format('svg'),
url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.eot?#iefix') format('embedded-opentype'),
url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.woff') format('woff'),
url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
结果的图形概述（全尺寸在http://i.stack.imgur.com/atb98.png）
结论和任务
没有一种工具可以提供在所有浏览器中的 Mac 和 Windows 上呈现良好的字体。您必须对每种字体进行试验和测试。上面发布的方法只是一个简单的方法和建议如何测试和试验@font-face's。
您认为我的方法或实现有什么可以改变的吗？有没有我错过的应用程序或服务？
万事如意/T