Question

我正在使用字体＆＃34; Signika＆＃34; 作为我的网络应用。该设计在Adobe Illustrator文件中提供，其中使用了＆＃34; Signika Semibold＆＃34; 字体。

第一种方法：

我已应用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，并为{semibold'提供了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; }

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

Answer 1

有些屏幕截图会很精彩。字体在Webkit浏览器中往往显得更重，因为它们使用sub-pixel antialiasing进行字体平滑。尝试设置-webkit-font-smoothing: antialiased;，它应该看起来与其他浏览器的外观类似。

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

使用此功能时需要注意：通常，您应该让浏览器处理此问题。您会注意到MDN页面提到这是一个非标准功能。

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

Answer 2

<强>解

使用所需样式的谷歌字体：普通（400），半粗体（600），粗体（700））

Link of Google Font

通过在HTML的HEAD部分中包含此代码来导入字体

<link href='https://fonts.googleapis.com/css?family=Signika:700,400,600' rel='stylesheet' type='text/css'>

然后在CSS中，

正常

font-weight:400;

半粗体

font-weight:600;

大胆

font-weight:700;

通过使用此方法，所有浏览器上的字体看起来都很相似。

Answer 3

实际上，你的第二个JSFiddle有：

font-weight: 600;

而不是500。这是你的小提琴更新。

http://jsfiddle.net/gbj7b1jp/1/

现在不大胆。

Answer 4

Semibold usaly是font-weight:400;

但是，在使用@font-face导入字体时，您可以扫描指定字体属性：

@font-face {
    font-family: Signika;
    src: url(SignikaLight.otf);
    font-style: normal;
    font-weight: 100;
}

@font-face {
    font-family: Signika;
    src: url(SignikaRegular.otf);
    font-style: normal;
    font-weight: 300;
}

@font-face {
    font-family: Signika;
    src: url(SignikaSemibold.otf);
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: Signika;
    src: url(SignikaBold.otf);
    font-style: normal;
    font-weight: 600;
}

Answer 5

这是CSS中的一个已知问题。 Web浏览器在实现字体权重方面做得很差：除了粗体外，它们在很大程度上找不到特定的权重版本。解决方法是将信息包含在字体系列名称中，即使这不是事情应该如何工作。您可以查看此链接（仅在IE中运行）并从列表中确定字体样式的最佳匹配是这个问题的容易入侵。 http://www.cs.tut.fi/~jkorpela/listfonts.html

跨浏览器Semibold字体问题

5 个答案: