Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Avatar for Takafumi Omuro Takafumi Omuro
July 26, 2018
Technology
0
110

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

Avatar for Takafumi Omuro

Takafumi Omuro

July 26, 2018
Tweet

More Decks by Takafumi Omuro

See All by Takafumi Omuro
デザインレビューをAIにしてもらいたい！
Avatar for Takafumi Omuro tomuro
2
950
生成AIで生産性向上
Avatar for Takafumi Omuro tomuro
0
460
Cloudflare Workers の実行時間が遅くなることがある
Avatar for Takafumi Omuro tomuro
0
18
生成AI使ってますか？
〜Amazon Bedrockで試してみよう〜
Avatar for Takafumi Omuro tomuro
2
340
Morisawa Fonts 新プランでのStripe導入事例
Avatar for Takafumi Omuro tomuro
0
140
Cloudflareを活用したWebフォントサービスの概要
Avatar for Takafumi Omuro tomuro
0
260
Stripeでサブスクリプションに割引を適用したときの注意点
Avatar for Takafumi Omuro tomuro
0
350
クラウドを利用したサブスクリプションサービスに向けて内製化開発に切り替えた話
Avatar for Takafumi Omuro tomuro
2
610
SESからSendGridに変更したけど移行で問題が出た話
Avatar for Takafumi Omuro tomuro
1
2.2k

Other Decks in Technology

See All in Technology
新規案件の立ち上げ専門チームから見たAI駆動開発の始め方
Avatar for ShuyaKinjo shuyakinjo
0
660
Kubernetes における cgroup v2 でのOut-Of-Memory 問題の解決
Avatar for Preferred Networks pfn
PRO
0
460
実運用で考える PGO
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
0
140
JuniorからSeniorまで: DevOpsエンジニアの成長ロードマップ
Avatar for yuriemori yuriemori
2
360
LLM翻訳ツールの開発と海外のお客様対応等への社内導入事例
Avatar for gree_tech gree_tech
PRO
0
500
エニグモ_会社紹介資料（エンジニア職種向け）.pdf
Avatar for 株式会社エニグモ enigmo_hr
0
2.2k
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
Avatar for Masaya Kudo msykd
PRO
1
310
【５分でわかる】セーフィー エンジニア向け会社紹介
Avatar for Safie safie_recruit
0
30k
まだ間に合う！ StrandsとBedrock AgentCoreでAIエージェント構築に入門しよう
Avatar for みのるん minorun365
PRO
11
840
おやつは300円まで！の最適化を模索してみた
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
0
270
コスト削減の基本の「キ」～ コスト消費3大リソースへの対策 ～
Avatar for Makky12 smt7174
2
340
MCPで変わる Amebaデザインシステム「Spindle」の開発
Avatar for Ameba Spindle spindle
PRO
3
2.6k

Featured

See All Featured
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.4k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.8k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
358
30k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
69
4.8k
The Language of Interfaces
Avatar for Des Traynor destraynor
160
25k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
23
1.4k
How GitHub (no longer) Works
Avatar for Zach Holman holman
315
140k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
70
11k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
71
11k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
185
54k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
236
140k

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