Palm84 某所の日記

有為のクマにかくれり～

トップ > フォント > 源ノ角ゴシック (Source Han Sans) の font-family 指定テスト

源ノ角ゴシック (Source Han Sans) の font-family 指定テスト

フォント HTML

人気沸騰中の当フォントですが、環境によって表示に差異がありますればな話でござる。

それぞれこんなかんじで指定してみました。

  1. 源ノ角ゴシック - font-family:'源ノ角ゴシック';
  2. Source Han Sans - font-family:'Source Han Sans';
  3. 源ノ角ゴシック xxx - font-family:'源ノ角ゴシック Regular';
  4. Source Han Sans xxx - font-family:'Source Han Sans Regular';
  5. SourceHanSans-xxx - font-family:'SourceHanSans-Regular';
  6. '源ノ角ゴシック Regular','源ノ角ゴシック'
    • font-family:'源ノ角ゴシック Regular','源ノ角ゴシック';

Windows 7 Home 64bit 上の各ブラウザに確認...

  • IE11 - デフォルト
  • Firefox30 - ハードウェアアクセレーション無効
  • Firefox30 (ha) - ハードウェアアクセレーション有効（デフォルト）
  • Chrome36 - デフォルト
  • Chrome36 (dw) - DirectWrite 有効

結果が以下のとおり。

IE11Firefox30Firefox30 (ha)Chrome36Chrome36 (dw)
源ノ角ゴシック○△ (bold)○×○
Source Han Sans○△ (bold)○×○
源ノ角ゴシック xxx○○×○×
Source Han Sans xxx×○×○×
SourceHanSans-xxx×××○×
1. 源ノ角ゴシック Regular
2. 源ノ角ゴシック		○○○○○

てなわけで、6番目の指定が無難かなと愚行いたす次第。されど、あくまでウチ環のみでの確認なので完全ではござらぬかと。

【2014.7.26追記】font-weight の指定

IE11 と DirectWrite 有効な Firefox では、font-weight で太さの指定 (100,300,400,500,700,900) ができました。

スクリーンショット

  • Windows 7 IE11

source_han_sans_all_7_ie11

  • Windows 7 Firefox30 ハードウェアアクセレーション無効

source_han_sans_all_7_firefox30_nonha

  • IE11

  • Firefox30 ハードウェアアクセレーション無効

source_han_sans_7_firefox30_nonha_test

  • Firefox30 ハードウェアアクセレーション有効（デフォルト）

  • Chrome36 デフォルト

source_han_sans_7_chrome36_default_test

  • Chrome36 DirectWrite 有効

  • MacType + Firefox30 （無指定は「やさしさゴシック」）

CSS表示テスト

源ノ角ゴシック CSS指定テスト
font-familyあいお漢字Windows \ ゼロOiIlQプブ
無指定 あいお 葛噌 Windows \ 0 O iI l Q プブ
源ノ角ゴシック あいお 葛噌 Windows \ 0 O iI l Q プブ
Source Han Sans あいお 葛噌 Windows \ 0 O iI l Q プブ
源ノ角ゴシック Regular あいお 葛噌 Windows \ 0 O iI l Q プブ
Source Han Sans Regular あいお 葛噌 Windows \ 0 O iI l Q プブ
SourceHanSans-Regular あいお 葛噌 Windows \ 0 O iI l Q プブ
1. 源ノ角ゴシック Regular
2. 源ノ角ゴシック		 あいお 葛噌 Windows \ 0 O iI l Q プブ
1. Source Han Sans Medium
2. 源ノ角ゴシック		 あいお 葛噌 Windows \ 0 O iI l Q プブ
源ノ角ゴシック JP CSS指定テスト
font-familyあいお漢字Windows \ ゼロOiIlQプブ
無指定 あいお 葛噌 Windows \ 0 O iI l Q プブ
源ノ角ゴシック JP あいお 葛噌 Windows \ 0 O iI l Q プブ
Source Han Sans JP あいお 葛噌 Windows \ 0 O iI l Q プブ
源ノ角ゴシック JP Regular あいお 葛噌 Windows \ 0 O iI l Q プブ
Source Han Sans JP Regular あいお 葛噌 Windows \ 0 O iI l Q プブ
SourceHanSansJP-Regular あいお 葛噌 Windows \ 0 O iI l Q プブ
1. 源ノ角ゴシック JP Regular
2. 源ノ角ゴシック JP		 あいお 葛噌 Windows \ 0 O iI l Q プブ
1. Source Han Sans JP Medium
2. 源ノ角ゴシック JP		 あいお 葛噌 Windows \ 0 O iI l Q プブ

ほな…