html - @Font-face 在某些浏览器中不显示大写“A”

Question

这里奇怪的问题。我正在使用@font-face一个站点并且遇到了一些问题。我最初并没有在 Mac 上的 Chrome 中显示大写的“A”。在明确设置字体粗细之后，上面的任何内容300都很好。

但是，现在我看到它出现在 Firefox 和我的客户端机器上的各种浏览器中。

这是我的代码：

@font-face {
    font-family: 'Avenir';
    src: url('../fonts/tricky.eot');
    src: url('../fonts/tricky.eot?#iefix') format('embedded-opentype'),
         url('../fonts/tricky.woff') format('woff'),
         url('../fonts/tricky.ttf') format('truetype'),
         url('../fonts/tricky.svg#ModernPictogramsNormal') format('svg');
    font-weight: 300;
    font-style: normal;
}

你可以在这里看到它：http: //infirmaryhealth.mdidev.com/

感谢您的任何帮助-

Answer 1

把问题弄清楚了。

我使用的是 Zurb 的 Foundation 框架。h1他们将此应用于h6：

text-rendering: optimizeLegibility;

评论它，瞧！

Answer 2

尝试将字体粗细设置为正常（与将其设置为 400 相同）。这是 fontsquirrel @font-face 生成器在转换字体后所做的，它一直对我有用。