0

Chrome を搭載した Windows 8 では、大きなテキスト フォントは滑らかではありません。しかし、滑らかなテキスト（同じ環境）を持ついくつかのWebサイトを見ることができました。

最初: http://twitter.github.com/bootstrap/examples/hero.html

「ハロー、ワールド！」は滑らかですが、下部の「見出し」テキストは、小さくても、ご覧のとおり滑らかではありません。
ここに画像の説明を入力

もう 1 つはhttp://www.asana.comです。彼らのホームページでは、「Do Great Things」というテキストは滑らかです。
ここに画像の説明を入力

現在、両方のページで Twitter Bootstrap CSS が使用されています。

Chrome 開発者ツールで関連する html 要素の計算されたスタイルを見ると、次の値が表示されます。

background-color: transparent;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
color: #333;
display: block;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 60px;
font-weight: bold;
height: 60px;
letter-spacing: -1px;
line-height: 60px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 10px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
text-rendering: optimizelegibility;
width: 1050px;

Asana が proxima-nova-condensed というフォントを使用しているのを見ましたが、それを使用すると、テキスト レンダリングを使用しても滑らかではありません: optimizelegibility です。

彼らがどのようにそれを達成するかについて何か考えがありますか? Twitter Bootstrap を使用せずに (または、必要に応じて Bootstrap を使用して) どうすればそれができるかを学びたいと思います。

4

1 に答える 1

1

フォントのレンダリングはさまざまです。レンダリングをよく見ると（たとえば、スクリーンキャプチャを取得してピクセルを拡大すると）、スムージングに変化があることがわかります。（一部Mac環境を除いて）できることはあまりないので、さまざまなプラットフォームやブラウザでテキストが許容できるように見えるかどうかをテストできます。

于 2013-01-08T17:15:11.973 に答える