HTML【Windows】キレイな明朝体を! | WEBデザイナー 桑島 美夢

HTML【Windows】キレイな明朝体を!

ホームページで明朝体を使いたい。
いちいち、タイトルを画像で作るのもうやめてもいいのでは…
イマドキ、メニューが画像とか少なくなってきたと感じる今日この頃。

明朝体を使いたいと思う時の、一番の問題はWindowsでの表示。
ギザギザで荒い感じで表示されます。
(ドット画で無理に絵を描いたみたいな…もう80年代のゲームの様です。)

Windowsでアンチェイリアス(線を滑らかに表示)な明朝体を
実現させるCSSはコレ!

font-family: “游明朝”, YuMincho, “ヒラギノ明朝 ProN W3”, “Hiragino Mincho ProN”, “MS P明朝”, “MS 明朝”, serif;
transform: rotate(.03deg);
-webkit-transform: rotate(.03deg);

font-family はWindows、Mac、iosに搭載されている系を指定。

transform: rotate で要素を回転表示を加えてギザギザを力技で解消

-webkit-transform: はWindowsのSafariでの要素を回転表示のため
(WindowsでSafariをメインブラウザーにしている人ってどれぐらい?と思うが…)

お好みで、はっきりと明朝体を表示したい場合は
font-weight: 700; ぐらいを追加。

——————————————————-

明朝体表示にしてみました!!!!

——————————————————-
↑こうなります。

——————————————————-

明朝体表示にしてみました!!!!

——————————————————-
↑transform: rotateをせず明朝体にするとコレ
Windows8以下ぐらいで見て頂くと判ると思います。

ちなみに…。
Android は明朝体が実機に搭載されていないコトが多いので

Google Fonts + 日本語早期アクセス
https://googlefonts.github.io/japanese/

上記、さわらび明朝あたりをWEBフォントとして使って乗り切れ!!!

ホームページをWindowsで見た時にキレイな明朝体を!って今は書いているけど
いつかは、こういう事に動力を必要とせず、もっともっと思い通りの
デザインを作っていける様になるんだろうなぁー。