[フォント] OSごとの游ゴシック体に関する覚書

2 min read

OS にあるフォントファミリー

OS 搭載の游書体について
Windows や Macintosh の OS に搭載されている游書体フォントは弊社製品版とは一部異なります。

搭載フォント名や文字セット、製品版との互換性につきましては以下をご確認ください。
OS 搭載の游書体一覧 PDF > 字游工房| JIYUKOBO | OS 搭載の游書体について:

Windows

Windows 8.1

  • 游ゴシック Light / Regular / Bold

Windows 10

  • 游ゴシック Medium
  • Yu Gothic UI

その他

Windows 7 ~ 8.1 においても、フォントパックで Windows 10 と同様の游ゴシックは使用可能


macOS

OS X 10.9 (Mavericks)

  • 游ゴシック Medium / Bold

OS にインストールされているウェイト

各 OS にインストールされている游ゴシックのウェイト

ウェイトWindows 8.1Windows 10macOS
Light-
Regular-
Medium--
Bold

CSS の font-weight と対応するウェイト

font-weight游ゴシックのウェイト
300 / lightLight
400 / normalRegular
500 / mediumMedium
700 / boldBold

Windows で游ゴシックが細くなる問題

font-family: "Yu Gothic", YuGothic, sans-serif; /* Windows, macOS */

上記のようにフォントを指定すると、Windows は Regular、macOS は Medium が適応される。(font-weight:normal)

独自のフォントファミリーを定義する

@font-faceで環境依存を考慮したフォントファミリーを定義する。

@font-face {
  font-family: "YuGoMedium";
  font-weight: normal;
  src: local("YuGothic-Medium"), local("Yu Gothic Medium");
}

@font-face {
  font-family: "YuGoMedium";
  font-weight: bold;
  src: local("YuGothic-Bold"), local("Yu Gothic");
}

html {
  font-family: YuGoMedium, YuGothic, sans-serif;
}

Medium がない環境の場合は綺麗に表示ができないので、local("YuGothic-Regular")を追加する必要がある。