Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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

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をつかったローカルフォント指定の解説とはまりドコロを紹介します。これで日本語フォント指定に迷わなくなる、かも?

tacamy

October 17, 2016
Tweet

More Decks by tacamy

Other Decks in Design

Transcript

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

    :V(PUIJD6*͕௥ՃʢγεςϜϑΥϯτʣ w 8JOEPXTʙ΋ᕟΰγοΫᕟ໌ேϑΥϯτύοΫͰ
 8JOEPXTͱಉ͡ᕟΰγοΫηοτ͕࢖͑Δ ˞ʢʣ಺͸ϑΥϯτϑΝϛϦʔ໊
  2. 049 w 049ʙ w ᕟΰγοΫ.FEJVN#PME͕௥Ճʢ:V(PUIJDʣ w 049ʙ w 4BO'SBODJTDP͕௥ՃʢγεςϜϑΥϯτʣʢBQQMFTZTUFNʣ w

    ώϥΪϊ֯ΰγοΫͷ΢ΤΠτ͕૿͑Δʢ)JSBHJOP4BOTʣ w )JSBHJOP,BLV(PUIJD1SP/8PS8 w )JSBHJOP4BOT8ʙ8ͷஈ֊
  3. 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΍ػछɺݸਓ؀ڥ͝ͱʹϑΥϯτ͕όϥόϥͷͨΊ γεςϜϑΥϯτʹ·͔ͤͯࢦఆ͸ͳΔ΂͘ආ͚͍ͨ
  4. GPOUXFJHIUͷ஋ͱ ద༻͞ΕΔ΢ΤΠτ $44ͷ GPOUXFJHIU ᕟΰγοΫͷ ΢ΤΠτ 8JOEPXT  8JOEPXT 

    049  SJHIU -JHIU ˓ ˓   OPSNBM 3FHVMBS ˓ ˓   NFEJVN .FEJVN ˓  ˓  CPME #PME ˓ ˓ ˓
  5. !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
  6. $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 */
 }
  7. GPOUXFJHIUʹର͢Δ ᕟΰγοΫͷ΢ΤΠτ $44ͷ GPOUXFJHIU ᕟΰγοΫͷ ΢ΤΠτ 8JOEPXT  8JOEPXT 

    049  OPSNBM 3FHVMBS ˓ ˓   NFEJVN .FEJVN ˓  ˓  CPME #PME ˓ ˓ ˓
  8. 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 */
 }
  9. ຊ౰͸͢΂ͯͷ΢ΤΠτʹࢦఆͨ͠ํ͕ ҆શͰ͸͋Δ͚Ͳ͜͏ͳΔ @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"); }
  10. .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 */ }
  11. ࠷৽ͷγεςϜϑΥϯτʹدͤΔ w 8JOEPXT w ᕟΰγοΫ ϝΠϦΦ TBOTTFSJG w 049 w

    4BO'SBODJTDP ώϥΪϊ ώϥΪϊ TBOTTFSJG w J04 w 4BO'SBODJTDP ώϥΪϊ ώϥΪϊ TBOTTFSJG w "OEPSJE w TBOTTFSJG
  12. 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/͕Αͦ͞͏
  13. 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; }
  14. ᕟΰγοΫϝΠϯͷࢦఆ w 8JOEPXT w ᕟΰγοΫ ϝΠϦΦ TBOTTFSJG w 049 w

    ᕟΰγοΫ 4BO'SBODJTDP ώϥΪϊ ώϥΪϊ TBOTTFSJG w J04 w 4BO'SBODJTDP ώϥΪϊ ώϥΪϊ TBOTTFSJG w "OEPSJE w TBOTTFSJG
  15. 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; }