$30 off During Our Annual Pro Sale. View Details »

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

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. .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