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

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

67683b0a8d24009c731787b49881a9de?s=128

tomuro

July 26, 2018
Tweet

Transcript

  1. $PQZSJHIU˜.PSJTBXB*OD"MM3JHIUT3FTFSWFE 8FCϑΥϯτ͜ͱ͸͡Ί .JY-FBQ4UVEZ גࣜձࣾϞϦαϫখࣨو࢙

  2. $PQZSJHIU˜.PSJTBXB*OD"MM3JHIUT3FTFSWFE ࣗݾ঺հ w ໊લɿখࣨو࢙ʢΦϜϩλΧϑϛʣɹɹɹ w ॴଐɿגࣜձࣾϞϦαϫ
 ɹɹɹΤϯλϓϥΠζࣄۀ෦։ൃ෦
 ɹɹɹΫϥ΢υϑΥϯτγεςϜ՝ w झຯɿόΠΫʢ:;'3ॴ༗ʣ


    ɹɹɹ57ήʔϜʢϞϯϋϯɺεϓϥτΡʔϯʣ w ޷͖ͳॻମɿϑΥʔΫ
  3. $PQZSJHIU˜.PSJTBXB*OD"MM3JHIUT3FTFSWFE ΞδΣϯμ w 8FCϑΥϯτͱ͸ʁ w 8FCϑΥϯτͷ࢖͍ํ w ϑΥϯτඳըλΠϜϥΠϯ w ೔ຊޠϑΥϯτͷ໰୊

    w 8FCϑΥϯτ࠷దԽ
  4. $PQZSJHIU˜.PSJTBXB*OD"MM3JHIUT3FTFSWFE ࠓ೔ͷΰʔϧ w ΰʔϧ w 8FCϑΥϯτΛ࢖͑ΔΑ͏ʹͳΔ͜ͱ w ϑΥʔΫΛݟ෼͚ΕΔΑ͏ʹͳΔ͜ͱ w ࿩͢͜ͱ

    w 8FCϑΥϯτͷ࢖͍ํʹ͍ͭͯ w ࿩͞ͳ͍͜ͱ w 8FCϑΥϯτબఆͳͲͷσβΠϯʹ͍ͭͯ
  5. $PQZSJHIU˜.PSJTBXB*OD"MM3JHIUT3FTFSWFE 8FCϑΥϯτͱ͸ʁ w ϝϦοτ w ࣗ༝౓ͷߴ͍8FCσβΠϯ w ΞΫηεϏϦςΟͷ޲্
 w σϝϦοτ

    w ϑΥϯτϑΝΠϧͷμ΢ϯϩʔυʹґΔ஗Ԇදࣔ w ೔ຊޠͳͲจࣈछͷଟ͍ϑΥϯτͰ͸༰ྔ͕େ͖͍
  6. $PQZSJHIU˜.PSJTBXB*OD"MM3JHIUT3FTFSWFE 8FCϑΥϯτͱ͸ʁ IUUQTXXXPODIPTIPLVKQ

  7. $PQZSJHIU˜.PSJTBXB*OD"MM3JHIUT3FTFSWFE 8FCϑΥϯτͱ͸ʁ IUUQTXXXDJUZTIJCVZBUPLZPKQ

  8. $PQZSJHIU˜.PSJTBXB*OD"MM3JHIUT3FTFSWFE 8FCϑΥϯτͷ࢖͍ํ w $44A!GPOUGBDFA @font-face { font-family: "MyFont"; src: url("fonts/MyFont.woff");

    } w $44AGPOUGBNJMZA body { font-family: "MyFont"; } ˡϑΥϯτ໊ʢԿͰ΋͍͍ʣ ˡϑΥϯτͷ৔ॴ ˡ!GPOUGBDFͰࢦఆͨ͠ϑΥϯτ໊
  9. $PQZSJHIU˜.PSJTBXB*OD"MM3JHIUT3FTFSWFE 8FCϑΥϯτͷ࢖͍ํ w $44A!GPOUGBDFA @font-face { font-family: "MyFont"; src: url("fonts/MyFont.woff")

    format("woff"), url("fonts/MyFont.ttf") format(“ttf"); } w $44AGPOUGBNJMZA body { font-family: "MyFont"; } ˣTSD͸ϑΥʔϧόοΫͰ͖·͢ ˢϨΨγʔϒϥ΢β޲͚ʹ ɹෳ਺ॻ͍ͨΓͰ͖·͢
  10. $PQZSJHIU˜.PSJTBXB*OD"MM3JHIUT3FTFSWFE 8FCϑΥϯτͷ࢖͍ํ w $44A!GPOUGBDFA @font-face { font-family: "MyFont"; src: url("fonts/MyFont.woff")

    format("woff"), url(“fonts/MyFont.ttf") format(“ttf"); } w $44AGPOUGBNJMZA body { font-family: "MyFont", serif; } ˣGPOUGBNJMZ΋ϑΥʔϧόοΫͰ͖·͢
  11. $PQZSJHIU˜.PSJTBXB*OD"MM3JHIUT3FTFSWFE 8FCϑΥϯτͷ࢖͍ํ w $44A!GPOUGBDFA @font-face { font-family: "MyFont"; src: url("fonts/MyFont.woff")

    format("woff2"), url(“fonts/MyFont.ttf") format(“ttf"); } w $44AGPOUGBNJMZA body { font-family: "ascii", "͔ͳ", "׽ࣈ"; } ˣӳޠɺ͔ͳɺ׽ࣈͷॻମΛ੾Γସ͑Δ͜ͱ΋Ͱ͖·͢
  12. $PQZSJHIU˜.PSJTBXB*OD"MM3JHIUT3FTFSWFE ϑΥϯτඳըλΠϜϥΠϯ w $44'POUT.PEVMF-FWFM w 5IF'POU%JTQMBZ5JNFMJOF IUUQTESBGUTDTTXHPSHDTTGPOUTGPOUEJTQMBZUJNFMJOF block period swap

    period font failure period ݟ͑ͳ͍จࣈͰ
 ϨϯμϦϯά ୅ସϑΥϯτͰ
 ϨϯμϦϯά ϑΥϯτऔಘதஅ UJNF
  13. $PQZSJHIU˜.PSJTBXB*OD"MM3JHIUT3FTFSWFE ϑΥϯτඳըλΠϜϥΠϯ w $44'POUT.PEVMF-FWFM w 5IF'POU%JTQMBZ5JNFMJOF IUUQTESBGUTDTTXHPSHDTTGPOUTGPOUEJTQMBZUJNFMJOF block period swap

    period font failure period ݟ͑ͳ͍จࣈͰ
 ϨϯμϦϯά ୅ସϑΥϯτͰ
 ϨϯμϦϯά ϑΥϯτऔಘதஅ '0*5 'MBTIPG*OWJTJCMF5FYU 
 จࣈ͕දࣔ͞Εͳ͍
  14. $PQZSJHIU˜.PSJTBXB*OD"MM3JHIUT3FTFSWFE UJNF ϑΥϯτඳըλΠϜϥΠϯ w $44'POUT.PEVMF-FWFM w 5IF'POU%JTQMBZ5JNFMJOF IUUQTESBGUTDTTXHPSHDTTGPOUTGPOUEJTQMBZUJNFMJOF block period

    swap period font failure period ݟ͑ͳ͍จࣈͰ
 ϨϯμϦϯά ୅ସϑΥϯτͰ
 ϨϯμϦϯά ϑΥϯτऔಘதஅ ϑΥϯτμ΢ϯϩʔυ׬ྃ
  15. $PQZSJHIU˜.PSJTBXB*OD"MM3JHIUT3FTFSWFE ϑΥϯτඳըλΠϜϥΠϯ w $44'POUT.PEVMF-FWFM w 5IF'POU%JTQMBZ5JNFMJOF IUUQTESBGUTDTTXHPSHDTTGPOUTGPOUEJTQMBZUJNFMJOF block period swap

    period font failure period ݟ͑ͳ͍จࣈͰ
 ϨϯμϦϯά ୅ସϑΥϯτͰ
 ϨϯμϦϯά ϑΥϯτऔಘதஅ '065 'MBTIPG6OTUZMFE5FYU 
 จࣈͷνϥ͖ͭൃੜ
  16. $PQZSJHIU˜.PSJTBXB*OD"MM3JHIUT3FTFSWFE UJNF ϑΥϯτඳըλΠϜϥΠϯ w $44'POUT.PEVMF-FWFM w 5IF'POU%JTQMBZ5JNFMJOF IUUQTESBGUTDTTXHPSHDTTGPOUTGPOUEJTQMBZUJNFMJOF block period

    swap period font failure period ݟ͑ͳ͍จࣈͰ
 ϨϯμϦϯά ୅ସϑΥϯτͰ
 ϨϯμϦϯά ϑΥϯτऔಘதஅ ͜͜·Ͱʹμ΢ϯϩʔυ Ͱ͖ͳ͍ͱதஅ͞ΕΔ
  17. $PQZSJHIU˜.PSJTBXB*OD"MM3JHIUT3FTFSWFE UJNF ϑΥϯτඳըλΠϜϥΠϯ w $44'POUT.PEVMF-FWFM w 5IF'POU%JTQMBZ5JNFMJOF IUUQTESBGUTDTTXHPSHDTTGPOUTGPOUEJTQMBZUJNFMJOF block period

    swap period font failure period ݟ͑ͳ͍จࣈͰ
 ϨϯμϦϯά ୅ସϑΥϯτͰ
 ϨϯμϦϯά ϑΥϯτऔಘதஅ $ISPNF 'JSFGPYT
  18. $PQZSJHIU˜.PSJTBXB*OD"MM3JHIUT3FTFSWFE UJNF ϑΥϯτඳըλΠϜϥΠϯ w $44'POUT.PEVMF-FWFM w 5IF'POU%JTQMBZ5JNFMJOF IUUQTESBGUTDTTXHPSHDTTGPOUTGPOUEJTQMBZUJNFMJOF block period

    swap period font failure period ݟ͑ͳ͍จࣈͰ
 ϨϯμϦϯά ୅ସϑΥϯτͰ
 ϨϯμϦϯά ϑΥϯτऔಘதஅ *& &EHFT
  19. $PQZSJHIU˜.PSJTBXB*OD"MM3JHIUT3FTFSWFE UJNF ϑΥϯτඳըλΠϜϥΠϯ w $44'POUT.PEVMF-FWFM w 5IF'POU%JTQMBZ5JNFMJOF IUUQTESBGUTDTTXHPSHDTTGPOUTGPOUEJTQMBZUJNFMJOF block period

    swap period font failure period ݟ͑ͳ͍จࣈͰ
 ϨϯμϦϯά ୅ସϑΥϯτͰ
 ϨϯμϦϯά ϑΥϯτऔಘதஅ 4BGBSJʿ
  20. $PQZSJHIU˜.PSJTBXB*OD"MM3JHIUT3FTFSWFE ೔ຊޠϑΥϯτͷ໰୊ w ༰ྔ͕େ͖͍
 
 ྫ͑͹ɺ(PPHMFͷ/PUP4BOT$+,Λར༻͢Δ৔߹ʜ ༻్ ϑΝΠϧ໊ ༰ྔ ݟग़͠

    /PUP4BOT$+,KQ#PMEPUG .# Ϧʔυ /PUP4BOT$+,KQ.FEJVNPUG .# ຊจ /PUP4BOT$+,KQ3FHVMBSPUG .#
  21. $PQZSJHIU˜.PSJTBXB*OD"MM3JHIUT3FTFSWFE ೔ຊޠϑΥϯτͷ໰୊ w άϦϑʢࣈܗʣ͕ෳࡶ
 
 ෳࡶͳάϦϑΛখαΠζͰදࣔ͢Δͱʜ ਌ᳵ ɾQU ɾQU ਌ᳵ

  22. $PQZSJHIU˜.PSJTBXB*OD"MM3JHIUT3FTFSWFE 8FCϑΥϯτ࠷దԽ w 8FCϑΥϯτϑΥʔϚοτ format ໊শ આ໌ ิ଍ UUG 5SVF5ZQF'POU

    5SVF5ZQFΞ΢τϥΠϯ (FOFSBM PUG 0QFO5ZQF'POU $''Ξ΢τϥΠϯ (FOFSBM XP⒎ 8FC0QFO'POU'PSNBU 8FCϑΥϯτ༻ͷѹॖϑΥϯτ 8FC XP⒎ 8FC0QFO'POU'PSNBU XP⒎ͷѹॖΞϧΰϦζϜվળ൛ 8FC FPU &NCFEEFE0QFO5ZQF *&޲͚ͷ.4ಠࣗ࢓༷ -FHBDZ TWH 4DBMBCMF7FDUPS(SBQIJDT 47(ܗࣜͷϑΥϯτ -FHBDZ
  23. $PQZSJHIU˜.PSJTBXB*OD"MM3JHIUT3FTFSWFE 8FCϑΥϯτ࠷దԽ w αϒηοτ
 
 ೔ຊޠͰΑ͘࢖͏จࣈ͚ͩͷϑΥϯτʹͨ͠৔߹
 ˞+*49ୈҰਫ४׽ࣈɺه߸ɺجຊϥςϯจࣈɺ͔ͳɺΧφ ࢀߟࢿྉʣ5BLBOPSJ0LJ ΠψͰ΋Θ͔Δ΢ΣϒϑΥϯτ 

    1ද ϑΝΠϧ໊ ࠷దԽલ ࠷దԽޙ 80'' ࠷దԽޙ 80'' /PUP4BOT$+,KQ#PMEPUG .# ,# ,# /PUP4BOT$+,KQ.FEJVNPUG .# ,# ,# /PUP4BOT$+,KQ3FHVMBSPUG .# ,# ,#
  24. $PQZSJHIU˜.PSJTBXB*OD"MM3JHIUT3FTFSWFE 8FCϑΥϯτ࠷దԽ w "QQMFͷ8FCαΠτͷ৔߹
 
 จࣈఔ౓ʴXP⒎ѹॖ IUUQTXXXBQQMFDPNKQ ϑΝΠϧ໊ ༰ྔ 4'1SP+1@SFHVMBSXP⒎

    ,# 4'1SP+1@TFNJCPMEXP⒎ ,#
  25. $PQZSJHIU˜.PSJTBXB*OD"MM3JHIUT3FTFSWFE 8FCϑΥϯτ࠷దԽ w ࠷దԽ͸݁ߏΊΜͲ͍͘͞Ͱ͢ΑͶʜ

  26. $PQZSJHIU˜.PSJTBXB*OD"MM3JHIUT3FTFSWFE 8FCϑΥϯτ࠷దԽ w 8FCϑΥϯταʔϏεΛ࢖͏ʂ IUUQTUZQFTRVBSFDPN

  27. $PQZSJHIU˜.PSJTBXB*OD"MM3JHIUT3FTFSWFE 8FCϑΥϯτ࠷దԽ w αϒηοτͱϑΥʔϚοτม׵͕ࣗಈͰߦΘΕ·͢ʂ
 '065ʢνϥπΩʣ΋σϑΥϧτઃఆͰ཈੍ʂ IUUQTUZQFTRVBSFDPN

  28. $PQZSJHIU˜.PSJTBXB*OD"MM3JHIUT3FTFSWFE ࢀߟࢿྉ w ΠψͰ΋Θ͔Δ΢ΣϒϑΥϯτʢബ͍ຊʣ
 ˣ঎ۀ൛ͰϦχϡʔΞϧ
 ΢ΣϒϑΥϯτ࣮ફϚχϡΞϧେ໦ଚلʢஶʣ
 IUUQTXXXBNB[PODPKQEQ IUUQTESBGUTDTTXHPSHDTTGPOUT IUUQTUZQFTRVBSFDPN w

    $44'POUT.PEVMF-FWFM
 w 5ZQF4RVBSF