CSS で游明朝体、游ゴシック体を指定する。Light から Bold まで

CSS / Less 文字のこと

Windows 8.1 や OS X 10.9 Mavericks には字游工房の游明朝体、游ゴシック体が入っている。さっそく Web ページに使うべく CSS で指定できる名前を調べた。テストコードはこちら。

結論

結論としては次のように指定すればよい。「游明朝」「游ゴシック」が Windows 用、「YuMincho」「YuGothic」が Mac 用となる。

font-family: "游明朝", "YuMincho", serif;
font-family: "游ゴシック", "YuGothic", sans-serif;

ウェイトの指定

Windows では一部のブラウザを除いて 3 種類あるウェイトを font-weight: 100〜900 で指定できる。

  • 100〜300: 游明朝 Light / 游ゴシック Light
  • 400〜500: 游明朝 Regular / 游ゴシック Regular
  • 600〜900: 游明朝 Demibold / 游ゴシック Bold

この指定ができない Chrome や Opera など Blink エンジンを搭載したブラウザでは、font-family にウェイトを含めた指定ができるのでこれを併用する。

/* 游明朝体 Light/Medium */
font-family: "游明朝 Light", "游明朝", "YuMincho", serif;
font-weight: 200;

/* 游明朝体 Regular/Medium */
font-family: "游明朝", "YuMincho", serif;
font-weight: normal;

/* 游明朝体 Demibold */
font-family: "游明朝", "YuMincho", serif;
font-weight: bold;

/* 游ゴシック体 Light/Medium */
font-family: "游ゴシック Light", "游ゴシック", "YuGothic", sans-serif;
font-weight: 200;

/* 游ゴシック体 Regular/Medium */
font-family: "游ゴシック", "YuGothic", sans-serif;
font-weight: normal;

/* 游ゴシック体 Bold */
font-family: "游ゴシック", "YuGothic", sans-serif;
font-weight: bold;

Mac では単に normal/bold を指定すればよい。

レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック