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

2016/11/03

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 と同様の游ゴシックは使用可能

Download 游ゴシック游明朝フォントパック from Official Microsoft Download Center:

macOS

OS X 10.9 (Mavericks)

游ゴシック Medium / Bold

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

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

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

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

font-weight	游ゴシックのウェイト
300 / light	Light
400 / normal	Regular
500 / medium	Medium
700 / bold	Bold

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")を追加する必要がある。

Edit on GitHub