2015年10月3日

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

OS X El Capitanに新しく追加された日本語フォント、「クレー」「筑紫A丸ゴシック」「筑紫B丸ゴシック」「游明朝体+36ポかな」の4種類と、ウェイトが増えた「ヒラギノ角ゴシック」を、CSSを使ってウェブページ上で指定してみました。

サンプルのフォントを正しく表示するには、El CapitanをインストールしたMacでご覧ください。

font-family: Klee; font-weight: normal;
クレー ミディアム
font-family: Klee; font-weight: bold;
クレー デミボールド
font-family: 'Hiragino Sans'; font-weight: 100;
ヒラギノ角ゴシック W0
font-family: 'Hiragino Sans'; font-weight: 200;
ヒラギノ角ゴシック W1
font-family: 'HiraginoSans-W2'; font-weight: 200;
ヒラギノ角ゴシック W2
font-family: 'Hiragino Sans'; font-weight: 300;
ヒラギノ角ゴシック W3
font-family: 'Hiragino Sans'; font-weight: normal;
ヒラギノ角ゴシック W4
font-family: 'Hiragino Sans'; font-weight: 500;
ヒラギノ角ゴシック W5
font-family: 'Hiragino Sans'; font-weight: 600;
ヒラギノ角ゴシック W6
font-family: 'Hiragino Sans'; font-weight: bold;
ヒラギノ角ゴシック W7
font-family: 'Hiragino Sans'; font-weight: 800;
ヒラギノ角ゴシック W8
font-family: 'Hiragino Sans'; font-weight: 900;
ヒラギノ角ゴシック W9
font-family: 'Tsukushi A Round Gothic'; font-weight: normal;
筑紫A丸ゴシック レギュラー
font-family: 'Tsukushi A Round Gothic'; font-weight: bold;
筑紫A丸ゴシックボールド
font-family: 'Tsukushi B Round Gothic'; font-weight: normal;
筑紫B丸ゴシック レギュラー
font-family: 'Tsukushi B Round Gothic'; font-weight: bold;
筑紫B丸ゴシック ボールド
font-family: 'YuMincho +36p Kana'; font-weight: normal;
游明朝体+36ポかな ミディアム
font-family: 'YuMincho +36p Kana'; font-weight: bold;
游明朝体+36ポかな デミボールド

従来の「ヒラギノ角ゴ ProN」のウェイトは、ノーマルで「W3」、ボールドで「W6」でしたが、「ヒラギノ角ゴシック」では、それぞれ「W4」と「W7」になるので、従来より若干太くなります。

また、watchOSやiOS 9と同様、El Capitanでも新しくシステムフォントに採用された「San Francisco」も指定してみました。ただし、こちらはSafariでしか表示できません。一部はiOS 9でも表示可能です。

font-family: -apple-system; font-weight: 100;
SF UI Display Ultralight
font-family: -apple-system; font-weight: 200;
SF UI Display Thin
font-family: -apple-system; font-weight: 300;
SF UI Display Light
font-family: -apple-system; font-weight: normal;
SF UI Display Regular
font-family: -apple-system; font-weight: 500;
SF UI Display Medium
font-family: -apple-system; font-weight: 600;
SF UI Display Semibold
font-family: -apple-system; font-weight: bold;
SF UI Display Bold
font-family: -apple-system; font-weight: 800;
SF UI Display Heavy
font-family: -apple-system; font-weight: 900;
SF UI Display Black

ちなみに、昔のMacには、「Chicago」や「Geneva」、「Osaka」など、都市名が付けられたフォントが入っていましたが、「San Francisco」もこの流れに沿っているようです。

0 件のコメント: