web-dev-qa-db-ja.com

@ font-face：FFの太字はChrome

私はこのコードを使用しました：

@font-face {
    font-family: 'DroidSansRegular';
    src: url('droidsans-webfont.eot');
    src: url('droidsans-webfont.eot?#iefix') format('embedded-opentype'),
         url('droidsans-webfont.woff') format('woff'),
         url('droidsans-webfont.ttf') format('truetype'),
         url('droidsans-webfont.svg#DroidSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'DroidSansBold';
    src: url('droidsans-bold-webfont.eot');
    src: url('droidsans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('droidsans-bold-webfont.woff') format('woff'),
         url('droidsans-bold-webfont.ttf') format('truetype'),
         url('droidsans-bold-webfont.svg#DroidSansBold') format('svg');
    font-weight: bold;
    font-style: normal;
}

font-weight: bold;を使用すると、Chromeの太字のテキストは問題ありませんが、Firefoxでは太字になりすぎます。

これを解決する方法は？

PS：ローカルファイルのフォントを使用する必要があります。

csscross-browserfont-face
19
user1065425

ここでの問題は、FFがフォントを取得し、それに太字のフォントの重みを適用することです（したがって、基本的には効果が2倍になります）。 Chromeはフォントの太さを変更していないようで、適切なフォントを使用しているだけです。これは、2つの異なるフォントファミリを宣言しているために発生すると思います。この場合の適切なCSSは次のとおりです。

@font-face {
    font-family: 'DroidSans';
    src: url('droidsans-webfont.eot');
    src: url('droidsans-webfont.eot?#iefix') format('embedded-opentype'),
         url('droidsans-webfont.woff') format('woff'),
         url('droidsans-webfont.ttf') format('truetype'),
         url('droidsans-webfont.svg#DroidSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'DroidSans';
    src: url('droidsans-bold-webfont.eot');
    src: url('droidsans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('droidsans-bold-webfont.woff') format('woff'),
         url('droidsans-bold-webfont.ttf') format('truetype'),
         url('droidsans-bold-webfont.svg#DroidSansBold') format('svg');
    font-weight: bold;
    font-style: normal;
}

Font-familyを「DroidSansRegular」や「DroidSansBold」ではなく「DroidSans」に変更したことに注意してください。

25
Florian Rachor

FireFoxは本日、バグフォーラムにこれに対する解決策を投稿しました。本日完成したばかりなのでしばらくは使用しませんが、みんな入れて

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

bodyタグで、すべてのブラウザでこれをリセットします。最後に！！男、それは私の日を作りました！これは次のFFリリースで出てくるはずです。

ここにスレッド https://bugzilla.mozilla.org/show_bug.cgi?id=857142

37
kristina childs

問題は、Firefoxが、すでに太字になっているカスタムフォントであっても、テキストに太字の影響を追加しようとすることです。まったく同じ状況が発生したので、@ font-face宣言にfont-weight: normal;を設定することで解決しました。

例：

@font-face {
    font-family: 'DroidSansBold';
    src: url('droidsans-bold-webfont.eot');
    src: url('droidsans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('droidsans-bold-webfont.woff') format('woff'),
         url('droidsans-bold-webfont.ttf') format('truetype'),
         url('droidsans-bold-webfont.svg#DroidSansBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

また、font-weight:normal;が設定されている要素（h1、h2など）ではfont-weight:bold;を使用する必要があります。そうしないと、Firefoxはカスタムフォントに太字を追加します。

2
Alex

2つの異なるファミリで2つの顔を指定しました。 「DroidSansRegular」というファミリで通常の顔を定義し、「DroidSansBold」というファミリで太字の顔を定義しました。 CSSの設計では、これらを1つのファミリの2つの重みとして定義する必要があります。両方にfont-family: "DroidSans";の場合、「DroidSans」というフォントファミリを使用できます。太字を要求すると、そのファミリから太字の顔が表示されます。

（おっと。選択した答えはすでに正しい解決策を示していますが、何が悪いのかを完全には説明していませんでした。）

1
hsivonen

私の問題は、「より太字」のテキストがh1タグ内にあることでした。 CSSに以下を追加したところ、問題が修正されました。 :)

h1,h2,h3,h4,h5,h6{
    font-weight:normal;
}
0
Harry

私はAlexのソリューションを使用しました：

@font-face {
    font-family: 'SomeFont';
    src: url('fonts/somefont-webfont.eot');
    src: url('fonts/somefont-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/somefont-webfont.woff') format('woff'),
         url('fonts/somefont-webfont.ttf') format('truetype'),
         url('fonts/somefont-webfont.svg#SomeFontRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'SomeFont';
    src: url('fonts/somefontbold-webfont.eot');
    src: url('fonts/somefontbold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/somefontbold-webfont.woff') format('woff'),
         url('fonts/somefontbold-webfont.ttf') format('truetype'),
         url('fonts/somefontbold-webfont.svg#SomeFontBold') format('svg');
    font-weight: bold;
    font-style: normal;
}

これはFirefoxv24ではまだ機能しません...今日、2013年10月28日。大胆な@ font-faceの問題はまだ存在しています。

少し検索した後、私はここでこの解決策を見つけました： https://support.mozilla.org/hu/questions/801491

少なくともMozillaがアップデートでこの問題を修正するまで（2011.03.27 ...）、機能したのはハードウェアアクセラレーション。 ツール->オプション|に移動します上級| [一般]タブ| [利用可能な場合はハードウェアアクセラレーションを使用する]のチェックを外します。これは何らかの形でパフォーマンスに影響を与えると確信していますが、これまでのところうまく機能しています。

Firefoxの太字フォントについて何もできないのは悲しいことです...ユーザーのマシンでこれをオフにするオプションは本当にありません。ハードウェアアクセラレーションは非常に重要です。私はあなたがそれと一緒に暮らす必要があると思います。彼らは過去3〜4年間これを修正しませんでした。 Probaby彼らは将来これを修正しません。

ただし、この問題が外部のjavascriptフォント（例：Typekit、EdgeFonts）に影響を与えていない可能性があることに気付きました。

Chromeがますます多くのユーザーのPCでその道を見つけることを願っています...

更新：

ハードウェアアクセラレーションの一部をオフにすることしかできません。ここのチュートリアル： http://www.mydigitallife.info/fix-firefox-4-fade-blur-bold-bad-and-ugly-font-rendering/

また、別の解決策についても言及しました。グラフィックカードの設定ページでFirefoxの異方性フィルタリングをオフにします（ただし、これは私には機能しません）。

0
Lanti
@-moz-document url-prefix() {
  body h3{
    font-weight: normal;
    font-style: normal;
  }
}

これは私のために働いた！

0
user1458767