实现@ font-face截至2012年底 [英] Implementing @font-face as of late 2012

查看：169
本文介绍了实现@ font-face截至2012年底的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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



我使用ALOT测试了不同的在线工具和应用程序，但最终我把这归结为一个在线服务和一个应用程序。 p>


  • FontSquirrel，在线工具免费。



    IE6-8错误



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


    1. 在线转换新的.eot文件。

    2. 使用FontForge编辑字体文件的名称属性，然后重新保存并重新转换。



    CORS



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



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

     < FilesMatch\。（ttf | otf | eot | woff）$> 
    < IfModule mod_headers.c> 
    标题集Access-Control-Allow-Origin*
    < / IfModule> 
    < / FilesMatch>



    MIME类型



    404字体放送问题可能是由不正确的MIME定义造成的，请参阅这里： Mime类型对于WOFF字体？



    移动支持



    很糟糕。 Android不能正常支持它，直到4.0，和Windows Mobile，据我所知不支持它。我正在调查任何工作或解决方案。最好我到目前为止使用如何知道字体（@ font-face）是否已经加载？显示字体加载失败时的文本图片。这真的只适用于网站的标题和图标，否则它是一个可怕的糟糕的工作，不利于SEO和坏用户体验。



    请参阅 @ font-face 支持。



    此外，如果您的 @ font-face 使用 local（）作为IE的修复。如果您想覆盖所有基础，可能需要多个样式表。在此处查看： http://stackoverflow.com/a/4520467/1455709



    SVG和Chrome



    Chrome不会使用SVG字体（如果您包括 #fontName 。它也将使用WOFF之前的SVG - 并没有做好工作呈现它。这可能是为什么每个人都喜欢在Chrome中appy脚的字体渲染的原因...要克服这是一个额外的@ font-face声明是必需的：

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


    I've been spending a few evenings investigating the best way to implement @font-face with todays modern browsers. I am a full time web/system developer with a background as a graphic designer I find the opportunities and possibilites with web design becoming more and more interesting. So, I made some testing and would like to hear if anyone has advices, any better ideas or inputs on this. My testing scenario looks like this.

    I tested with ALOT of different online tools and applications but in the end I boiled this down to one online service and one application.

    I used a font that was shipped with my Mac, Tamil Sangam MN and Tamil Sangam MN Bold, both came as open type, .otf.

    • TamilSangamMN.otf - 290 KB
    • TamilSangamMNBold.otf - 271 KB

    Investigating conversion sizes

    FontSquirrel

    This is a good online tool, it's very good. There are a few different modes and I've used the Basic and Optimal. The output of my .otf file was svg, ttf, eot and woff.

    Basic

    Regular

    • TamilSangamMN.svg 233 KB
    • TamilSangamMN.ttf 71 KB
    • TamilSangamMN.eot 25 KB
    • TamilSangamMN.woff 30 KB
    • Total: 359 KB

    Bold

    • TamilSangamMNbold.svg 225 KB
    • TamilSangamMNbold.ttf 69 KB
    • TamilSangamMNbold.eot 25 KB
    • TamilSangamMNbold.woff 30 KB
    • Total: 349 KB

    Optimal

    First thing I noticed with the optimal fonts are that they are considerably much smaller than the basic variants ~ 260 KB!

    Regular

    • TamilSangamMN.svg 33 KB
    • TamilSangamMN.ttf 25 KB
    • TamilSangamMN.eot 15 KB
    • TamilSangamMN.woff 17 KB
    • Total: 90 KB

    Bold

    • TamilSangamMNbold.svg 33 KB
    • TamilSangamMNbold.ttf 25 KB
    • TamilSangamMNbold.eot 15 KB
    • TamilSangamMNbold.woff 17 KB
    • Total: 90 KB

    FontXChange

    This tool can do so much more than just juggling fonts for the web. It can convert several formats between each other; like opentype, true type, web fonts, post script and so on. The result is overall very high quality the files are so large, almost twice the size of FontSquirrels Basic versions and over 7 times bigger than FontSquirrels Optimal version.

    Regular

    • TamilSangamMN.svg 480 KB
    • TamilSangamMN.ttf 72 KB
    • TamilSangamMN.eot 72 KB
    • TamilSangamMN.woff 80 KB
    • Total: 704 KB

    Bold

    • TamilSangamMNbold.svg 463 KB
    • TamilSangamMNbold.ttf 69 KB
    • TamilSangamMNbold.eot 70 KB
    • TamilSangamMNbold.woff 80 KB
    • Total: 682 KB

    Setting up the CSS

    It puzzled me a bit in the start that the actual order in the font list mattered. Then I discovered that some takes the first format that it finds compatible rather than sticking with the format that is optimal - and it sucks. After some laborations I found that this is the optimal way to format your css (note the order of the file types | important!).

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

    My test results

    Regular fonts

    I did mark the best version with a *

    Firefox MAC (15.0.1)

    • FontSquirrel Optimal: Renders a bit to fat
    • FontSquirrel Basic: Renders a bit to fat
    • FontXChange 4.0: Renders a bit to fat, but the kerning is better than the FontSquirrel version *

    Firefox Windows (15.0.1)

    • FontSquirrel Optimal: Renders very nice
    • FontSquirrel Basic: Font gets jagged/choppy
    • FontXChange 4.0: Renders very nice *

    Safari Mac (6.0)

    • FontSquirrel Optimal: Perfect render
    • FontSquirrel Basic: Perfect render
    • FontXChange 4.0: Perfect render *

    Chrome Mac (21.0)

    • FontSquirrel Optimal: A bit fat
    • FontSquirrel Basic: A bit fat
    • FontXChange 4.0: Perfect render *

    Chrome Windows (21.0)

    • FontSquirrel Optimal: Perfect render
    • FontSquirrel Basic: Perfect render
    • FontXChange 4.0: Perfect render *

    Internet Explorer (9.0)

    • FontSquirrel Optimal: Perfect render *
    • FontSquirrel Basic: Perfect render
    • FontXChange 4.0: Font gets jagged/choppy

    Bold fonts

    Firefox MAC (15.0.1)

    • FontSquirrel Optimal: Renders very fat *
    • FontSquirrel Basic: Renders very fat
    • FontXChange 4.0: Renders very fat, but better kerning (I would like to select this one for the mac but since the windows version of firefox isn't compatible here it has to go)

    Firefox Windows (15.0.1)

    • FontSquirrel Optimal: Renders ok, not very antialiased *
    • FontSquirrel Basic: Font gets jagged/choppy
    • FontXChange 4.0: Font gets a bit distorted/jagged

    Safari Mac (6.0)

    • FontSquirrel Optimal: Perfect render *
    • FontSquirrel Basic: Perfect render
    • FontXChange 4.0: Renders fat

    Chrome Mac (21.0)

    • FontSquirrel Optimal: Perfect render *
    • FontSquirrel Basic: Good render, a few percent to fat
    • FontXChange 4.0: Renders fat

    Chrome Windows (21.0)

    • FontSquirrel Optimal: Perfect render *
    • FontSquirrel Basic: Perfect render
    • FontXChange 4.0: Renders very fat

    Internet Explorer (9.0)

    • FontSquirrel Optimal: Perfect render *
    • FontSquirrel Basic: Perfect render
    • FontXChange 4.0: Font gets jagged/choppy

    The final implementation

    I usually organize my webfonts in the following pattern, <webfonts> / <conversion source> / <conversion method> / <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;
}

    Graphical overview of the result (fullsize at http://i.stack.imgur.com/atb98.png)

    Conclusions and quests

    There isn't one single tool out there that will deliver fonts that render nice on the Mac and Windows in all browsers. You must experiment and test on each font. The methodology posted above is just a simple way and suggestion how to test and experiment with @font-face's.

    Is there anything you think I could change in my methods or implementation, is there any application or service that I missed?

    All the best / T

    解决方案

    @font-face code

    You can add src: local('ò?'), which looks for local font with this name, forcing browser to ignore local fonts if they happen to have the same name as your custom font. You can also use this inversely to restrict custom fonts from downloading. see mobile support

    I generally see the ?#iefix line second after the standard .eot src, though I can't say I have ever needed it, nor know if specific positioning is required (apart from the .eot being listed first).

    Additional control over the fonts

    If you are looking for more control with the fonts in the scenario where fonts fail to load, or dealing with the FOUC in IE, I have a jQuery plugin which will let you hide fonts while they are loading, and allow you to alter the font size on fail so your fallback font doesn't destroy your layout. How to know if a font (@font-face) has already been loaded?

    IE6-8 bug

    Additionally, IE6-8 can have issues with some font's .eot file. This can be fixed by either (full guide here):

    1. Converting a new .eot file online. If this doesn't work, then the problem is the file properties themselves.
    2. Use FontForge to edit the name properties of the font file, then resave and reconvert.

    CORS

    Seems to only relate to IE and FF. All other browsers (only latest versions tested) don't have problems.

    CORS are a common problem with fonts and occur when you are loading fonts from another domain or hostname. This includes specifying your site with a www or not. The @font-face code needs to be relatively referenced, as does the CSS file. You will also have issues if defining a <base> tag in your html. If this isn't possible, or if you don't want to worry about CORS, then you'll need to place the following code in an .htaccess file in your font directory:

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

    MIME Types

    404 issues on font serving may be caused by incorrect MIME definitions, see more here: Mime type for WOFF fonts?

    Mobile Support

    Mobile support is pretty bad. Android doesn't properly support it until 4.0, and Windows Mobile, as far as I am aware doesn't support it at all. I am investigating any work around or solutions for this. Best I have so far is to use How to know if a font (@font-face) has already been loaded? to display a picture of the text on font load failure. This really only works for site titles and icons, otherwise it's a horribly poor work around, bad for SEO and bad UX.

    See @font-face support.

    Additionally, Android 2.2 - x.x.x versions will fail if your @font-face uses local(), which is also used as a fix for IE. Multiple stylesheets may be needed if you want to cover all your bases. See more here: http://stackoverflow.com/a/4520467/1455709

    SVG and Chrome

    Chrome won't use the SVG font if you're including the #fontName in the url. It'll also use WOFF before SVG - and doesn't do a good job rendering it. This is probably the reason why everyone sooks about crappy font rendering in Chrome... To overcome this is an additional @font-face declaration is required:

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

    这篇关于实现@ font-face截至2012年底的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