Webフォントことはじめ。Getting started with web fonts.

Transcript

1. $PQZSJHIU
   ˜
   
   .PSJTBXB
   *OD
   "MM
   3JHIUT
   3FTFSWFE 8FCϑΥϯτ͜ͱ͸͡Ί 
   .JY
   -FBQ
   4UVEZ
   
   גࣜձࣾϞϦαϫ
   খࣨ
   و࢙
2. $PQZSJHIU
   ˜
   
   .PSJTBXB
   *OD
   "MM
   3JHIUT
   3FTFSWFE ࣗݾ঺հ w ໊લɿখࣨ
   و࢙ʢΦϜϩ
   λΧϑϛʣ
   ɹɹɹ
   w ॴଐɿגࣜձࣾϞϦαϫ
 ɹɹɹΤϯλϓϥΠζࣄۀ෦։ൃ෦
 ɹɹɹΫϥ΢υϑΥϯτγεςϜ՝
   w झຯɿόΠΫʢ:;'3
   ॴ༗ʣ
 ɹɹɹ57ήʔϜʢϞϯϋϯɺεϓϥτΡʔϯʣ
   w ޷͖ͳॻମɿϑΥʔΫ
3. $PQZSJHIU
   ˜
   
   .PSJTBXB
   *OD
   "MM
   3JHIUT
   3FTFSWFE ΞδΣϯμ w 8FCϑΥϯτͱ͸ʁ
   w 8FCϑΥϯτͷ࢖͍ํ
   w ϑΥϯτඳըλΠϜϥΠϯ
   w ೔ຊޠϑΥϯτͷ໰୊
   w 8FCϑΥϯτ࠷దԽ
4. $PQZSJHIU
   ˜
   
   .PSJTBXB
   *OD
   "MM
   3JHIUT
   3FTFSWFE ࠓ೔ͷΰʔϧ w ΰʔϧ
   w 8FCϑΥϯτΛ࢖͑ΔΑ͏ʹͳΔ͜ͱ
   w ϑΥʔΫΛݟ෼͚ΕΔΑ͏ʹͳΔ͜ͱ
   w ࿩͢͜ͱ
   w 8FCϑΥϯτͷ࢖͍ํʹ͍ͭͯ
   w ࿩͞ͳ͍͜ͱ
   w 8FCϑΥϯτબఆͳͲͷσβΠϯʹ͍ͭͯ
5. $PQZSJHIU
   ˜
   
   .PSJTBXB
   *OD
   "MM
   3JHIUT
   3FTFSWFE 8FCϑΥϯτͱ͸ʁ w ϝϦοτ
   w ࣗ༝౓ͷߴ͍8FCσβΠϯ
   w ΞΫηεϏϦςΟͷ޲্
 w σϝϦοτ
   w ϑΥϯτϑΝΠϧͷμ΢ϯϩʔυʹґΔ஗Ԇදࣔ
   w ೔ຊޠͳͲจࣈछͷଟ͍ϑΥϯτͰ͸༰ྔ͕େ͖͍
6. $PQZSJHIU
   ˜
   
   .PSJTBXB
   *OD
   "MM
   3JHIUT
   3FTFSWFE 8FCϑΥϯτͱ͸ʁ IUUQTXXXPODIPTIPLVKQ
7. $PQZSJHIU
   ˜
   
   .PSJTBXB
   *OD
   "MM
   3JHIUT
   3FTFSWFE 8FCϑΥϯτͱ͸ʁ IUUQTXXXDJUZTIJCVZBUPLZPKQ
8. $PQZSJHIU
   ˜
   
   .PSJTBXB
   *OD
   "MM
   3JHIUT
   3FTFSWFE 8FCϑΥϯτͷ࢖͍ํ w $44
   A!GPOUGBDFA @font-face { font-family: "MyFont"; src: url("fonts/MyFont.woff"); } w $44
   AGPOUGBNJMZA body { font-family: "MyFont"; } ˡ
   ϑΥϯτ໊ʢԿͰ΋͍͍ʣ ˡ
   ϑΥϯτͷ৔ॴ ˡ
   !GPOUGBDFͰࢦఆͨ͠ϑΥϯτ໊
