html - 跨浏览器半粗体字体问题

Question

我正在为我的网络应用程序使用字体 "Signika"。该设计在 Adob​​e Illustrator 文件中提供，他们在其中使用了字体 “Signika Semibold”。

第一种方法:

我应用了 font-family: Signika Semibold 但它作为半粗体仅在 Chrome 上运行。 Firefox 和 IE 以正常字体粗细显示文本。

JS Fiddle

HTML

<p class="semi">
  Abcd Efgh
</p>    

CSS

.semi{
  font-family:'Signika Semibold';
  font-size:14px;
}

第二种方法:

我应用了 font-family: Signika 并为半粗体指定了 font-weight: 500。但是它在 Chrome 上显示为粗体而不是半粗体。

JS Fiddle

HTML

<p class="weight">
  Abcd Efgh
</p>    

CSS

.weight{
  font-family:'Signika';
  font-weight:500;
  font-size:14px;
}

是否有解决此问题的解决方法？

Answer 1

一些屏幕截图会很棒。字体在 Webkit 浏览器中确实会显得更重，因为它们使用亚像素抗锯齿 来平滑字体。尝试设置 -webkit-font-smoothing: antialiased; 它应该开始看起来与它在其他浏览器中的外观相似。

看看this页面了解更多详情。

虽然使用它有一个警告:通常，您应该让浏览器处理它。您会注意到 MDN 页面提到这是一个非标准功能。

如果您对这些不同的平滑技术如何产生不同的输出感兴趣，check this out .