ブラウザーでフォントをレンダリングしているときに、深刻なアンチエイリアスの問題に直面しています。花火でデザインに取り組んだときはすべてクールに見えますが、html/テキストとして使用してブラウザーで表示すると、非常にギザギザになり、私がテストしたすべての主要なブラウザーで醜い。ここでは 2 つのフォントを使用しています。明るい方は'Segoe UI Light'、太い方はRoboto Slab:
私はインターネットとSOを検索し、これを解決するためのいくつかのトリックを見つけましたが、ここではうまくいきませんでした.CSSでそれらを見ることができます.
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700' rel='stylesheet' type='text/css'>
in .CSS
body {
background-position: right;
background-position: top;
background-repeat: no-repeat;
font-family: 'Segoe UI Light', 'Century Gothic', Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
margin: 0;
padding: 0;
font-weight: normal;
-webkit-font-smoothing: antialiased;
font-smooth: always;
text-shadow: #eee 0px 1px 1px;
-webkit-text-stroke: 1px;
-webkit-font-smoothing: subpixel-antialiased;
}
nav ul {
margin: 0px;
padding: 0px;
width: 100%;
font-family: 'Roboto Slab','Segoe UI Light', 'Century Gothic', Verdana, Arial, Helvetica, sans-serif;
font-size: 19px;
text-align: center;
list-style-type: square;
}
nav li {
color: #FFF;
display: block;
float: left;
height: 36px;
text-transform: uppercase;
width: 200px;
margin: 15px 0 0 0;
}