モダン日本語フォント指定

339ae9d7dfa4cbfc3e907ab5fbee9e93?s=47 tacamy
October 17, 2016

 モダン日本語フォント指定

CSSのfont-familyで游ゴシックを指定すると、Windowsで細くなってしまう問題の原因と解決方法を中心として、最近の日本語フォント事情をまとめました。

CSS Nite LP47 Coder's High 2016にてお話した内容です。

昔からマークアップエンジニアを悩ませてきたfont-familyによる日本語フォント指定。OSのバージョンアップとともに、新しいバンドルフォントが増え、@font-face規則も主要なブラウザでサポートされました。それに合わせてフォント指定の方法もバージョンアップしてみましょう。

Web上できれいに見える日本語フォントを使う方法としてWebフォントがありますが、実際に使うにはさまざまな障壁があります。かといってバンドルフォントはOSによってまちまち……という状況だったところに、WindowsとMac OSの両方に「游ゴシック」という日本語フォントがバンドルインストールされました。

しかし、font-familyに游ゴシックを指定してみると、Mac OSだとちょうどいいのにWindowsだと細すぎると感じたことはないでしょうか?その謎の解明とともに、@font-faceをつかったローカルフォント指定の解説とはまりドコロを紹介します。これで日本語フォント指定に迷わなくなる、かも?

339ae9d7dfa4cbfc3e907ab5fbee9e93?s=128

tacamy

October 17, 2016
Tweet

