Question

我在Ubuntu（Mint）上的firefox中有字母间距问题。我知道浏览器之间以及它们如何渲染字体之间存在差异，但我在Windows上的Firefox中没有这个问题（我们也没有在Ubuntu的Chrome上使用它）。

以下是问题的一个示例：

“TV - AUDIO”标题代码：

body {
	font-family:             'Source Sans Pro', sans-serif;
	font-size:               13px;
	-webkit-font-smoothing:  antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h4.f_h4 {
	font-family:    'Open Sans', sans-serif;
	font-size:      12px;
	font-weight:    bold;
	text-transform: uppercase;
	cursor:         default;
}

ul.f_cats {
	font-family:     'Open Sans', sans-serif;
	font-size:       11px;
	color:           #787878;
	padding-left:    0;
	list-style-type: none;
}

ul.f_cats > li {
	padding: 3px 0;
}

ul.f_cats > li > a {
	font-size:       11px;
	font-weight:     bold;
	color:           #787878;
	text-decoration: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<link href="https://fonts.googleapis.com/css?family=Open+Sans|Source+Sans+Pro" rel="stylesheet">

<div class="col-md-2 col-sm-4 col-xs-12 hcats">
  <h4 class="f_h4">TV - AUDIO</h4>
  <ul class="f_cats" id="cats1">
    <li><a href="#">TELEVISIE</a></li>
    <li><a href="#">AUDIO - HIFI</a></li>
    <li><a href="#">DVD - BLU-RAY</a></li>
    <li><a href="#">RADIO-CD-WEKKER-MP3</a></li>
    <li><a href="#">HOOFDTELEFOONS</a></li>
  </ul>
</div>

我们尝试了以下方法：

下载字体而不是从谷歌字体提供 API
删除字体平滑
字母间距：0
字体内核
使用reset.css

可能还有其他一些我现在已经忘记的事情。

添加letter-spacing: -1px;是我目前找到解决问题的唯一方法，但我觉得这不是一个好的解决方案。我想知道为什么会发生这种情况，以及是否可以以更友好的方式解决。

提前致谢！

Answer 1

我认为我们发现了问题。

当包含我们的字体时，我们只启用了300和400个权重，如下所示：

<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">

其他字体权重可能是由浏览器呈现的。包括更多解决了问题。

在Ubuntu上用Firefox打开Sans字母间距问题

1 个答案: