我花了几个晚上研究在当今的现代浏览器中实现 @font-face 的最佳方法。我是一名全职网络/系统开发人员，具有图形设计师的背景，我发现网页设计的机会和可能性变得越来越有趣。因此，我做了一些测试，想听听是否有人对此有建议、更好的想法或意见。我的测试场景如下所示。
我测试了很多不同的在线工具和应用程序，但最终我将其归结为一项在线服务和一个应用程序。
- FontSquirrel，在线工具 - 免费。http://www.fontsquirrel.com/fontface/generator http://www.fontsquirrel.com/fontface/generator
- FontXChange，适用于 mac/win 的应用程序 - 99 美元。http://fontgear.net/fontxchange.html http://fontgear.net/fontxchange.html
我使用了 Mac 附带的字体 Tamil Sangam MN 和 Tamil Sangam MN Bold，两者都是开放类型 .otf。
- 泰米尔语SangamMN.otf - 290 KB
- 泰米尔语SangamMNBold.otf - 271 KB
研究转化规模
松鼠字体
这是一个很好的在线工具，非常好。有几种不同的模式，我使用了基本模式和最佳模式。我的 .otf 文件的输出是 svg、ttf、eot 和 woff。
Basic
Regular
- 泰米尔语SangamMN.svg233 KB
- 泰米尔语 SangamMN.ttf71 KB
- 泰米尔语 SangamMN.eot25 KB
- 泰米尔语SangamMN.woff30 KB
- 总计：359 KB
Bold
- 泰米尔语SangamMNbold.svg225 KB
- 泰米尔语SangamMNbold.ttf69 KB
- 泰米尔语SangamMNbold.eot25 KB
- 泰米尔语SangamMNbold.woff30 KB
- 总计：349 KB
Optimal
我注意到的第一件事是，最佳字体比基本变体小得多 ~ 260 KB！
Regular
- 泰米尔语SangamMN.svg33 KB
- 泰米尔语 SangamMN.ttf25 KB
- 泰米尔语 SangamMN.eot15 KB
- 泰米尔语SangamMN.woff17 KB
- 总计：90 KB
Bold
- 泰米尔语SangamMNbold.svg33 KB
- 泰米尔语SangamMNbold.ttf25 KB
- 泰米尔语SangamMNbold.eot15 KB
- 泰米尔语SangamMNbold.woff17 KB
- 总计：90 KB
字体X更改
这个工具的用途远不止是调整网络字体。它可以在多种格式之间相互转换；比如 opentype、true type、web 字体、post script 等。结果总体上质量非常高，文件非常大，几乎是 FontSquirrels Basic 版本大小的两倍，是 FontSquirrels Optimal 版本的 7 倍以上。
Regular
- 泰米尔语SangamMN.svg480 KB
- 泰米尔语 SangamMN.ttf72 KB
- 泰米尔语 SangamMN.eot72 KB
- 泰米尔语SangamMN.woff80 KB
- 总计：704 KB
Bold
- 泰米尔语SangamMNbold.svg463 KB
- 泰米尔语SangamMNbold.ttf69 KB
- 泰米尔语SangamMNbold.eot70 KB
- 泰米尔语SangamMNbold.woff80 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 版本更好 *
火狐浏览器 (15.0.1)
- FontSquirrel Optimal：渲染效果非常好
- FontSquirrel Basic：字体出现锯齿状/不稳定
- FontXChange 4.0：渲染效果非常好 *
Safari Mac (6.0)
- FontSquirrel Optimal：完美渲染
- FontSquirrel Basic：完美渲染
- FontXChange 4.0：完美渲染 *
Chrome Mac (21.0)
- FontSquirrel Optimal：有点胖
- FontSquirrel Basic：有点胖
- FontXChange 4.0：完美渲染 *
Chrome 窗口 (21.0)
- FontSquirrel Optimal：完美渲染
- FontSquirrel Basic：完美渲染
- FontXChange 4.0：完美渲染 *
互联网浏览器 (9.0)
- FontSquirrel 最佳：完美渲染 *
- FontSquirrel Basic：完美渲染
- FontXChange 4.0：字体出现锯齿/不稳定
粗体字体
火狐MAC (15.0.1)
- FontSquirrel 最佳：渲染得很胖 *
- FontSquirrel Basic：渲染得很胖
- FontXChange 4.0：渲染得很厚，但字距调整更好（我想为 Mac 选择这个，但由于 Windows 版本的 Firefox 不兼容，因此必须选择）
火狐浏览器 (15.0.1)
- FontSquirrel 最佳：渲染正常，抗锯齿效果不是很好 *
- FontSquirrel Basic：字体出现锯齿状/不稳定
- FontXChange 4.0：字体有点扭曲/锯齿状
Safari Mac (6.0)
- FontSquirrel 最佳：完美渲染 *
- FontSquirrel Basic：完美渲染
- FontXChange 4.0：渲染脂肪
Chrome Mac (21.0)
- FontSquirrel 最佳：完美渲染 *
- FontSquirrel Basic：渲染良好，脂肪含量低几个百分点
- FontXChange 4.0：渲染脂肪
Chrome 窗口 (21.0)
- FontSquirrel 最佳：完美渲染 *
- FontSquirrel Basic：完美渲染
- FontXChange 4.0：渲染得很胖
互联网浏览器 (9.0)
- FontSquirrel 最佳：完美渲染 *
- FontSquirrel Basic：完美渲染
- FontXChange 4.0：字体出现锯齿/不稳定
最终实现
我通常按以下模式组织我的网络字体， / / /
/* 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;
}
结果的图形概述（全尺寸位于https://i.stack.imgur.com/atb98.png https://i.stack.imgur.com/atb98.png)
结论和任务
没有一种工具可以提供在 Mac 和 Windows 的所有浏览器中都能呈现良好效果的字体。您必须对每种字体进行试验和测试。上面发布的方法只是如何测试和实验 @font-face 的简单方法和建议。
您认为我可以改变我的方法或实现中的任何内容吗？是否有我错过的任何应用程序或服务？
祝一切顺利/T
