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

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

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

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

ͭΒ͍

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

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

ͪΐͬͱ଴ͬͯ

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

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

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

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

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

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

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

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

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

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

GPOUGBNJMZࢦఆͷ جຊΛ͓͞Β͍

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

04͝ͱʹҟͳΔϑΥϯτ໊ w ಉ໊͡લͷϑΥϯτͰ΋04͝ͱʹผϑΥϯτͷͨΊ  GPOUGBNJMZʹࢦఆ͢Δ஋͕ҟͳΔ৔߹͕͋Δ w ᕟΰγοΫͷྫɿ w 049ᕟΰγοΫମPS:V(PUIJD w 8JOEPXTᕟΰγοΫPS:V(PUIJD

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

ᕟΰγοΫΛ ࢖ͬͯΈΔ

ᕟΰγοΫ͸ 8JOEPXTͱ049ڞ௨ͷ  ೔ຊޠϑΥϯτ

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

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

8JOEPXTͰࡉ͍ w 049  $ISPNF w 8JOEPXT  $ISPNF

ͳΜͰ

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

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

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

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

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

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

Ͳ͏΍ͬͯʁ

❌GPOUXFJHIU ᕟΰγοΫҎ֎ͷϑΥϯτ͕ద༻͞Εͨ৔߹ʹ  ͦͷϑΥϯτ·Ͱଠ͘ͳͬͯ͠·͏ $44ͷ GPOUXFJHIU ᕟΰγοΫͷ ΢ΤΠτ 8JOEPXT 8JOEPXT
049 OPSNBM 3FHVMBS ˓ ˓ NFEJVN .FEJVN ˓ ˓ CPME #PME ˓ ˓ ˓

❌GPOUGBNJMZ:V(PUIJD.FEJVN GPOUXFJHIUCPME࣌ɺᕟΰγοΫ#PME͕ద༻͞Εͣɺ  ᕟΰγοΫ.FEJVN͕ແཧ΍ΓଠΒ͞ΕΔͨΊԚ͘ͳΔ $44ͷ GPOUXFJHIU ᕟΰγοΫͷ ΢ΤΠτ 8JOEPXT 8JOEPXT

ͭΒ͍

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

!GPOUGBDFͱ͸ʁ w ෳ਺ͷҟͳΔϑΥϯτΛ૊Έ߹Θͤͯ  ಠࣗʹϑΥϯτϑΝϛϦʔΛఆٛͰ͖Δ w Ұൠతʹ8FCϑΥϯτΛద༻͢Δ৔߹ʹར༻͞ΕΔ͕  MPDBM ߏจΛ࢖͏ͱϩʔΧϧʹ͋ΔϑΥϯτ΋ࢦఆͰ͖Δ @font-face { 
font-family: ఆٛ͢ΔϑΥϯτϑΝϛϦʔ໊;  font-weight: ఆٛ͢Δ΢ΤΠτ;  src: local(ϩʔΧϧϑΥϯτͷϑΥϯτϑΣΠε໊);  }

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

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

ϑΥϯτͷOBNFςʔϒϧΛ֬ೝ %5-05.BTUFS-JHIUΛ࢖ͬͯ  ᕟΰγοΫ.FEJVNͷOBNFςʔϒϧΛදࣔ

1PTUTDSJQUOBNFΛ୳͢ !GPOUGBDFͷMPDBM ʹ͸  OBNF*%ͷ1PTUTDSJQUOBNFΛ࢖༻͢Δ

!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

8JOEPXTͰ΋ಡΈ΍͘͢ w ᕟΰγοΫ  3FHVMBSద༻  σϑΥϧτ w ᕟΰγοΫ  .FEJVNద༻

⭕ ⭕ ⭕ ʜ

$ISPNFͰ.41ΰγοΫʹ w 8JOEPXT  $ISPNF  w 8JOEPXT  &EHF

ͳΜͰ

$ISPNFͰᕟΰγοΫ͕  ద༻͞Εͳ͍ཧ༝ w ࢓༷Ͱ͸ɺ!GPOUGBDFͷMPDBM ߏจʹ͸  1PTUTDSJQUOBNFʢPSOBNF*%ͷ'VMMGPOUOBNFʣ  Λࢦఆ͢Δ͜ͱʹͳ͍ͬͯΔ w ͳ͔ͥɺ$ISPNFͰ͸͓ͦΒ͘MPDBM ߏจͷ஋ͱͯ͠ 
OBNF*%ͷ'POU'BNJMZOBNF͕࢖ΘΕΔ

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

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

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

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

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

ᕟΰγοΫ.FEJVN͸ͳ͍͕ ᕟΰγοΫ#PME͸͋Δ৔߹ͷදࣔ w 8JOEPXT$ISPNF  OPSNBMᕟΰγοΫ3FHVMBS  CPMEᕟΰγοΫ#PME w 8JOEPXT*&  OPSNBMᕟΰγοΫ#PME  CPMEᕟΰγοΫ#PME
w 8JOEPXT'JSFGPY  OPSNBM.41ΰγοΫ  CPMEᕟΰγοΫ#PME

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

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

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

ͪͳΈʹ

ຊ౰͸͢΂ͯͷ΢ΤΠτʹࢦఆͨ͠ํ͕ ҆શͰ͸͋Δ͚Ͳ͜͏ͳΔ @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"); }

έʔεελσΟ

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

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

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

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

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

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

݁ߏ௕ͯ͘େม

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

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

html { font-family: sans-serif; }

·ͱΊ

w 8JOEPXTͷᕟΰγοΫʹ͸.FEJVNΛ࢖͓͏ w !GPOUGBDFͰΦϦδφϧͷϑΥϯτηοτΛͭ͘Ζ͏ w !GPOUGBDFͷMPDBM ʹ͸  $ISPNFͷͨΊʹϑΥϯτϑΝϛϦʔ໊΋ซه͠Α͏ w Ұ෦ͷ΢ΤΠτ͔͠ϑΥϯτ͕ͳ͍ঢ়ଶʹͳΒͳ͍Α͏ 
MPDBM ʹ͸ϑΥʔϧόοΫͷϑΥϯτ΋ࢦఆ͠Α͏

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

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

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

More Decks by tacamy

Other Decks in Design

Featured

Transcript