9. $PQZSJHIU
   ˜
   
   .PSJTBXB
   *OD
   "MM
   3JHIUT
   3FTFSWFE 8FCϑΥϯτͷ࢖͍ํ w $44
   A!GPOUGBDFA @font-face { font-family: "MyFont"; src: url("fonts/MyFont.woff") format("woff"), url("fonts/MyFont.ttf") format(“ttf"); } w $44
   AGPOUGBNJMZA body { font-family: "MyFont"; } ˣ
   TSD
   ͸ϑΥʔϧόοΫͰ͖·͢ ˢϨΨγʔϒϥ΢β޲͚ʹ
   ɹෳ਺ॻ͍ͨΓͰ͖·͢
10. $PQZSJHIU
    ˜
    
    .PSJTBXB
    *OD
    "MM
    3JHIUT
    3FTFSWFE 8FCϑΥϯτͷ࢖͍ํ w $44
    A!GPOUGBDFA @font-face { font-family: "MyFont"; src: url("fonts/MyFont.woff") format("woff"), url(“fonts/MyFont.ttf") format(“ttf"); } w $44
    AGPOUGBNJMZA body { font-family: "MyFont", serif; } ˣ
    GPOUGBNJMZ
    ΋ϑΥʔϧόοΫͰ͖·͢
11. $PQZSJHIU
    ˜
    
    .PSJTBXB
    *OD
    "MM
    3JHIUT
    3FTFSWFE 8FCϑΥϯτͷ࢖͍ํ w $44
    A!GPOUGBDFA @font-face { font-family: "MyFont"; src: url("fonts/MyFont.woff") format("woff2"), url(“fonts/MyFont.ttf") format(“ttf"); } w $44
    AGPOUGBNJMZA body { font-family: "ascii", "͔ͳ", "׽ࣈ"; } ˣ
    ӳޠɺ͔ͳɺ׽ࣈͷॻମΛ੾Γସ͑Δ͜ͱ΋Ͱ͖·͢
12. $PQZSJHIU
    ˜
    
    .PSJTBXB
    *OD
    "MM
    3JHIUT
    3FTFSWFE ϑΥϯτඳըλΠϜϥΠϯ w $44
    'POUT
    .PEVMF
    -FWFM
    
    w 
    5IF
    'POU
    %JTQMBZ
    5JNFMJOF IUUQTESBGUTDTTXHPSHDTTGPOUTGPOUEJTQMBZUJNFMJOF block period swap period font failure period ݟ͑ͳ͍จࣈͰ
 ϨϯμϦϯά ୅ସϑΥϯτͰ
 ϨϯμϦϯά ϑΥϯτऔಘதஅ UJNF
13. $PQZSJHIU
    ˜
    
    .PSJTBXB
    *OD
    "MM
    3JHIUT
    3FTFSWFE ϑΥϯτඳըλΠϜϥΠϯ w $44
    'POUT
    .PEVMF
    -FWFM
    
    w 
    5IF
    'POU
    %JTQMBZ
    5JNFMJOF IUUQTESBGUTDTTXHPSHDTTGPOUTGPOUEJTQMBZUJNFMJOF block period swap period font failure period ݟ͑ͳ͍จࣈͰ
 ϨϯμϦϯά ୅ସϑΥϯτͰ
 ϨϯμϦϯά ϑΥϯτऔಘதஅ '0*5 'MBTI
    PG
    *OWJTJCMF
    5FYU 
 จࣈ͕දࣔ͞Εͳ͍
14. $PQZSJHIU
    ˜
    
    .PSJTBXB
    *OD
    "MM
    3JHIUT
    3FTFSWFE UJNF ϑΥϯτඳըλΠϜϥΠϯ w $44
    'POUT
    .PEVMF
    -FWFM
    
    w 
    5IF
    'POU
    %JTQMBZ
    5JNFMJOF IUUQTESBGUTDTTXHPSHDTTGPOUTGPOUEJTQMBZUJNFMJOF block period swap period font failure period ݟ͑ͳ͍จࣈͰ
 ϨϯμϦϯά ୅ସϑΥϯτͰ
 ϨϯμϦϯά ϑΥϯτऔಘதஅ ϑΥϯτμ΢ϯϩʔυ׬ྃ
15. $PQZSJHIU
    ˜
    
    .PSJTBXB
    *OD
    "MM
    3JHIUT
    3FTFSWFE ϑΥϯτඳըλΠϜϥΠϯ w $44
    'POUT
    .PEVMF
    -FWFM
    
    w 
    5IF
    'POU
    %JTQMBZ
    5JNFMJOF IUUQTESBGUTDTTXHPSHDTTGPOUTGPOUEJTQMBZUJNFMJOF block period swap period font failure period ݟ͑ͳ͍จࣈͰ
 ϨϯμϦϯά ୅ସϑΥϯτͰ
 ϨϯμϦϯά ϑΥϯτऔಘதஅ '065 'MBTI
    PG
    6OTUZMFE
    5FYU 
 จࣈͷνϥ͖ͭൃੜ
16. $PQZSJHIU
    ˜
    
    .PSJTBXB
    *OD
    "MM
    3JHIUT
    3FTFSWFE UJNF ϑΥϯτඳըλΠϜϥΠϯ w $44
    'POUT
    .PEVMF
    -FWFM
    
    w 
    5IF
    'POU
    %JTQMBZ
    5JNFMJOF IUUQTESBGUTDTTXHPSHDTTGPOUTGPOUEJTQMBZUJNFMJOF block period swap period font failure period ݟ͑ͳ͍จࣈͰ
 ϨϯμϦϯά ୅ସϑΥϯτͰ
 ϨϯμϦϯά ϑΥϯτऔಘதஅ ͜͜·Ͱʹμ΢ϯϩʔυ
    Ͱ͖ͳ͍ͱதஅ͞ΕΔ
17. $PQZSJHIU
    ˜
    
    .PSJTBXB
    *OD
    "MM
    3JHIUT
    3FTFSWFE UJNF ϑΥϯτඳըλΠϜϥΠϯ w $44
    'POUT
    .PEVMF
    -FWFM
    
    w 
    5IF
    'POU
    %JTQMBZ
    5JNFMJOF IUUQTESBGUTDTTXHPSHDTTGPOUTGPOUEJTQMBZUJNFMJOF block period swap period font failure period ݟ͑ͳ͍จࣈͰ
 ϨϯμϦϯά ୅ସϑΥϯτͰ
 ϨϯμϦϯά ϑΥϯτऔಘதஅ $ISPNF
    'JSFGPY
    T
18. $PQZSJHIU
    ˜
    
    .PSJTBXB
    *OD
    "MM
    3JHIUT
    3FTFSWFE UJNF ϑΥϯτඳըλΠϜϥΠϯ w $44
    'POUT
    .PEVMF
    -FWFM
    
    w 
    5IF
    'POU
    %JTQMBZ
    5JNFMJOF IUUQTESBGUTDTTXHPSHDTTGPOUTGPOUEJTQMBZUJNFMJOF block period swap period font failure period ݟ͑ͳ͍จࣈͰ
 ϨϯμϦϯά ୅ସϑΥϯτͰ
 ϨϯμϦϯά ϑΥϯτऔಘதஅ *&
    &EHF
    T
19. $PQZSJHIU
    ˜
    
    .PSJTBXB
    *OD
    "MM
    3JHIUT
    3FTFSWFE UJNF ϑΥϯτඳըλΠϜϥΠϯ w $44
    'POUT
    .PEVMF
    -FWFM
    
    w 
    5IF
    'POU
    %JTQMBZ
    5JNFMJOF IUUQTESBGUTDTTXHPSHDTTGPOUTGPOUEJTQMBZUJNFMJOF block period swap period font failure period ݟ͑ͳ͍จࣈͰ
 ϨϯμϦϯά ୅ସϑΥϯτͰ
 ϨϯμϦϯά ϑΥϯτऔಘதஅ 4BGBSJ
    ʿ
20. $PQZSJHIU
    ˜
    
    .PSJTBXB
    *OD
    "MM
    3JHIUT
    3FTFSWFE ೔ຊޠϑΥϯτͷ໰୊ w ༰ྔ͕େ͖͍
 
 ྫ͑͹ɺ(PPHMFͷ/PUP4BOT$+,Λར༻͢Δ৔߹ʜ ༻్ ϑΝΠϧ໊ ༰ྔ ݟग़͠ /PUP4BOT$+,KQ#PMEPUG .# Ϧʔυ /PUP4BOT$+,KQ.FEJVNPUG .# ຊจ /PUP4BOT$+,KQ3FHVMBSPUG .#
21. $PQZSJHIU
    ˜
    
    .PSJTBXB
    *OD
    "MM
    3JHIUT
    3FTFSWFE ೔ຊޠϑΥϯτͷ໰୊ w άϦϑʢࣈܗʣ͕ෳࡶ
 
 ෳࡶͳάϦϑΛখαΠζͰදࣔ͢Δͱʜ ਌ᳵ ɾQU ɾQU ਌ᳵ
22. $PQZSJHIU
    ˜
    
    .PSJTBXB
    *OD
    "MM
    3JHIUT
    3FTFSWFE 8FCϑΥϯτ࠷దԽ w 8FCϑΥϯτϑΥʔϚοτ format ໊শ આ໌ ิ଍ UUG 5SVF5ZQF
    'POU 5SVF5ZQFΞ΢τϥΠϯ (FOFSBM PUG 0QFO5ZQF
    'POU $''Ξ΢τϥΠϯ (FOFSBM XP⒎ 8FC
    0QFO
    'POU
    'PSNBU 8FCϑΥϯτ༻ͷѹॖϑΥϯτ 8FC XP⒎ 8FC
    0QFO
    'POU
    'PSNBU
     XP⒎ͷѹॖΞϧΰϦζϜվળ൛ 8FC FPU &NCFEEFE
    0QFO
    5ZQF *&޲͚ͷ.4ಠࣗ࢓༷ -FHBDZ TWH 4DBMBCMF
    7FDUPS
    (SBQIJDT 47(ܗࣜͷϑΥϯτ -FHBDZ
23. $PQZSJHIU
    ˜
    
    .PSJTBXB
    *OD
    "MM
    3JHIUT
    3FTFSWFE 8FCϑΥϯτ࠷దԽ w αϒηοτ
 
 ೔ຊޠͰΑ͘࢖͏จࣈ͚ͩͷϑΥϯτʹͨ͠৔߹
 ˞+*49
    ୈҰਫ४׽ࣈɺه߸ɺجຊϥςϯจࣈɺ͔ͳɺΧφ
    ࢀߟࢿྉʣ5BLBOPSJ
    0LJ
    ΠψͰ΋Θ͔Δ΢ΣϒϑΥϯτ
    
    1
    ද ϑΝΠϧ໊ ࠷దԽલ ࠷దԽޙ 80'' ࠷దԽޙ 80'' /PUP4BOT$+,KQ#PMEPUG .# ,# ,# /PUP4BOT$+,KQ.FEJVNPUG .# ,# ,# /PUP4BOT$+,KQ3FHVMBSPUG .# ,# ,#
24. $PQZSJHIU
    ˜
    
    .PSJTBXB
    *OD
    "MM
    3JHIUT
    3FTFSWFE 8FCϑΥϯτ࠷దԽ w "QQMFͷ8FCαΠτͷ৔߹
 
 จࣈఔ౓
    ʴ
    XP⒎ѹॖ IUUQTXXXBQQMFDPNKQ ϑΝΠϧ໊ ༰ྔ 4'1SP+1@SFHVMBSXP⒎ ,# 4'1SP+1@TFNJCPMEXP⒎ ,#
25. $PQZSJHIU
    ˜
    
    .PSJTBXB
    *OD
    "MM
    3JHIUT
    3FTFSWFE 8FCϑΥϯτ࠷దԽ w ࠷దԽ͸݁ߏΊΜͲ͍͘͞Ͱ͢ΑͶʜ
26. $PQZSJHIU
    ˜
    
    .PSJTBXB
    *OD
    "MM
    3JHIUT
    3FTFSWFE 8FCϑΥϯτ࠷దԽ w 8FCϑΥϯταʔϏεΛ࢖͏ʂ IUUQTUZQFTRVBSFDPN
27. $PQZSJHIU
    ˜
    
    .PSJTBXB
    *OD
    "MM
    3JHIUT
    3FTFSWFE 8FCϑΥϯτ࠷దԽ w αϒηοτͱϑΥʔϚοτม׵͕ࣗಈͰߦΘΕ·͢ʂ
 '065ʢνϥπΩʣ΋σϑΥϧτઃఆͰ཈੍ʂ IUUQTUZQFTRVBSFDPN
28. $PQZSJHIU
    ˜
    
    .PSJTBXB
    *OD
    "MM
    3JHIUT
    3FTFSWFE ࢀߟࢿྉ w ΠψͰ΋Θ͔Δ΢ΣϒϑΥϯτʢബ͍ຊʣ
 ˣ঎ۀ൛ͰϦχϡʔΞϧ
 ΢ΣϒϑΥϯτ࣮ફϚχϡΞϧ
    େ໦ଚلʢஶʣ
 IUUQTXXXBNB[PODPKQEQ IUUQTESBGUTDTTXHPSHDTTGPOUT IUUQTUZQFTRVBSFDPN w $44
    'POUT
    .PEVMF
    -FWFM
    
 w 5ZQF4RVBSF