Question

我刚开始使用@ font-face 这是我的CSS之上

@font-face {
  font-family: Avenir;
  src: url(../fonts/AvenirLTStd-Medium.otf);
}
body{
 font-family:"Avenir",Helvetica;
 background:#fff url(../images/main_bg.png) repeat-x scroll 0 0;
 color:#321244;
}

我在下面有关于joomla的菜单

#menu_bottom ul li a {
font-size:12px;
font-weight:600;
letter-spacing:-0.6px;
text-transform:uppercase;

这是在html文件

上

<li class="item23"><a href="/index.php?option=com_user&amp;view=login&amp;Itemid=13&amp;lang=en"><span>Menu Item</span></a></li>

这适用于Firefox，但它在Safari或Chrome上无法正常工作，字体正确但字体粗细不起作用，我在google-chrome开发工具上查看，计算字体重量为600。我尝试使用100或900结果在safari和chrome上是相同的，字体重量不会改变。

我的css文件上的font-face声明有问题吗？

我应该尝试添加这样的东西

@font-face {
  font-family: Avenir;
  src: url(../fonts/AvenirLTStd-Heavy.otf);
  font-style: bold;
}

我试过但没有工作。我应该添加另一种字体，这是我在我的字体目录

AJensonPro-BoldIt.otf         AvenirLTStd-BookOblique.otf
AJensonPro-Bold.otf           AvenirLTStd-Book.otf
AJensonPro-It.otf             AvenirLTStd-HeavyOblique.otf
AJensonPro-LtIt.otf           AvenirLTStd-Heavy.otf
AJensonPro-Lt.otf             AvenirLTStd-LightOblique.otf
AJensonPro-Regular.otf        AvenirLTStd-Light.otf
AJensonPro-SemiboldIt.otf     AvenirLTStd-MediumOblique.otf
AJensonPro-Semibold.otf       AvenirLTStd-Medium.otf
AvenirLTStd-BlackOblique.otf  AvenirLTStd-Oblique.otf
AvenirLTStd-Black.otf         AvenirLTStd-Roman.otf

或者我应该尝试另一种字体格式，不是otf的东西，在IE中看起来似乎工作的宽度更大。我仍然需要解决这个问题。

Answer 1

正如here所述，您必须添加

font-weight: normal;
font-style: normal;

在@ font-face声明中，然后使用锚点上的font-weight:600;。

Answer 2

指定font-weight的数值值是您面临的危险。不同的浏览器以不同的方式解释值，有些浏览器根本不会将其解释为任何内容。你最好使用标准的“粗体”......哪些浏览器以一些半统一的方式最接近匹配。此外，如果您使用自定义字体，您应该确定您的用户在他们的系统上有他们。此外，一些自定义字体对人造“粗体”属性的反应不佳。他们将有一个名为“大胆”的面孔，如Avenir Bold，Avenir Black，Avenir Demibold，Avenir Demibold Condensed等等。

此外，始终包含足够的后备字体，最后包括“serif”或“sans-serif”或“monospace”通用字体说明符。

Answer 3

迟到总比没有好。希望这会有所帮助：

html { -webkit-font-smoothing: antialiased; }

在Safari中使用font-weight的@ font-face问题

3 个答案: