web-dev-qa-db-ja.com

Chromeで無視されるフォントの太さ

Font-weight 300でOpen Sansフォントを使用しようとする fiddle を作成しました。

HTML

<span class="demo">example</span>

CSS

.demo {
  font-weight: 400 !important;
  font-family: 'Open Sans' !important;
  font-style: normal;
  font-variant: normal;
}

Googleフォントを使用して [〜＃〜] css [〜＃〜] を定義します

Firefox（Ubuntu 13.10）で、フォントウェイト：300（ライト）とフォントウェイト：400（ノーマル）でレンダリングする場合に違いがありますが、Chrome（バージョン33.0.1750.117 ）、すべてがfont-weight：400でレンダリングされているように見えますが、何か間違ったことをしたり、Chromeにバグがありますか？既知の回避策はありますか？

更新：

chrome Chromeの2つの異なるウィンドウで同じページの2つのインスタンスを開いています。1つはフォントをOKにレンダリングします（300の重みはライトバリアントに対応）と1つは（300の重みはNormalバリアントと同じです。）手がかりはありますか？各タブのページを実際に同じページになるように更新しました。

pdate 2：添付のスクリーンショット：バグの： Chrome font rendering bug

更新これは重複ではないthis です。その質問では、問題は「Arial Black」と「Arial」が実際には異なるフォントであるということです。私の場合、Open Sansが唯一のフォントであり、問​​題はChrome間違った重量を何度か拾うことです。スクリーンショットからわかるように、Chromeは2つのインスタンス間でもレンダリングされるフォントと一致しません。

htmlcssgoogle-chromefontswebfonts
27
vseguip

これをCSSに追加します。

* {-webkit-font-smoothing: antialiased;}
20
Fred K

これは、システムにローカルにフォントがインストールされているために発生するChrome/Chromiumのバグのようです。他のブラウザはこの問題の影響を受けないようです。

これまでのところ、LinuxとWindowsで発生するようです（確認済み）。

何らかの理由で、ローカルフォントが読み込まれ、font-weightルール、たとえ!important。それ自体と一貫性はありません。フォントの太さはタブとページのリロードの間でランダムに変化する可能性があります。

最も簡単な回避策はフォントを削除することですが、それが何か他のものに必要な場合は問題になる可能性があります。

また、Chrome=を使用してWebフォントを使用し、CSSフォントルールを順守するために、フォントの名前を別の名前に変更してみることもできます。

11
Léo Lam

フォントファミリを'Open Sans Light', sans-serif;に変更してください。私は同じ問題を抱えていたが、これは私のために働いた。

3
Jamie Kudla

私はそれらを互いに重ねて表示し、osx chromeでよく見えます。

font-weight: 400 !important;

下に

font-weight: 300 !important;

http://jsfiddle.net/gpmXe/22/

1
jakealbaugh

私の解決策は、フォントのすべての種類のフォントをマシンにダウンロードしてインストールするか、まったくインストールしないことです。それは奇妙な解決策ですが、私にとってはうまくいきます。

0
harisrozak