css - Safari 中字体粗细的@font-face 问题

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-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 声明中，然后在 anchor 上使用font-weight:600;。