web-dev-qa-db-ja.com

Chromeテキストのアンチエイリアスなし

Google Chrome専用のコードを追加しても、Google Chromeはテキストのアンチエイリアス処理を行いません。

奇妙なことに、Firefoxは、追加したコードと互換性がないと言われていましたdoesは、テキストを適切にアンチエイリアスします。

具体的なCSSスタイルは次のとおりです。

.jumbotron h1 {
    color: white;
    font-size: 100px;
    text-align: center;
    line-height: 1;
    /*
     * Webkit only supported by Chrome and Safari.
     */
    -webkit-font-smoothing: antialiased;
}

Chrome：

https://dl.dropboxusercontent.com/u/26438996/guru/guru-chrome.png

Firefox：

https://dl.dropboxusercontent.com/u/26438996/guru/guru-firefox.png

上記で確認できるように（およびおそらくWebサイトで）、Firefoxでのフォントの方がはるかに優れています。

htmlcssgoogle-chromefirefox
34
Jire

注：Chrome 37以降はフォントのアンチエイリアスを修正したため、Chromeの最新バージョンではこの修正は不要になりました。

フォントファイル形式がsvgの場合、chromeはアンチエイリアスを使用してフォントをレンダリングします。

詳細については、自分で答えを見つけた記事を参照してください： http://www.adtrak.co.uk/blog/font-face-chrome-rendering/

したがって、基本的には、フォントをsvg形式に変換し（ font squirrel のようなフォントコンバーターを使用して）、cssでメディアクエリを設定して、svgファイル形式がchromeのフォント宣言で最初に指定されるようにします。しかし、他のブラウザではそうではありません。

/* This is the default font face used for all browsers. */
@font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.eot');
src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
url('../../includes/fonts/chunk-webfont.woff') format('woff'),
url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),
url('../../includes/fonts/chunk-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}

/* This font face inherits and overrides the previous font face, but only for chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.svg') format('svg');
}

そしてほら。フォントは、アンチエイリアスを使用してChromeで動作します。

38
sboisse

この問題に関する大きな答えをここに書きました： Google Chromeに「フォントスムージング」はありますか？ 。投稿には、知っておく必要のあるすべてのものと、これを修正する方法が含まれています。これはGoogle Chromeの公式バグであり、ブラウザの開発者は既にそれを知っており、修正に取り組んでいます。

要するに、これをテキストルールに追加して、フォントの外観をより良くすることができます。

テキストストローク修正：

-webkit-text-stroke: 1px

または

-webkit-text-stroke: 1px rgba(0,0,0,0.1)

テキストシャドウトリック：

 text-shadow: #fff 0px 1px 1px;

または

 text-shadow: #333 0px 0px 1px; // for black text

font-smoothing-trick（上記と組み合わせて）：

-webkit-font-smoothing: antialiased;

注：これらは回避策であり、基本的な問題の本当の修正ではありません。

34
Sliq

これは、Chromeではなく、Windows 7/8の問題です。 Chromeは常に悪いレンダリングに使用されていました。しかし、ビルド37でそれを修正しました。しかし、Windowsフォントのレンダリング設定を受け入れます。再度適切にレンダリングするには、1つのTweakを作成してchromeを取得する必要があります。

この問題を修正するには、Windowsでクリアタイプフォントを設定し、パフォーマンスオプションでフォントスムージングを有効にする必要があります。

    • [スタート]メニューに移動します。

    • 「ClearTypeテキストの調整」を検索します。

    • clearTypeを有効にし、ウィザードを使用して設定を選択します。 （非常に簡単）これにより、次のステップのテキストレンダラーが設定されます。 （ClearTypeをセットアップしなくても、次のステップは機能しますが、ClearTypeはさらに良く見えます。）

    • スタートメニューに行きます

    • 「ウィンドウの外観とパフォーマンスを調整する」を検索する

    • これにより、「パフォーマンスオプション」画面が開きます。

    • 最初のタブ「視覚効果」に移動します

    • 「ウィンドウの選択」または「最適な外観」を選択した場合、問題ありません。ただし、最高のパフォーマンスを選択すると、アンチエイリアシングシステム全体が無効になります。ほとんどのブラウザ（Internet Explorerを含む）はこの設定を無視します。 Chromeではありません。

    • 再びオンにしますが、他のすべてのパフォーマンスオプションは「カスタム」のままにします。

    • リストの下部にある「スクリーンフォントの端を滑らかにする」の横にあるチェックボックスをオンにします

    • 当てはまる

クロームを閉じてから再度開きます。見栄えの良いテキストになります。

16
guymella

このブログによると： http://www.dev-metal.com/fix-ugly-font-rendering-google-chrome/

それはChrome 37で修正されます。彼は正しいです。私はChrome Canaryで試しました。

3
sboisse

フォントの太さを標準に設定するだけです。これでChromeの問題が解決したようです。

だから私のために働く私のCSSは次のとおりです：

h1.hero-title {
font-family: 'Typefacename', cursive;
font-size:7em;
-webkit-font-smoothing: antialiased;
font-weight:normal;

}

1
David Vaassen

Chromeは、代わりにテキストシャドウを使用する必要があるsvgでない場合、アンチエイリアスをサポートしません。

。selector {
 text-shadow：
 -1px -1px 0 #fff、
 1px -1px 0 #fff、
 -1px 1px 0 #fff、
 1px 1px 0 #fff; 
}
1
Deandré Thomas

私はこの正確な問題の解決策を数時間検索しましたが、最終的に私に役立つものを見つけたので、それをあなたと共有したいと思います。

Chrome：// flags /＃enable-direct-writeに移動します。DirectWriteが無効になっている場合は、有効にします。 DirectWriteが有効になっている場合は、無効にします。

私の場合、私はそれを有効にし、それはうまく機能しました。

乾杯

0
overRideKode