html – 跨浏览器Semibold字体问题

我使用字体“Signika”为我的网络应用程序.该设计是在Adobe 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上显示为粗体而不是Semibold.

JS Fiddle

HTML

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

CSS

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

是否有解决方法来解决这个问题？

解决方法

一些屏幕截图将会很棒.字体在Webkit浏览器中倾向于显得更重,因为它们使用子像素抗锯齿来进行字体平滑.尝试设置-webkit-font-smoothing：antialiased;它应该开始看起来像其他浏览器中的外观.

查看this页面了解更多详情.

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

如果您对这些不同的平滑技术产生不同的产出感兴趣,那么check this out.