1
我在Ubuntu（Mint）的firefox上遇到了字母间距问题。我知道浏览器和它们呈现字体的方式有所不同，但我在Windows上的Firefox中没有这个问题（我们也没有在Ubuntu的Chrome上使用它）。在Ubuntu上用Firefox打开Sans letter-spacing问题
下面是问题的一个示例：
Font difference over different browsers
的准则 “电视 - AUDIO” 头：
body {
\t font-family: 'Source Sans Pro', sans-serif;
\t font-size: 13px;
\t -webkit-font-smoothing: antialiased;
\t -moz-osx-font-smoothing: grayscale;
}
h4.f_h4 {
\t font-family: 'Open Sans', sans-serif;
\t font-size: 12px;
\t font-weight: bold;
\t text-transform: uppercase;
\t cursor: default;
}
ul.f_cats {
\t font-family: 'Open Sans', sans-serif;
\t font-size: 11px;
\t color: #787878;
\t padding-left: 0;
\t list-style-type: none;
}
ul.f_cats > li {
\t padding: 3px 0;
}
ul.f_cats > li > a {
\t font-size: 11px;
\t font-weight: bold;
\t color: #787878;
\t 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
- 删除字体平滑
- 字母间距为他们提供服务：使用reset.css 0
- 字体内核
也许还有一些我现在忘记的东西。
添加letter-spacing: -1px;是我目前发现解决它的唯一方法，但我觉得这不是一个好的解决方案。我想知道为什么会发生这种情况，如果能以更友好的方式解决。
提前致谢！