web-dev-qa-db-ja.com

Windows上のCSS 3で薄いフォントをよりスムーズにレンダリングする方法は？

Adobe Flash Pro CS6でWebサイトを設計すると、フォントは次のようになります。

Font rendered in Adobe Flash Pro CS6

フォントは滑らかで少し太く見えます。HTMLとCSSを作成してブラウザーでフォントをレンダリングすると、IE、Firefox、Chromeでそれぞれこのように表示されます。

Font rendered in IE, Firefox, and Chrome browsers

一部の領域では薄く、ピクセル化されています。 OS Xでのフォントレンダリングがはるかにスムーズになりました。これらのブラウザーでフォントをより滑らかに表示するにはどうすればよいですか。私はこれがClearTypeの問題であり、このような薄いフォントでは恐ろしいように見えると仮定しています。

テストに使用しているコードは次のとおりです。回答を投稿する前にテストできます。

<html>
    <head>
        <link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css' />
    </head>
    <body>
        <span style="color: #333; font-family: Lato; font-size: 32px;">Question or concern?</span>
    </body>
</html>
html5css3webfontsrendering
35
Phoenix Logan

異なるブラウザーやオペレーティングシステムでサイトを同じように表示することは決してありません。異なるテクノロジーなどを使用しています。

これはあなたが本当に気にする必要のないものです。 IEをFirefoxに切り替えない、またはChromeまたはその逆です。彼らはフォントの見た目に慣れており、気付かないでしょう。

ブラウザの不整合は、フロントエンドの開発者が（悲しいことに）耐えなければならないものです。それらがすべて同じに見える場合は素晴らしいですが、それは起こりません

あなたがすることができることは、おそらくあなたはブラウザごとに異なる修正が必要になるでしょう：

text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;

編集1： DirectWrite がオンになりましたchromeウィンドウのwillはレンダリングを改善します）.

編集2（2017）：システムUIフォント

もう1つ試すことができるのは、システムフォントを使用してUXを改善することです。

font-family: -Apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

読み取り-smashingmagazine
読み取り-booking.com
読み取り値-中

69
Rick Lancee

text-rendering：optimizeLegibilityは、カーニングをフォントに適用しますが、canは読みやすさを向上させますが、これはディスプレイの解像度とfont-sizeが十分に高い場合のみです。以前に薄すぎた場合、フォントが太字になることはありません。

ここでの問題は、lighterである通常の（font-weight：400 ）– Googles Latoのような。

このようにラトの通常の面にすべてのライトをロードすると

@import url(http://fonts.googleapis.com/css?family=Lato:100,200,300,400);

私は、ほとんどのWindowsブラウザとChrome OSXは400未満（または通常、通常）を指定した場合はfont-weight：100を使用します。font-weight：を200または検査ツールは、マシンが例えばfont-weight：200を表示していると主張しているが、300は何も変わらない。

より軽いウェイト（私の場合は100）を削除することで問題が解決し、少なくともfont-weight：200をそれぞれ使用できるようになります。レンダリングはブラウザ間で完全に同一ではありませんが、少なくとも類似しています。

@import url(http://fonts.googleapis.com/css?family=Lato:200,300,400);

もちろん、これは、指定されたライトフォントウェイトにアクセスできないという実際の問題を解決するものではありません。

6
Alex Koch

私が知っている限り、これに対する単一の修正はありません。 IEを除く、各ブラウザーに合わせて実装された複数の修正です。これらを試してください：

Chrome、およびWebkitを使用するその他のブラウザーの場合：

-webkit-font-smoothing:antialiased !important;

Html CSSに配置するか、適切と思われる要素に配置します。上記に加えてこれを追加することもできます：

text-shadow:1px 1px 1px 1px rgba(0,0,0,0.005);

さまざまなアルファ値を試してみてください。ただし、影のサイズはそのままにしておく必要があります。

他にできることは何も知りませんが、これはChrome（少なくとも他のWebkitブラウザー）での最大の問題に対処する必要があります。

5
Hiigaran

GoogleでChromeを使用すると、-webkit-text-strokeを追加してフォントの外観を改善できます。

例えば：

-webkit-text-stroke: .025em rgba(51,51,51,0.50);

5
jono

これは、ブラウザの問題というよりもWindowsの問題だと思います。同じブラウザは、LinuxやMacなどの他のオペレーティングシステムで同じフォントをよりスムーズにレンダリングします。

Chromeでは、Webkitブラウザーを拡張すると、次のコードを使用してフォントをスムーズにできます。

-webkit-font-smoothing: antialiased;

または

-webkit-font-smoothing: antialiased !important;

通常、これはあまり効果がありません。マイクロソフトがそれについて何かをするのを待たなければならないと思う。

2
Cameron Brown

私はすべてのサイトでこれを使用し、フォントのレンダリングに関するほとんどの問題をカバーしています。

text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
2
Tyrone

最近、似たような問題に遭遇しました。同じフォントファミリーとサイズは、Chrome、safari、Firefoxで異なって見えました。 chromeとfirefoxは特に厚く見えます。これは最良の方法ではないかもしれませんが、私にとってはうまくいきました。

-webkit-font-smoothing: antialiased;
-moz-font-smoothing: unset;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;

また、さまざまなレンダリングエンジンをチェックアウトするのはしばらくの間価値があります。 CSS -moz-および-webkit-？とは

2
Isaac Guan

Cssプロパティのテキストレンダリングを使用して、これを修正できる場合があります。

例：

text-rendering: auto
text-rendering: optimizeSpeed
text-rendering: optimizeLegibility
text-rendering: geometricPrecision
text-rendering: inherit

おそらくtext-rendering：optimizeLegibiltyを使用したいと思うでしょう。

詳細はこちら： MDN Text-Rendering

1
Ryan Ausel

私はこれをハックでプレフィックスするつもりです、私はそれが好きではありませんが、それは動作します

transform: rotate(-0.0002deg)

フォントはわずかに薄くなりますが、著しく滑らかになります

0
Luke Robertson