0

我在使用“font-variant: small-caps”将我的网络字体设置为小型大写字母时遇到问题。这是我的发现和经历，排除了可能的问题：

  1. 我最初的想法是 .woff 文件由于某种原因没有呈现小型大写字母。我已经排除了这一点，因为字体在 Safari 和 Firefox 中呈现良好，据我所知使用 .woff 格式。
  2. 我的第二个想法是这是一个 webkit 问题，但 Safari 显示它很好，我不认为它是。
  3. 我没有使用 twitter 引导程序，所以不text-rendering: optimizelegibility，我也尝试将其重置为自动。
  4. 我尝试了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>
4

1 回答 1

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 的 SASS 字体指南。

删除对 SVG 的引用似乎可以修复它。我还尝试切换 TTF 和 SVG 的顺序（打破 Compass 对字体文件的“推荐顺序”），但这并没有帮助。

快速浏览一下，Chrome 似乎在渲染 SVG 字体方面还有其他杂项问题。这不是一个真正优雅的解决方案，但在 Chrome 解决其 SVG 问题之前可能需要它。

于 2014-01-08T02:00:13.930 回答