1
私はUbuntu（Mint）のFirefoxで文字間隔に問題があります。私はブラウザとフォントのレンダリング方法に違いがあることを知っていますが、Windows上のFirefoxではこの問題がありません（UbuntuのChromeではこの問題はありません）。以下はUbuntuのFirefoxでSansの文字間隔問題が発生する
は、問題の例である：
Font difference over different browsers
コード "TV - 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>私たちは次のことを試してみました：
- フォントをダウンロードする代わりに
- 文字間隔をスムージングフォントを削除し、Googleのフォント API
- からそれらを提供する：reset.css
を使用して0
追加すると、私は現在、この問題を回避するために唯一の方法ですが、これは良い解決策ではないと感じています。私はなぜこれが起こり、より親しみやすい方法で解決できるかを知りたい。
ありがとうございます！