Transcript

  1. 4.
  2. 6.
  3. 7.
  4. 15.

    8JOEPXT w 8JOEPXTʙ w ᕟΰγοΫ-JHIU3FHVMBS#PME͕௥Ճʢ:V(PUIJDʣ w 8JOEPXTʙ w ᕟΰγοΫ.FEJVN͕௥Ճ w

    :V(PUIJD6*͕௥ՃʢγεςϜϑΥϯτʣ w 8JOEPXTʙ΋ᕟΰγοΫᕟ໌ேϑΥϯτύοΫͰ
 8JOEPXTͱಉ͡ᕟΰγοΫηοτ͕࢖͑Δ ˞ʢʣ಺͸ϑΥϯτϑΝϛϦʔ໊
  5. 16.

    049 w 049ʙ w ᕟΰγοΫ.FEJVN#PME͕௥Ճʢ:V(PUIJDʣ w 049ʙ w 4BO'SBODJTDP͕௥ՃʢγεςϜϑΥϯτʣʢBQQMFTZTUFNʣ w

    ώϥΪϊ֯ΰγοΫͷ΢ΤΠτ͕૿͑Δʢ)JSBHJOP4BOTʣ w )JSBHJOP,BLV(PUIJD1SP/8PS8 w )JSBHJOP4BOT8ʙ8ͷஈ֊
  6. 19.

    04ผ͓͢͢ΊϑΥϯτ w 8JOEPXT w ᕟΰγοΫPSϝΠϦΦ w 049 w 4BO'SBODJTDP ώϥΪϊPSᕟΰγοΫ

    w J04 w 4BO'SBODJTDP ώϥΪϊ w "OEPSJE w TBOTTFSJG ࢦఆ͠ͳ͍ͱ$ISPNFͱ'JSFGPYͷ σϑΥϧτ͕.41ΰγοΫʹʜʜ ώϥΪϊͷӳ਺ΑΓ΋ 4BO'SBODJTDPͷํ͕ΩϨΠ 049ͱಉ༷ 04΍ػछɺݸਓ؀ڥ͝ͱʹϑΥϯτ͕όϥόϥͷͨΊ γεςϜϑΥϯτʹ·͔ͤͯࢦఆ͸ͳΔ΂͘ආ͚͍ͨ
  7. 21.
  8. 29.
  9. 32.

    GPOUXFJHIUͷ஋ͱ ద༻͞ΕΔ΢ΤΠτ $44ͷ GPOUXFJHIU ᕟΰγοΫͷ ΢ΤΠτ 8JOEPXT  8JOEPXT 

    049  SJHIU -JHIU ˓ ˓   OPSNBM 3FHVMBS ˓ ˓   NFEJVN .FEJVN ˓  ˓  CPME #PME ˓ ˓ ˓
  10. 39.
  11. 46.

    !GPOUGBDFͰσϑΥϧτ͕ ᕟΰγοΫ.FEJVNʹͳΔΑ͏ࢦఆ @font-face {
 font-family: "MyYuGothicM";
 font-weight: normal;
 src: local("YuGothic-Medium");

    /* Postscript name */
 }
 @font-face {
 font-family: "MyYuGothicM";
 font-weight: bold;
 src: local("YuGothic-Bold"); /* Postscript name */
 }
 html {
 font-family: MyYuGothicM, YuGothic, sans-serif;
 } 8JOEPXT 049
  12. 48.
  13. 50.
  14. 52.
  15. 57.

    $ISPNFʹରԠ @font-face {
 font-family: "MyYuGothicM";
 font-weight: normal;
 src: local("YuGothic-Medium"), /*

    Postscript name */
 local("Yu Gothic Medium"); /* for Chrome */
 }
 @font-face {
 font-family: "MyYuGothicM";
 font-weight: bold;
 src: local("YuGothic-Bold"), /* Postscript name */
 local("Yu Gothic"); /* for Chrome */
 }
  16. 61.

    GPOUXFJHIUʹର͢Δ ᕟΰγοΫͷ΢ΤΠτ $44ͷ GPOUXFJHIU ᕟΰγοΫͷ ΢ΤΠτ 8JOEPXT  8JOEPXT 

    049  OPSNBM 3FHVMBS ˓ ˓   NFEJVN .FEJVN ˓  ˓  CPME #PME ˓ ˓ ˓
  17. 62.

    8JOEPXTରԠͷ࠷ऴ൛ @font-face {
 font-family: "MyYuGothicM";
 font-weight: normal;
 src: local("YuGothic-Medium"), /*

    Postscript name */
 local("Yu Gothic Medium"), /* for Chrome */
 local("YuGothic-Regular"); /* Medium͕ͳ͍৔߹ */
 }
 @font-face {
 font-family: "MyYuGothicM";
 font-weight: bold;
 src: local("YuGothic-Bold"), /* Postscript name */
 local("Yu Gothic"); /* for Chrome */
 }
  18. 63.
  19. 64.
  20. 65.

    ຊ౰͸͢΂ͯͷ΢ΤΠτʹࢦఆͨ͠ํ͕ ҆શͰ͸͋Δ͚Ͳ͜͏ͳΔ @font-face { font-family: "MyYuGothicM"; font-weight: 100; src: local("YuGothic-Light"),

    local("Yu Gothic Light"); } @font-face { font-family: "MyYuGothicM"; font-weight: 200; src: local("YuGothic-Light"), local("Yu Gothic Light"); } @font-face { font-family: "MyYuGothicM"; font-weight: 300; src: local("YuGothic-Regular"), local("Yu Gothic"); } @font-face { font-family: "MyYuGothicM"; font-weight: 400; src: local("YuGothic-Medium"), local("Yu Gothic Medium"), local("YuGothic-Regular"); } @font-face { font-family: "MyYuGothicM"; font-weight: 500; src: local("YuGothic-Medium"), local("Yu Gothic Medium"), local("YuGothic-Regular"); } @font-face { font-family: "MyYuGothicM"; font-weight: 600; src: local("YuGothic-Bold"), local("Yu Gothic"); } @font-face { font-family: "MyYuGothicM"; font-weight: 700; src: local("YuGothic-Bold"), local("Yu Gothic"); } @font-face { font-family: "MyYuGothicM"; font-weight: 800; src: local("YuGothic-Bold"), local("Yu Gothic"); } @font-face { font-family: "MyYuGothicM"; font-weight: 900; src: local("YuGothic-Bold"), local("Yu Gothic"); }
  21. 67.

    .Z:V(PUIJD.ͷఆٛʢڞ௨ʣ @font-face { font-family: "MyYuGothicM"; font-weight: normal; src: local("YuGothic-Medium"), /*

    Postscript name */ local("Yu Gothic Medium"), /* for Chrome */ local("YuGothic-Regular"); /* Medium͕ͳ͍৔߹ */ } @font-face { font-family: "MyYuGothicM"; font-weight: bold; src: local("YuGothic-Bold"), /* Postscript name */ local("Yu Gothic"); /* for Chrome */ }
  22. 68.

    ࠷৽ͷγεςϜϑΥϯτʹدͤΔ w 8JOEPXT w ᕟΰγοΫ ϝΠϦΦ TBOTTFSJG w 049 w

    4BO'SBODJTDP ώϥΪϊ ώϥΪϊ TBOTTFSJG w J04 w 4BO'SBODJTDP ώϥΪϊ ώϥΪϊ TBOTTFSJG w "OEPSJE w TBOTTFSJG
  23. 69.

    049ͷछྨͷώϥΪϊ w )JSBHJOP,BLV(PUIJD1SP/ʢʙ049ʣ w 8PS8ͷஈ֊ͷ΢ΤΠτ w )JSBHJOP4BOTʢ049ʙͰ௥Ճʣ w ΢ΤΠτ͕8ʙ8ͷஈ֊ʹ૿͑ͨ w

    GPOUGBNJMZ)JSBHJOP4BOT͢Δͱ
 OPSNBM࣌ʹ8ɺCPME࣌ʹ8ͱ͜Ε·ͰΑΓଠ͘ͳΔ w ͜Ε·Ͱ௨Γɺ)JSBHJOP,BLV(PUIJD1SP/͕Αͦ͞͏
  24. 70.

    html { font-family: -apple-system, /* OS X, iOS San Francisco

    */ BlinkMacSystemFont, /* OS X, iOS Chrome San Francisco */ "Hiragino Kaku Gothic ProN", /* OS X, iOS ώϥΪϊ */ MyYuGothicM, /* Windows ᕟΰγοΫ */ Meiryo, /* Windows ϝΠϦΦ */ sans-serif; }
  25. 71.

    ᕟΰγοΫϝΠϯͷࢦఆ w 8JOEPXT w ᕟΰγοΫ ϝΠϦΦ TBOTTFSJG w 049 w

    ᕟΰγοΫ 4BO'SBODJTDP ώϥΪϊ ώϥΪϊ TBOTTFSJG w J04 w 4BO'SBODJTDP ώϥΪϊ ώϥΪϊ TBOTTFSJG w "OEPSJE w TBOTTFSJG
  26. 72.

    html { font-family: MyYuGothicM, /* Windows ᕟΰγοΫ */ YuGothic, /*

    OS X ᕟΰγοΫ */ -apple-system, /* iOS San Francisco */ BlinkMacSystemFont, /* iOS Chrome San Francisco */ "Hiragino Kaku Gothic ProN", /* OS X, iOS ώϥΪϊ */ Meiryo, /* Windows ϝΠϦΦ */ sans-serif; }
  27. 77.