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

前端之家收集整理的这篇文章主要介绍了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.

解决方法

@ font-face代码

您可以添加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?显示有关字体加载失败的文本图片.这真的只适用于网站标题和图标,否则它是一个非常糟糕的工作,不利于搜索引擎优化和糟糕的用户体验.

See @font-face support.

此外,如果您的@ 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');
    }
}
原文链接:https://www.f2er.com/css/215899.html

猜你在找的CSS相关文章