スタイルシートで、たまにこういう指定をしているサイトを見る。

  font-family:"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic,
              "メイリオ", Meiryo, sans-serif;

Mac/iOS向けにヒラギノ、Win10向けに游ゴシック、7向けにメイリオ、それ以外はゴシック体、ということなんだろう。
これに小塚ゴシックを加えたものを仕事の前任者が使ってたので、考えずに小塚を外してそのまま使ってたけど……
(作業環境はWin7)

最近MicrosoftさんがOfficeユーザー向けの游ゴシック/明朝フォントパックを配布開始した模様なので、早速導入してみた。
ところが、メイリオ環境でデザインしているのだから、まぁ意図しない見栄えになった。
適用されたサイトが行の高さの影響で縦の長さが変わり、フォント自体も文字が細いジャギがひどいと大変見づらい。
Win10ではこの環境でみえてるのか……と軽くショックを受けた。

フォントが見づらい原因はWindowsのフォントレンダリングが残念な点で、改善するソフトを入れれば解決するんだけど、
webページを作るという立場上自分だけ改善しても仕方ないので、とりあえず游ゴシックの指定は避けることにした。

  font-family:"メイリオ", Meiryo,"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",
              sans-serif;

自分がつくったページはこれで解決、ただ他のサイトは見づらいままなので、さらにユーザースタイルシートを設定。
(僕はコレを使ってます→ Chrome拡張「Stylebot」)
オプションのglobal Stylesheetに下記を設定、Enable Global Stylesheetを押して有効化。

@font-face {
  font-family:"YuGothic";
  src:local("Meiryo UI");
}
@font-face {
  font-family:"游ゴシック";
  src:local("メイリオ");
}

とりあえずこれで対処完了にした。

Leave a reply

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> 

required

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください