Question

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

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

我错过了什么吗？

修改

经过进一步研究后，我找到了一个修补程序，即将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>

Answer 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问题之前可能是必要的。

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

1 个答案: