css3 – 截至2012年底实施@ font-face

我已经花了几个晚上调查用现代浏览器实现@ font-face的最佳方法.我是一名全职的网络/系统开发人员,具有作为平面设计师的背景我发现网页设计的机会和可能性变得越来越有趣.所以,我做了一些测试,并想听听是否有人有任何建议,任何更好的想法或输入.我的测试场景看起来像这样.

我用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.

<FilesMatch "\.(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'myFont';
        src: url('fonts/myFont.svg') format('svg');
    }
}