截至2012年底实施@ font-face

Question

截至2012年底实施@ font-face

Eri*_*itz 8 fonts css3 webfonts 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,真实类型,网络字体,后期脚本等.结果是整体质量非常高,文件非常大,几乎是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;
}

Run Code Online (Sandbox Code Playgroud)

我的测试结果

常规字体

我用*标记了最好的版本

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;
}

Run Code Online (Sandbox Code Playgroud)

结果的图形概述(完整版在http://i.stack.imgur.com/atb98.png)

在此输入图像描述

结论和任务

没有一个工具可以提供在所有浏览器中在Mac和Windows上呈现良好的字体.您必须对每种字体进行实验和测试.上面发布的方法只是一种简单的方法和建议如何测试和试验@ font-face的.

您认为我可以在我的方法或实施中改变什么,是否有任何错过的应用程序或服务？

一切顺利/ T.

Answer 1

Pat*_*ick 4

@font-face代码

\n\n

您可以添加src: local(\'\xc3\xb2?\'),查找具有此名称的本地字体，强制浏览器忽略本地字体（如果它们碰巧与您的自定义字体同名）。您还可以反过来使用它来限制自定义字体的下载。查看移动支持

\n\n

我通常会?#iefix在标准.eotsrc 之后看到第二行，尽管我不能说我曾经需要它，也不知道是否需要特定的定位（除了.eot首先列出的之外）。

\n\n

对字体的额外控制

\n\n

如果您正在寻找在字体加载失败的情况下对字体进行更多控制，或者在 IE 中处理 FOUC，我有一个 jQuery 插件，它可以让您在加载时隐藏字体，并允许您更改字体size on 失败，这样你的后备字体就不会破坏你的布局。如何知道字体（@font-face）是否已经加载？

\n\n

IE6-8错误

\n\n

此外，IE6-8 的某些字体的 .eot 文件可能存在问题。这可以通过以下任一方法修复（此处有完整指南）：

\n\n

在线转换新的 .eot 文件。如果这不起作用，则问题出在文件属性本身。
使用 FontForge 编辑字体文件的名称属性，然后重新保存并重新转换。

\n\n

跨域资源共享

\n\n

好像只与IE和FF有关。所有其他浏览器（仅测试的最新版本）都没有问题。

\n\n

CORS 是字体的常见问题，当您从其他域或主机名加载字体时会发生这种问题。这包括使用www或不指定您的站点。代码@font-face需要相对引用，CSS文件也是如此。<base>如果在 html 中定义标签，您也会遇到问题。如果这是不可能的，或者如果您不想担心 CORS，那么您需要将以下代码放入.htaccess字体目录中的文件中：

\n\n

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

Run Code Online (Sandbox Code Playgroud)\n\n

MIME 类型

\n\n

字体服务上的 404 问题可能是由不正确的 MIME 定义引起的，请在此处查看更多信息：WOFF 字体的 Mime 类型？

\n\n

移动支持

\n\n

移动支持非常糟糕。Android 直到 4.0 才正确支持它，而据我所知，Windows Mobile 根本不支持它。我正在调查任何解决方案或解决方案。到目前为止我最好的方法是使用如何知道字体（@font-face）是否已经加载？在字体加载失败时显示文本图片。这实际上只适用于网站标题和图标，否则这是一个非常糟糕的解决方案，不利于搜索引擎优化和糟糕的用户体验。

\n\n

查看@font-face支持。

\n\n

此外，如果您@font-face使用Android 2.2 - xxx 版本将会失败local()，这也被用作 IE 的修复。如果您想覆盖所有基础，可能需要多个样式表。在这里查看更多信息：/sf/answers/316432721/

\n\n

SVG 和 Chrome

\n\n

#fontName如果您在网址中包含，Chrome 将不会使用 SVG 字体。它还会在 SVG 之前使用 WOFF - 并且不能很好地渲染它。这可能就是为什么每个人都对 Chrome 中糟糕的字体渲染感到担忧的原因......为了克服这个问题，需要一个额外的 @font-face 声明：

\n\n

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

Run Code Online (Sandbox Code Playgroud)\n

归档时间：	13 年，2 月前
查看次数：	2059 次
最近记录：	11 年，10 月前