2016年9月22日

macOS Sierraで追加された日本語フォントをCSSで指定する

macOS Sierra(v10.12)に新しく追加された日本語フォント、「凸版文久ゴシック」「凸版文久見出しゴシック」「凸版文久明朝」「凸版文久見出し明朝」「游教科書体」「游教科書体 横用」の6種類を、CSSを使ってウェブページ上で指定してみました。

サンプルのフォントを正しく表示するには、macOS SierraのSafariでご覧ください。

font-family: 'Toppan Bunkyu Gothic'; font-weight: normal;
凸版文久ゴシック レギュラー
font-family: 'Toppan Bunkyu Gothic'; font-weight: bold;
凸版文久ゴシック デミボールド
font-family: 'Toppan Bunkyu Midashi Gothic'; font-weight: bold;
凸版文久見出しゴシック エクストラボールド
font-family: 'Toppan Bunkyu Mincho'; font-weight: normal;
凸版文久明朝 レギュラー
font-family: 'Toppan Bunkyu Midashi Mincho'; font-weight: bold;
凸版文久見出し明朝 エクストラボールド
font-family: YuKyokasho; font-weight: normal;
游教科書体 ミディアム
font-family: YuKyokasho; font-weight: bold;
游教科書体 ボールド
font-family: 'YuKyokasho Yoko'; font-weight: normal;
游教科書体 横用 ミディアム
font-family: 'YuKyokasho Yoko'; font-weight: bold;
游教科書体 横用 ボールド

画像をクリックして拡大

Chromeでは、凸版文久の見出しゴシック、明朝、見出し明朝は正しく表示されますが、それ以外は正しく表示されません。font-familyを日本語やPostScript名で指定しても、同じです。

El Capitanで追加されたフォント(クレーなど)に関しては、El CapitanのChromeでは全て正しく表示されますが、SierraのChromeでは「ヒラギノ角ゴシック」以外は正しく表示されません。SafariとFirefoxでは、Sierra、El Capitanのどちらでも正しく表示されます。

指定の仕方が悪いのか、SierraのChrome、それも一部のフォントだけ、正しく表示されません。

0 件のコメント: