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

Posted 2023-03-06

【中文标题】Safari 中字体粗细的@font-face 问题

【英文标题】：@font-face problem with font-weight in Safari

【发布时间】：2011-02-02 11:14:04

【问题描述】：

我刚开始使用@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 中似乎可以正常工作，尽管宽度更大。我仍然需要解决这个问题。

【参考方案1】：

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

html  -webkit-font-smoothing: antialiased; 

【参考方案2】：

正如here 解释的，你必须添加

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

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

【讨论】：

我遇到了类似的问题，这解决了我的问题。谢谢克努。 @Juan，请接受这个答案，这样这个问题就可以结束了。

谢谢，效果很好！唯一让我感到困惑的是，来源引用了 Chrome 的错误跟踪器中的一个问题，并且它被标记为已修复......但在 2012 年仍然存在问题。

@Knu OP 提到了 Safari 和 Chrome，答案链接到 Safari 和 Chrome 中的一个错误......这并不让我感到惊讶，因为这两种浏览器都使用 WebKit 作为布局引擎。

【参考方案3】：

为 font-weight 指定一个数值是有风险的。不同的浏览器对这些值的解释不同，有些浏览器根本不把它解释为任何东西。你最好使用标准的“粗体”......浏览器以某种半统一的方式最接近匹配。此外，如果您使用自定义字体，您应该确定您的用户在他们的系统上拥有它们。此外，一些自定义字体对虚假的“粗体”属性反应不佳。他们会有一个命名为“粗体”的脸，比如 Avenir Bold、Avenir Black、Avenir Demibold、Avenir Demibold Condensed 等等等等等等。

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

【讨论】：

我确实尝试过使用粗体，它也没有工作，它与字体有关。 font-face 的想法是使用自定义字体，这些字体是从我的服务器提供的，我确实将 helvetica 字体作为辅助字体。