Webブラウザにおける文字のアンチエイリアスの現状の最適解｜dwango creators' blog（ドワンゴクリエイターズブログ）
Winでは基本的にフォントレンダリングをCSSで制御することは出来ません。また、スマートフォンのブラウザもほとんど制御できず、基本的にグレースケールで表示されることが多いようでした。 MacではSafariのみがグレースケールですね、これが原因で「Safariで文字が細く見えてしまう」現象が起こっています。 デバイスのdpiによる見え方 このまま各ブラウザでアンチエイリアスを揃える設定しても良いのですが、1x, 2xの解像度による見え方を見ていきましょう。(今回はThunderbolt Display = 109ppi, MBP Retina Display = 220ppiで検証・比較。実際に表示した画面をスマホのカメラで加工が無いようにして撮りました。) 109ppi(Thunderbolt Display) 220ppi(MBP Retina Display) 以下のことがわかります
font-smoothingで文字の野暮ったさとサヨナラして、font-smoothingの謎とコンニチハした - Qiita
このように設定してやると、 上の画像のようになります。 指定をかけた下の一文は、ご覧のように細めでキリッとして知的な印象になります。ちなみにベンダープレフィックスによって違う値が設定されていますが、結果は一緒（のはず）です。ここではフォントの色は#333333、サイズは16pxを指定しています。 何が起こってるの？ 拡大するとこのようになります。 デフォルトの方は横方向のサブピクセルが青/オレンジ系の色になっているのに対して、font-smoothingをかけた方はグレーになっています。-moz-…の値の名のとおり「グレースケール」になっているわけですね。 そしてよく見ていただきたいのが「ア」の上の棒。デフォルトでは中心部が指定した色に近いのに対し、font-smoothingの指定をかけた方は色が薄くなっています。つまりこれは、 これは… ん？ これって 実際に細めにレンダリングをしてる
CSSで見出し固定＋レスポンシブ対応の表を作成
CSSで見出し固定＋レスポンシブ対応の表を作成料金表やサービスプランの比較、タイムテーブルなどなど、使う場面が多い割には制限も多く、初心者には少しとっつきにくいと思われがちな表。今回はあると便利な表の見出し固定やレスポンシブ対応の方法を紹介します。 見出しの行を固定する表の中の行が増えてくると、スクロールした時に表の見出しが画面から見えなくなり、なんの値だったのかがわかりづらくなります。そんな時のために、行数の多い表では一番上にくる見出しの行を固定しておくといいですね。 まずはベーシックな表を作成します。table タグに border-collapse: collapse; を指定することで、セル間のスペースがなくなってフラットな見た目になりますよ。 HTML <table> <tr class="heading"> <th>車体名</th> <th>価格</th> <th>燃費</th
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
