web-dev-qa-db-ja.com

Chromeフォントの太さを考慮していませんか？

私はベースフォントとしてArialを使用しており、ページのさまざまなセクション（標準、太字/ 700、900）にさまざまなフォントの太さを使用しようとしています。

これはFirefoxとInternet Explorerの両方で正常に動作するようですが、Google chrome=では、bold/700と900の間にまったく違いがないようです！？

フィドルを参照

（上記のリンクが壊れている/無効な場合）

HTML：

<p id="one">Testing</p>
<p id="two">Testing</p>
<p id="three">Testing</p>

CSS：

p { font-family: arial; font-size: 40px; margin: 0; }

#one { font-weight: normal; }
#two { font-weight: 700; }
#three { font-weight: 900; }

私は少しググってみました 同様の質問 が見つかりましたが、これは半有用な答えを提供します：

で解決：

font-weight：900; font-family： "Arial Black"、Arial、sans-serif;

しかし、上記を単純に使用すると、すべてがfont-weight of Chrome（特に指定されていない場合でも））

この例 ここを参照 （Chrome明らかに））

これはChromeのバグですか？または私はここで何か悪いことをしていますか？

htmlcssgoogle-chromefonts
18
Sean

Arial（少なくとも標準バージョン）には、normalとboldの2つの重みしかありません。これら2つのいずれでもないウェイトを指定した場合、ブラウザーは最も近い使用可能なウェイトを選択します。 （参照： font-weight：900 Firefoxでのみ機能 ）

Arial BlackはArialとは別のフォントです。そのため、提供した半有用な回答が機能します。

Arialを使用したい場合は、以下を試してください。

#one { font-weight: normal; }
#two { font-weight: bold; }
#three { font-family: "Arial Black", Arial, sans-serif; }

もう1つの方法は、TypekitやWebinkなどのWebフォントサービスを使用して、使用可能なウェイトの大きいフォントを選択することです。

18
jeradg

グーグルクロームのバグではないと思います。フォントが900ではない可能性があります。Chromeだけでなく、OperaおよびSafariでも機能しません。

Arial Blackの通常、700と900はすべてSafariで同じです。

3
madhushankarox

問題は「Arial Black」です。何らかの理由でChromeおよびIE（ちなみに）フォントの太さは無視します。フォントを削除すると、CSSは期待どおりに適用されます。

p { font-family: Arial, sans-serif; font-size: 40px; margin: 0; }

追伸700と900が区別されていないことを再確認しました。 600/900はそうです。 jeradgが正しいです。

http://jsfiddle.net/ZjHEn/1/

2
Mariyan

私は解決策を見つけました。

LinkedInに感謝します。

-webkit-font-smoothing: antialiased;
0
youDontKnow

エレメントに通常以外のネイティブフォントウェイト（b、strong、thなど）がある場合、フォントウェイトプロパティセットを通常に追加すると、ファジーフォントが修正されます。これは、これがChromeバグであると確信しているものに対する一時的な修正です。

0
eugene