こんにちは、＠tacashionです。
前回に引き続き、レトロホームページをモダンめに再現してみよう、というテーマで書きたいと思います。
あの、懐かしい大文字タイトル
昔のホームページでありがちなことといえば”大文字のタイトル“。
「tacashion★のほ〜むぺ〜じ」など、画像を使わず、文字を大きく表示させてタイトルにしていました。
微妙なこれじゃない感
この大きめの文字、この色、この斜体、なかなかそれっぽい感じ★
しかし、（十分古めかしい中にも）どことなく感じるモダン感…。
何がいけないんだろうと考えていると、1つ、今と昔で違う点がありました。
文字がギザギザしていない！
なめらか……
少し前までは、webサイトの文字というのはアンチエイリアス（曲線や斜線部分に中間色を使って滑らかに見えるようにする）処理がなく、ギザギザというか、ドットがわかるような表示でした。
なるほど、違和感の正体はギザギザか……。
と、気づいたまでは良いものの、どうすれば良いんでしょう。今のブラウザだと勝手にアンチエイリアス処理がかかるし、photoshopで処理なしにして貼り付けるか…、いや、それではCSS3で再現することにならないし。。
-webkit-font-smoothing: none; があった！
あえてアンチエイリアスをなくす方法なんてあるのかなー、と思いつつダメ元で調べてみたらなんとありました！
css
-webkit-font-smoothing: none;
これでアンチエイリアス処理が打ち消されるとのこと。
早速トライしました！
ギザギザした！ ＞表示サンプル
ついでにフォントの種類をOsakaやMSゴシックを指定するなど、なるべく昔の雰囲気を醸し出すようにしました。
今回使ったCSSプロパティまとめ
css
font-family: "MS PGothic", "ＭＳ Ｐゴシック", "Osaka", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", Helvetica, Arial, sans-serif;/* レトロな書体を優先 */
-webkit-font-smoothing: none;/* テキストのアンチエイリアスをなくす（ギザギザさせる） */
注意点
ただ、今回使用した“-webkit-font-smoothing“は、mac・iOSのブラウザでしか処理されないようなんです。残念…。