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

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

Transcript

1. .PEFSO
   ೔ຊޠϑΥϯτࢦఆ
   4FQ
   1JYFM(SJE *OD!UBDBNZ
   

   View Slide

2. ࣗݾ঺հ
   w !UBDBNZ
   w ࢁాܟඒ5BLBNJ:BNBEB
   w 1JYFM(SJE *ODQY໨
   w 'SPOUFOE&OHJOFFS
   w "UPN㱻74$PEF
   

   View Slide

3. $44ʹΑΔ
   ೔ຊޠϑΥϯτͷࢦఆ
   ͦΕ͸
   

   View Slide

4. ͭΒ͍
   

   View Slide

5. ͭΒΈͷݪҼ
   w 04ɾόʔδϣϯ͝ͱʹҟͳΔόϯυϧϑΥϯτ
   w ϒϥ΢β͝ͱʹҟͳΔσϑΥϧτϑΥϯτ
   w ؀ڥ͝ͱʹΠϯετʔϧ͞Ε͍ͯΔϑΥϯτ͕ҟͳΔ
   ͋ͪΒΛཱͯΕ͹
   ͪ͜Βཱ͕ͨͣʜʜ
   

   View Slide

6. View Slide

7. View Slide

8. ϕετͳํ๏ͳΜͯͳ͍Μͩ
   

   View Slide

9. ͪΐͬͱ଴ͬͯ
   

   View Slide

10. ࠷ۙͷϑΥϯτࣄ৘
    w ᕟΰγοΫ͕8JOEPXT.BDڞ௨ͷόϯυϧϑΥϯτʹ
    w ओཁϒϥ΢β͢΂ͯͰ!GPOUGBDF͕αϙʔτ͞ΕΔ
    

    View Slide

11. 04΍ϒϥ΢βͷਐԽʹ߹Θͤͯ
    ϑΥϯτࢦఆͷํ๏΋
    Ξοϓσʔτ͠Α͏
    

    View Slide

12. ͜ͷηογϣϯͷ໨త
    w ࠷ۙͷόϯυϧϑΥϯτͷঢ়گΛ஌Δ
    w ϑΥϯτؔ࿈ͷ$44ͷཧղ
    w ϑΥϯτͷ࢓૊Έͷཧղ
    w ঢ়گʹԠͨ͡ద੾ͳϑΥϯτࢦఆΛࣗ෼ͰͰ͖ΔΑ͏ʹ
    ୤ίϐϖ
    

    View Slide

13. ࿩͢͜ͱ
    w 04ͱ࠷ۙͷόϯυϧϑΥϯτ
    w GPOUGBNJMZࢦఆͷجຊΛ͓͞Β͍
    w ᕟΰγοΫΛ࢖ͬͯΈΔ
    w ᕟΰγοΫͷ΢ΤΠτ໰୊
    w !GPOUGBDFͰಠࣗͷϑΥϯτϑΝϛϦʔΛͭ͘Δ
    w έʔεελσΟ
    

    View Slide

14. 04ͱ
    ࠷ۙͷόϯυϧϑΥϯτ
    

    View Slide

15. 8JOEPXT
    w 8JOEPXTʙ
    w ᕟΰγοΫ-JHIU3FHVMBS#PME͕௥Ճʢ:V(PUIJDʣ
    w 8JOEPXTʙ
    w ᕟΰγοΫ.FEJVN͕௥Ճ
    w :V(PUIJD6*͕௥ՃʢγεςϜϑΥϯτʣ
    w 8JOEPXTʙ΋ᕟΰγοΫᕟ໌ேϑΥϯτύοΫͰ

    8JOEPXTͱಉ͡ᕟΰγοΫηοτ͕࢖͑Δ
    ˞ʢʣ಺͸ϑΥϯτϑΝϛϦʔ໊
    

    View Slide

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ͷஈ֊
    

    View Slide

17. J04
    w J04ʙ
    w 4BO'SBODJTDP͕௥ՃʢγεςϜϑΥϯτʣʢBQQMFTZTUFNʣ
    w ώϥΪϊ֯ΰγοΫͷ΢ΤΠτ͕૿͑Δʢ)JSBHJOP4BOTʣ
    w )JSBHJOP,BLV(PUIJD1SP/8PS8
    w )JSBHJOP4BOT8ʙ8ͷஈ֊
    

    View Slide

18. "OESPJE
    w "OESPJEʙ
    w 3PCPUPʢӳࣈʣ͕௥ՃʢγεςϜϑΥϯτʣ
    w ϞτϠϑΥϯτ͕௥ՃʢγεςϜϑΥϯτʣ
    w "OESPJEʙ
    w /PUP4BOT$+,͕௥ՃʢγεςϜϑΥϯτʣ
    

    View Slide

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΍ػछɺݸਓ؀ڥ͝ͱʹϑΥϯτ͕όϥόϥͷͨΊ
    γεςϜϑΥϯτʹ·͔ͤͯࢦఆ͸ͳΔ΂͘ආ͚͍ͨ
    

    View Slide

20. GPOUGBNJMZࢦఆͷ
    جຊΛ͓͞Β͍
    

    View Slide

21. ӳ໊ͱ࿨໊
    w ੲ͸ݹ͍ϒϥ΢β޲͚ʹ

    ࿨໊ͱӳ໊ͷซه͕ඞཁͩͬͨ
    font-family: "ᕟΰγοΫ", "Yu Gothic", sans-serif;
    w ࠓͷओཁϒϥ΢βͰ͸ӳ໊ͷΈͰେৎ෉
    font-family: "Yu Gothic", sans-serif;
    

    View Slide

22. 04͝ͱʹҟͳΔϑΥϯτ໊
    w ಉ໊͡લͷϑΥϯτͰ΋04͝ͱʹผϑΥϯτͷͨΊ

    GPOUGBNJMZʹࢦఆ͢Δ஋͕ҟͳΔ৔߹͕͋Δ
    w ᕟΰγοΫͷྫɿ
    w 049ᕟΰγοΫମPS:V(PUIJD
    w 8JOEPXTᕟΰγοΫPS:V(PUIJD
    

    View Slide

23. ӳ਺ͱ೔ຊޠͰ
    ҟͳΔϑΥϯτΛద༻
    w GPOUGBNJMZͷ࢓༷
    w GPOUGBNJMZʹ͸ෳ਺ͷϑΥϯτϑΝϛϦʔ໊ΛࢦఆͰ͖Δ
    w ֘౰͢ΔϑΥϯτ͕ͳ͚Ε͹࣍ͷϑΥϯτΛద༻
    w ӳ਺ͷηοτ͔͠ͳ͍ϑΥϯτΛઌʹࢦఆͯ͠ɺ

    ͦͷ࣍ʹ೔ຊޠϑΥϯτΛࢦఆ͢Ε͹Α͍
    

    View Slide

24. ᕟΰγοΫΛ
    ࢖ͬͯΈΔ
    

    View Slide

25. ᕟΰγοΫ͸
    8JOEPXTͱ049ڞ௨ͷ

    ೔ຊޠϑΥϯτ
    

    View Slide

26. ᕟΰγοΫͳΒ
    8JOEPXTͱ049Ͱ
    αΠτͷҹ৅Λ
    ౷ҰͰ͖Δͳʂ
    Αʔ͠ʂ
    

    View Slide

27. font-family: "Yu Gothic", YuGothic, sans-serif;
    8JOEPXT 049
    

    View Slide

28. 8JOEPXTͰࡉ͍
    w 049

    $ISPNF
    w 8JOEPXT

    $ISPNF
    

    View Slide

29. ͳΜͰ
    

    View Slide

30. ᕟΰγοΫͷ
    ΢ΤΠτ໰୊
    

    View Slide

31. 04ʹೖ͍ͬͯΔ
    ᕟΰγοΫͷ΢ΤΠτ
    ᕟΰγοΫͷ
    ΢ΤΠτ
    8JOEPXT
    
    8JOEPXT
    
    049
    -JHIU ˓ ˓
    3FHVMBS ˓ ˓
    .FEJVN ˓ ˓
    #PME ˓ ˓ ˓
    

    View Slide

32. GPOUXFJHIUͷ஋ͱ
    ద༻͞ΕΔ΢ΤΠτ
    $44ͷ
    GPOUXFJHIU
    ᕟΰγοΫͷ
    ΢ΤΠτ
    8JOEPXT
    
    8JOEPXT
    
    049
    
    SJHIU
    -JHIU ˓ ˓
    
    OPSNBM
    3FHVMBS ˓ ˓
    
    NFEJVN
    .FEJVN ˓ ˓
    
    CPME
    #PME ˓ ˓ ˓
    

    View Slide

33. 049ʹᕟΰγοΫ3FHVMBS͕
    ͳ͍ͨΊʹىͬͨ͜൵ܶͩͬͨ
    

    View Slide

34. ͱ͸͍͑
    ᕟΰγοΫ3FHVMBS͸
    ࡉͯ͘ಡΈͮΒ͍
    

    View Slide

35. 049ʹ߹Θͤͯ
    8JOEPXTͰ΋
    ᕟΰγοΫ.FEJVNΛ࢖͓͏
    

    View Slide

36. Ͳ͏΍ͬͯʁ
    

    View Slide

37. ❌GPOUXFJHIU
    ᕟΰγοΫҎ֎ͷϑΥϯτ͕ద༻͞Εͨ৔߹ʹ

    ͦͷϑΥϯτ·Ͱଠ͘ͳͬͯ͠·͏
    $44ͷ
    GPOUXFJHIU
    ᕟΰγοΫͷ
    ΢ΤΠτ
    8JOEPXT
    
    8JOEPXT
    
    049
    
    OPSNBM
    3FHVMBS ˓ ˓
    
    NFEJVN
    .FEJVN ˓ ˓
    
    CPME
    #PME ˓ ˓ ˓
    

    View Slide

38. ❌GPOUGBNJMZ:V(PUIJD.FEJVN
    GPOUXFJHIUCPME࣌ɺᕟΰγοΫ#PME͕ద༻͞Εͣɺ

    ᕟΰγοΫ.FEJVN͕ແཧ΍ΓଠΒ͞ΕΔͨΊԚ͘ͳΔ
    $44ͷ
    GPOUXFJHIU
    ᕟΰγοΫͷ
    ΢ΤΠτ
    8JOEPXT
    
    8JOEPXT
    
    049
    
    OPSNBM
    3FHVMBS ˓ ˓
    
    NFEJVN
    .FEJVN ˓ ˓
    
    CPME
    #PME ˓ ˓ ˓
    

    View Slide

39. ͭΒ͍
    

    View Slide

40. !GPOUGBDFͰಠࣗͷ
    ϑΥϯτϑΝϛϦʔΛͭ͘Δ
    

    View Slide

41. !GPOUGBDFͱ͸ʁ
    w ෳ਺ͷҟͳΔϑΥϯτΛ૊Έ߹Θͤͯ

    ಠࣗʹϑΥϯτϑΝϛϦʔΛఆٛͰ͖Δ
    w Ұൠతʹ8FCϑΥϯτΛద༻͢Δ৔߹ʹར༻͞ΕΔ͕

    MPDBM
    ߏจΛ࢖͏ͱϩʔΧϧʹ͋ΔϑΥϯτ΋ࢦఆͰ͖Δ
    @font-face {

    font-family: ఆٛ͢ΔϑΥϯτϑΝϛϦʔ໊;

    font-weight: ఆٛ͢Δ΢ΤΠτ;

    src: local(ϩʔΧϧϑΥϯτͷϑΥϯτϑΣΠε໊);

    }
    

    View Slide

42. ϑΥϯτϑΝϛϦʔ໊ͱ
    ϑΥϯτϑΣΠε໊ͷҧ͍
    w ϑΥϯτϑΝϛϦʔ໊ʢ:V(PUIJDʣ
    w GPOUGBNJMZʹࢦఆͰ͖Δ஋
    w ϑΥϯτϑΝϛϦʔ͸ෳ਺ͷ΢ΤΠτͷϑΥϯτΛؚΜͰ͍Δ
    w ϑΥϯτϑΣΠε໊ʢ:V(PUIJD3FHVMBSʣ
    w ϑΥϯτϑΝϛϦʔ಺ͷ୯ಠͷϑΥϯτͷҰҙͳ໊લ
    

    View Slide

43. ϑΥϯτϑΣΠε໊ͷ
    ௐ΂ํ
    

    View Slide

44. ϑΥϯτͷOBNFςʔϒϧΛ֬ೝ
    %5-05.BTUFS-JHIUΛ࢖ͬͯ

    ᕟΰγοΫ.FEJVNͷOBNFςʔϒϧΛදࣔ
    

    View Slide

45. 1PTUTDSJQUOBNFΛ୳͢
    !GPOUGBDFͷMPDBM
    ʹ͸

    OBNF*%ͷ1PTUTDSJQUOBNFΛ࢖༻͢Δ
    

    View Slide

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
    

    View Slide

47. 8JOEPXTͰ΋ಡΈ΍͘͢
    w ᕟΰγοΫ

    3FHVMBSద༻

    σϑΥϧτ
    w ᕟΰγοΫ

    .FEJVNద༻
    

    View Slide

48. View Slide

49. ⭕ ⭕ ⭕
    ʜ
    

    View Slide

50. View Slide

51. $ISPNFͰ.41ΰγοΫʹ
    w 8JOEPXT

    $ISPNF

    w 8JOEPXT

    &EHF
    

    View Slide

52. ͳΜͰ
    

    View Slide

53. $ISPNFͰᕟΰγοΫ͕

    ద༻͞Εͳ͍ཧ༝
    w ࢓༷Ͱ͸ɺ!GPOUGBDFͷMPDBM
    ߏจʹ͸

    1PTUTDSJQUOBNFʢPSOBNF*%ͷ'VMMGPOUOBNFʣ

    Λࢦఆ͢Δ͜ͱʹͳ͍ͬͯΔ
    w ͳ͔ͥɺ$ISPNFͰ͸͓ͦΒ͘MPDBM
    ߏจͷ஋ͱͯ͠

    OBNF*%ͷ'POU'BNJMZOBNF͕࢖ΘΕΔ
    

    View Slide

54. ᕟΰγοΫ.FEJVNͷ'POU'BNJMZOBNF
    :V(PUIJD.FEJVN
    

    View Slide

55. ϑΥϯτϑΝϛϦʔ໊ͳͷʹ
    :V(PUIJD.FEJVNʁ
    :V(PUIJD͡Όͳ͍ͷʁ
    

    View Slide

56. w 3FHVMBSͱ#PME͸ɺಉ͡:V(PUIJDͱ͍͏ϑΥϯτϑΝϛϦʔͷҰһ
    w -JHIUͱ.FEJVN͸ಠཱͨ͠ϑΥϯτϑΝϛϦʔͷ3FHVMBS΢ΤΠτ
    8JOEPXTᕟΰγοΫͷ
    ϑΥϯτϑΝϛϦʔ
    ᕟΰγοΫͷ
    ΢ΤΠτ
    'POU'BNJMZOBNF 'POU4VCGBNJMZOBNF
    -JHIU :V(PUIJD-JHIU 3FHVMBS
    3FHVMBS :V(PUIJD 3FHVMBS
    .FEJVN :V(PUIJD.FEJVN 3FHVMBS
    #PME :V(PUIJD #PME
    

    View Slide

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 */

    }
    

    View Slide

58. 8JOEPXTʹ͸
    ᕟΰγοΫ.FEJVN͕
    ͳ͍͚ΕͲɺͦͷ৔߹Ͳ͏ͳΔͷʁ
    

    View Slide

59. ᕟΰγοΫ.FEJVN͸ͳ͍͕
    ᕟΰγοΫ#PME͸͋Δ৔߹ͷදࣔ
    w 8JOEPXT$ISPNF

    OPSNBMᕟΰγοΫ3FHVMBS

    CPMEᕟΰγοΫ#PME
    w 8JOEPXT*&

    OPSNBMᕟΰγοΫ#PME

    CPMEᕟΰγοΫ#PME
    w 8JOEPXT'JSFGPY

    OPSNBM.41ΰγοΫ

    CPMEᕟΰγοΫ#PME
    

    View Slide

60. .FEJVN͕ͳ͚Ε͹
    3FHVMBSΛ࢖͓͏
    w ᕟΰγοΫ.FEJVN͕ͳͯ͘#PME͕͋Δ؀ڥ͕ݶఆత
    w 8JOEPXT͔ͭ0⒏DF༻ϑΥϯτύοΫΛೖΕ͍ͯͳ͍৔߹ͷΈ
    w ͦ΋ͦ΋8JOEPXTࣗମͷγΣΞ΋গͳ͍
    w 3FHVMBS͸ͦ΋ͦ΋ຊདྷͷσϑΥϧτͷ΢ΤΠτ
    

    View Slide

61. GPOUXFJHIUʹର͢Δ
    ᕟΰγοΫͷ΢ΤΠτ
    $44ͷ
    GPOUXFJHIU
    ᕟΰγοΫͷ
    ΢ΤΠτ
    8JOEPXT
    
    8JOEPXT
    
    049
    
    OPSNBM
    3FHVMBS ˓ ˓
    
    NFEJVN
    .FEJVN ˓ ˓
    
    CPME
    #PME ˓ ˓ ˓
    

    View Slide

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 */

    }
    

    View Slide

63. View Slide

64. ͪͳΈʹ
    

    View Slide

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");
    }
    

    View Slide

66. έʔεελσΟ
    

    View Slide

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 */
    }
    

    View Slide

68. ࠷৽ͷγεςϜϑΥϯτʹدͤΔ
    w 8JOEPXT
    w ᕟΰγοΫ ϝΠϦΦ TBOTTFSJG
    w 049
    w 4BO'SBODJTDPώϥΪϊ ώϥΪϊ TBOTTFSJG
    w J04
    w 4BO'SBODJTDPώϥΪϊ ώϥΪϊ TBOTTFSJG
    w "OEPSJE
    w TBOTTFSJG
    

    View Slide

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/͕Αͦ͞͏
    

    View Slide

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;
    }
    

    View Slide

71. ᕟΰγοΫϝΠϯͷࢦఆ
    w 8JOEPXT
    w ᕟΰγοΫ ϝΠϦΦ TBOTTFSJG
    w 049
    w ᕟΰγοΫ 4BO'SBODJTDPώϥΪϊ ώϥΪϊ TBOTTFSJG
    w J04
    w 4BO'SBODJTDPώϥΪϊ ώϥΪϊ TBOTTFSJG
    w "OEPSJE
    w TBOTTFSJG
    

    View Slide

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;
    }
    

    View Slide

73. ݁ߏ௕ͯ͘େม
    

    View Slide

74. Ͳ͏ͧίϐϖͯ͠
    ͝ར༻͍ͩ͘͞
    ୤ίϐϖ
    ❌
    େࣄͳͷ͸ɺཧղ্ͨ͠Ͱࢦఆ͢Δ͜ͱ
    

    View Slide

75. ݸਓతͳ͓͢͢Ίࢦఆ
    w ͜ͷઌɺ04ʹ৽͍͠ϑΥϯτ͕૿͑ͯ΋ରԠͰ͖Δ
    w ະདྷͷ৽͍͠04ʹ΋ରԠͰ͖Δ
    

    View Slide

76. html {
    font-family: sans-serif;
    }
    

    View Slide

77. ·ͱΊ
    

    View Slide

78. w 8JOEPXTͷᕟΰγοΫʹ͸.FEJVNΛ࢖͓͏
    w !GPOUGBDFͰΦϦδφϧͷϑΥϯτηοτΛͭ͘Ζ͏
    w !GPOUGBDFͷMPDBM
    ʹ͸

    $ISPNFͷͨΊʹϑΥϯτϑΝϛϦʔ໊΋ซه͠Α͏
    w Ұ෦ͷ΢ΤΠτ͔͠ϑΥϯτ͕ͳ͍ঢ়ଶʹͳΒͳ͍Α͏

    MPDBM
    ʹ͸ϑΥʔϧόοΫͷϑΥϯτ΋ࢦఆ͠Α͏
    

    View Slide

79. ͞ΒʹΨνΨνͷϑΥϯτࢦఆΛͨ͠࿩͸
    ͪ͜Β·Ͱ
    IUUQXXXDPEFHSJEOFU
    ֹ݄ԁ੫ʢ೔ؒແྉʣ
    

    View Slide