ウェブで明朝体をきれいに表示させる方法

Macはきれいに表示できる(アンチエイリアスがかかるため)
Windowsはきれいにでない、そのときのため
普通でも25px以上はかかるがそれ以下の場合は
HG明朝B系は19pxから、HG明朝E系はなんと13pxから

これがサンプルの明朝 (30px)
これがサンプルの明朝 (14px)

Officeに含まれている「HG」フォントです。リコーが作成したもので、実はMSフォントはマイクロソフトがリコーからラインセンスを受けて使用しているのです。両者に実質的な違いはありませんが、HGフォントには下図のように「行書体」や「ポップ体」など、MSフォントにはない種類の文字があります。HGフォントは9ポイントや10ポイントなどの比較的小さい文字でも、画面出力に関してはアウトラインフォントに対応していることです。アウトラインフォントとは、文字の輪郭を補間して滑らかに表示できるようにしたフォントです。(日経トレンディネット)

.text {
font-size: 30px;
line-height: 40px;
font-family: "ヒラギノ明朝 Pro W6","Hiragino Mincho Pro","HGS明朝E","MS P明朝",serif;
font-style: normal;
font-variant: normal;
font-weight: bold;
}
  • ヒラギノ明朝 Pro W6:MacのFirefox用
  • Hiragino Mincho Pro:MacのSafari用(日本語フォント名を処理できないので)
  • HGS明朝E:Windows用
  • MS P明朝:WindowsでOfficeが入っていない人用
  • serif:一般フォントも念のため

勉強させてもらったページ

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です