小型大写字母不使用网络字体在chrome中呈现

时间:2014-01-02 21:08:02

标签: css google-chrome webfonts woff

我在使用“font-variant:small-caps”获取小型大写字母时遇到问题。这是我的发现和我经历的事情,排除了可能存在的问题:

  1. 我最初的想法是.woff文件由于某种原因没有渲染小型大写字母。我已经排除了这一点,因为Safari和Firefox中的字体呈现得很好,据我所知,使用.woff格式。
  2. 我的第二个想法是这是一个webkit问题,但是当Safari显示它很好时,我认为不是。
  3. 我没有使用Twitter bootstrap,所以没有text-rendering: optimizelegibility,我也尝试将其重置为自动。
  4. 我尝试了font-feature-settings: 'smcp'包括浏览器前缀,这些前缀不会渲染小型大写字母(只有第一个字母在所有浏览器中大写)
  5. 我错过了什么吗?

    修改

    经过进一步研究后,我找到了一个修补程序,即将font-variant:small-caps添加到@font-face,如下所示:

    @font-face {
        font-family:'MYFONT';
        src:url('../fonts/MYFONT.eot');
        src:url('../fonts/MYFONT.eot?#iefix') format('embedded-opentype'),
            url('../fonts/MYFONT.ttf') format('truetype'),
            url('../fonts/MYFONT.woff') format('woff'),
            url('../fonts/MYFONT.svg#myfont') format('svg');
        font-variant:small-caps
    }
    

    事实证明只有堆栈受此影响。分配@font-face之类似可以按预期工作,以Chrome支持的每种字体格式:

    <style>
    @font-face {
        font-family:'MYFONTttf';
        src:url('../fonts/MYFONT.ttf') format('truetype');
    }
    </style>
    
    <div style="font-family:MYFONTttf; font-variant:small-caps">
        works as expected, in small-caps
    </div>
    

1 个答案:

答案 0 :(得分:1)

我认为关键是奇怪的是,不要包含SVG格式的字体。仅仅包括WOFF和TTF似乎使它显示正常。

我使用Font Squirrel生成了各种字体文件,因此最终得到了.woff.ttf.svg.eot个文件。我与字体相关的CSS是:

@font-face { font-family: "foo"; src: url(/fonts/foo.eot); src: url(/fonts/foo?#iefix) format('eot'), url(/fonts/foo.woff) format('woff'), url(/fonts/foo.ttf) format('truetype'), url(/fonts/foo.svg) format('svg'); font-weight: normal; font-style: normal; }

由Compass从:

生成

+font-face("foo", font-files("/fonts/foo.woff", "/fonts/foo.ttf", "/fonts/foo.svg"), "/fonts/foo.eot", normal, normal)

Compass's SASS font-face guidelines保持一致。

删除对SVG的引用似乎解决了这个问题。我也试过切换TTF和SVG的顺序(打破指南针对字体文件的“推荐顺序”),但这没有帮助。

快速浏览一下,看起来Chrome在渲染SVG字体方面存在其他各种问题。这不是一个非常优雅的解决方案,但在Chrome解决其SVG问题之前可能是必要的。