20

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

これはFirefoxとInternetExplorerの両方で正常に機能するようですが、Google Chromeでは、太字/ 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; }

私は少しグーグルで検索し、半有用な答えを提供する同様の質問を見つけました：

で解決：

フォントの太さ：900; font-family： "Arial Black"、Arial、sans-serif;

しかし、上記の単純なものを使用すると、font-weightChromeではすべてが900であると想定されます（特に指定されている場合でも）

この例については、ここを参照してください（Chromeでは明らかに）

これはChromeのバグですか？それとも私はここで何か間違ったことをしていますか？

4

5 に答える 5

21

Arial（少なくとも標準バージョン）には2つの重みしかありません：normalとbold。これら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フォントサービスを使用して、より多くのウェイトを使用できるフォントを選択することです。

于 2013-03-06T14:32:04.497 に答える
3

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

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

于 2013-03-06T14:49:27.140 に答える
2

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

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

PS今、私は700と900が区別されていないことを再確認しました。600/900です。jeradgは正しいです。

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

于 2013-03-06T14:32:14.947 に答える
0

要素に通常以外のネイティブフォントの重み（b、strong、thなど）がある場合、フォントの重みプロパティを通常に設定すると、あいまいなフォントが修正されます。これは、これがChromeのバグであると私が確信していることに対する一時的な修正です。

于 2014-01-17T15:59:18.903 に答える
0

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

LinkedInに感謝します。

-webkit-font-smoothing: antialiased;
于 2017-03-25T20:56:04.377 に答える