跨浏览器半粗体字体问题答案

【问题标题】：Cross browser Semibold font issue跨浏览器半粗体字体问题
【发布时间】：2015-09-16 20:49:58
【问题描述】：

我正在为我的网络应用程序使用字体 "Signika"。该设计是在 Adobe Illustrator 文件中提供的，他们使用了 "Signika Semibold" 字体。

第一种方法：

我申请了font-family: Signika Semibold，但它仅在 Chrome 上以半粗体形式运行。 Firefox 和 IE 以正常字体粗细显示文本。

HTML

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

CSS

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

第二种方法：

我申请了font-family: Signika 并给了font-weight: 500 半粗体字。但是它在 Chrome 上显示为 bold 而不是 Semibold。

JS Fiddle

HTML

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

CSS

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

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

【问题讨论】：

您的小提琴不包含对实际字体的引用，但确保在每个浏览器中实际加载哪种字体的一种非常安全的方法是检查应用的 CSS 字体的控制台/网络统计信息– 它应该比每个浏览器的不同渲染/回退引擎更清楚地应用哪种样式。

标签： html css fonts

【解决方案1】：

一些截图会很棒。字体确实在 Webkit 浏览器中看起来更重，因为它们使用sub-pixel antialiasing 进行字体平滑。尝试设置-webkit-font-smoothing: antialiased;，它应该开始看起来类似于它在其他浏览器中的外观。

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

使用这个有一个警告：一般来说，你应该让浏览器来处理这个。您会注意到 MDN 页面提到这是一个非标准功能。

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

【讨论】：

我认为这应该是公认的答案。如果你的所有字体粗细正常或排序，但它仍然显得更粗或与其他软件制作的样式表有差异，你应该检查字体平滑！

【解决方案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;

通过使用这种方法，所有浏览器上的字体看起来都一样。

【讨论】：

【解决方案3】：

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

font-weight: 600;

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

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

现在它不再是粗体了。

【讨论】：

嗨。谢谢。但 500 在所有浏览器上并不相同。它在 chrome 上比在 Firefox 和 IE 上更倾向于粗体。这就是问题所在。
@AlekhShah 不同的浏览器可以有不同的字体平滑，这会导致细微的视觉字体粗细差异。换句话说，它在两种浏览器上可能是相同的字体粗细，但由于一个浏览器与另一种浏览器相比如何平滑字体，它可能在一个浏览器中看起来比另一个浏览器更粗。

【解决方案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;
}

【讨论】：

【解决方案5】：

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

【讨论】：