BOKENOTE

AboutBlog

大阪住み道産子リーマンのWEB備忘録的な日記的なふわっとしたメモブログです。
本当に個人的な備忘録なので何かを主張したいとかは無い。

Tag

スポンサーサイト

スポンサー広告

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Windows系のフォントにCSSでアンチエイリアスをかける方法を最近知った

WEB備忘録

明朝体がすごくで好きでサイトを作る時によく検討するんだけど、MS系の明朝体が汚くて、どうにかできないかずっと気になってた。最近になって、CSSでアンチエイリアスをかける方法を知ったから備忘録として残しておきます。ゴシック体でも使えます。

1-transform: rotate;を使うパターン

アンチエイリアスあり

この文字は20pxです。

この文字は18pxです。

この文字は16pxです。

この文字は14pxです。

この文字は12pxです。

この文字は10pxです。

アンチエイリアスなし

この文字は20pxです。

この文字は18pxです。

この文字は16pxです。

この文字は14pxです。

この文字は12pxです。

この文字は10pxです。

HTML

<p class="antialias_1">この文字は....<p>

CSS

.antialias_1 {
   font-family: "MS P明朝", "MS 明朝", serif;
   -o-transform: rotate(0.028deg);
   -ms-transform: rotate(0.028deg);
   -moz-transform: rotate(0.028deg);
   -webkit-transform: rotate(0.028deg);
   transform: rotate(0.028deg);
}

transform: rotateで微妙に文字を傾けてます。Chromeだと12pxあたりから線が細くなり可読性が低下しますが、それ以外は游明朝並に綺麗です。

position: absolute;している要素に適用させると適用させた要素が下の要素に隠れてしまう場合があり、z-indexでも制御できませんでした。適用させたい文字をspanなどで囲ってそこに適用させるなど、文字以外が傾かないよう工夫したしたほうがベターだと思います。

2-transform: scale;を使うパターン

アンチエイリアスあり

この文字は20pxです。

この文字は18pxです。

この文字は16pxです。

この文字は14pxです。

この文字は12pxです。

この文字は10pxです。

アンチエイリアスなし

この文字は20pxです。

この文字は18pxです。

この文字は16pxです。

この文字は14pxです。

この文字は12pxです。

この文字は10pxです。

HTML

<p class="antialias_2">この文字は....<p>

CSS

.antialias_2 {
   font-family: "MS P明朝", "MS 明朝", serif;
   -webkit-transform: scale(1,1.001);
   -moz-transform: scale(1,1.001);
   -ms-transform: scale(1,1.001);
   -o-transform: scale(1,1.001);
   transform: scale(1,1.001);
}

transform: scaleで微妙に縦幅を変えています。transform: rotateを使うより効きが弱く、16pxあたりから文字が潰れて画数の多い漢字にちょっと厳しい感じでした。見出し等に使うのがベストだと思います。

他にtext-shadowをかけて綺麗に見せる方法もありましたが、正直微妙でした。

大変勉強になりました。

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。