我用ALOT测试了不同的在线工具和应用程序,但最后我把它归结为一个在线服务和一个应用程序.
> 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
调查转换大小
FontSquirrel
这是一个很好的在线工具,非常好.有几种不同的模式,我使用了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
FontXChange
这个工具可以做的不仅仅是为网络杂耍字体.它可以在彼此之间转换多种格式;喜欢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;
}
我的测试结果
常规字体
我用*标记了最好的版本
Firefox MAC(15.0.1)
> FontSquirrel Optimal：渲染有点胖
> FontSquirrel Basic：渲染有点胖
> FontXChange 4.0：渲染有点胖,但字距更好比FontSquirrel版*
Firefox Windows(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 Windows(21.0)
> FontSquirrel Optimal：完美渲染
> FontSquirrel Basic：完美渲染
> FontXChange 4.0：完美渲染*
Internet Explorer(9.0)
> FontSquirrel Optimal：完美渲染*
> FontSquirrel Basic：完美渲染
> FontXChange 4.0：字体变得锯齿状/波动
大胆的字体
Firefox MAC(15.0.1)
> FontSquirrel Optimal：呈现非常胖*
> FontSquirrel Basic：渲染非常胖
> FontXChange 4.0：渲染非常胖,但更好的字距(我想为mac选择这个,但因为Firefox的windows版本不兼容,所以必须去)
Firefox Windows(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 Windows(21.0)
> FontSquirrel Optimal：完美渲染*
> FontSquirrel Basic：完美渲染
> FontXChange 4.0：渲染非常胖
Internet Explorer(9.0)
> FontSquirrel Optimal：完美渲染*
> FontSquirrel Basic：完美渲染
> FontXChange 4.0：字体变得锯齿状/波动
最后的实施
我通常按以下模式组织我的webfonts,< webfonts> /<转换来源> /<转换方法> /< 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的.
您认为我可以在我的方法或实施中改变什么,是否有任何我错过的应用程序或服务？
一切顺利/ T.
解决方法
您可以添加src：local(‘ò？’),它会查找具有此名称的本地字体,如果它们恰好与您的自定义字体同名,则强制浏览器忽略本地字体.您也可以反过来限制下载自定义字体.看移动支持
我通常会在标准.eot src之后看第二个#iefix行,虽然我不能说我曾经需要它,也不知道是否需要特定的定位(除了首先列出的.).
对字体的额外控制
如果你想在字体无法加载的情况下寻找更多的字体控制,或者在IE中处理FOUC,我有一个jQuery插件,它可以让你在加载时隐藏字体,并允许你改变字体大小失败,因此您的后备字体不会破坏您的布局. How to know if a font (@font-face) has already been loaded?
IE6-8的bug
此外,IE6-8可能与某些字体的.eot文件有问题.这可以通过(full guide here)修复：
>在线转换新的.eot文件.如果这不起作用,则问题是文件属性本身.
>使用FontForge编辑字体文件的名称属性,然后重新保存并重新转换.
CORS
似乎只涉及IE和FF.所有其他浏览器(仅测试的最新版本)没有问题.
CORS是字体的常见问题,当您从其他域或主机名加载字体时会出现这种问题.这包括使用www指定您的网站.需要相对引用@ font-face代码,CSS文件也是如此.如果定义< base>,您也会遇到问题.在你的HTML中标记.如果这不可能,或者您不想担心CORS,那么您需要将以下代码放在字体目录中的.htaccess文件中：
<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
MIME类型
有关字体服务的404问题可能是由错误的MIME定义引起的,请参阅此处：Mime type for WOFF fonts?
移动支持
移动支持非常糟糕. Android直到4.0才支持它,而据我所知,Windows Mobile根本不支持它.我正在调查任何解决方案或解决方案.到目前为止,我最好使用How to know if a font (@font-face) has already been loaded?来显示有关字体加载失败的文本图片.这真的只适用于网站标题和图标,否则它是一个非常糟糕的工作,不利于搜索引擎优化和糟糕的用户体验.
此外,如果您的@ font-face使用local(),它也会用作IE的修复程序,Android 2.2 – x.x.x版本将失败.如果您想覆盖所有基础,可能需要多个样式表.在这里查看更多：https://stackoverflow.com/a/4520467/1455709
SVG和Chrome
如果您在网址中包含#fontName,Chrome将不会使用SVG字体.它还将在SVG之前使用WOFF – 并且不能很好地渲染它.这可能就是为什么每个人都想要在Chrome中蹩脚的字体渲染…为了解决这个问题,需要额外的@ font-face声明：
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'myFont';
src: url('fonts/myFont.svg') format('svg');
}
}
