font-familyに游書体(游明朝/游ゴシック)を指定する

先日リリースされたOS X MavericksとWindows 8.1には、游書体の游明朝体と游ゴシック体が標準インストールされています。

游書体はMacOS Xの標準書体であるヒラギノシリーズの制作・監修を担当した有限会社字游工房が制作した書体で、2010年に全ファミリーが完成しています。これまでにも游書体は、Windows Phone7.5の日本語のシステムフォントとして、iOSではiBooks3.0のアプリ専用フォントとしても利用されています。

  • 字游工房_游書体ライブラリー_游明朝体ファミリーより

    游明朝体ファミリーは「時代小説が組めるような明朝体」をキーワードに、単行本や文庫などで小説を組むことを目的に開発した游明朝体Rを核とした明朝体ファミリーです。

    文字の大きさの揃った現代的な明るい漢字と、伝統的な字形を生かしたスタンダードなかなの組み合わせは、これまでの明朝体とは違う、游明朝体の大きな特徴です。

  • 字游工房_游書体ライブラリー_游ゴシック体ファミリーより

    游ゴシック体ファミリーは、游明朝体と一緒に使うことを想定して開発された、スタンダードな角ゴシック体ファミリーです。 ややフトコロがせまい漢字と、伝統的なスタイルを持ったすこし小さなかなの組み合わせが、このファミリーの大きな特徴です。

font-familyで指定する

游明朝体と游ゴシック体の游書体をWebで利用するには、font-familyで指定することで可能です。ただし、WindowsとMacとで表記が異なることから、厳密には異なるフォントのようです(参考:「游ゴシック」フォントと「Yu Gothic」フォントの違い / 2012年のお知らせ)。

游ゴシック体の場合

.sample{
	font-family : YuGothic, '游ゴシック', sans-serif;
}

英文字ファミリの場合、Windowsでは'Yu Gothic'と半角スペースが存在し、MacではYuGothicと英文字ファミリ名に半角スペースは存在しません。しかし、Windows版Chrome30では英文字ファミリ名が無効で日本語フォントファミリ名でしか認識できないため、Windows用には'游ゴシック'を加えます。

OSおよびUAによる認識の違いも考慮すると、上記のように指定をする必要があるようです。

游明朝体の場合

.sample{
	font-family : YuMincho, '游明朝', serif;
}

游ゴシック体の場合と同様ですが、英文字ファミリの場合、Windowsでは'Yu Mincho'と半角スペースが存在し、MacではYuMincho と英文字ファミリ名に半角スペースは存在しません。また、Windows版Chrome30では英文字ファミリ名が無効で日本語フォントファミリ名でしか認識できないため、こちらもWindows用には'游明朝'を加えます。

OSおよびUAによる認識の違いも考慮すると、上記のように指定をする必要があるようです。

Updated / Published