Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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

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

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

Avatar for Takafumi Omuro

Takafumi Omuro

July 26, 2018

More Decks by Takafumi Omuro

See All by Takafumi Omuro
Devinを導入したら予想外の人たちに好評だった
Avatar for Takafumi Omuro tomuro
0
1.4k
進化するAWSデータストアと選択の変遷
Avatar for Takafumi Omuro tomuro
0
770
デザインレビューをAIにしてもらいたい！
Avatar for Takafumi Omuro tomuro
2
1.5k
生成AIで生産性向上
Avatar for Takafumi Omuro tomuro
0
700
Cloudflare Workers の実行時間が遅くなることがある
Avatar for Takafumi Omuro tomuro
0
58
生成AI使ってますか？
〜Amazon Bedrockで試してみよう〜
Avatar for Takafumi Omuro tomuro
2
490
Morisawa Fonts 新プランでのStripe導入事例
Avatar for Takafumi Omuro tomuro
0
230
Cloudflareを活用したWebフォントサービスの概要
Avatar for Takafumi Omuro tomuro
0
350
Stripeでサブスクリプションに割引を適用したときの注意点
Avatar for Takafumi Omuro tomuro
0
450

Other Decks in Technology

See All in Technology
Antigravity SDK for the Java Developer
Avatar for Guillaume Laforge glaforge
0
200
C#未経験の僕がAIに読めるコードを書かせるまで
Avatar for マグロ隊長kinTV maguroalternative
0
290
メルカリにおけるAI時代の高速プロトタイピング基盤「Arca」
Avatar for Ryota Arai ryotarai
12
8.7k
認知負荷を吸収し、プロダクトをまたぐPR Preview基盤の設計事例
Avatar for taiki45 taiki45
2
240
負債のメタファと2026年 / Debt Metaphor in Agentic Engineering Age 202609 Edition
Avatar for Takuto WADA twada
PRO
12
7k
「どのログを見ればいい？」 から始めた サーバーレス障害解析
Avatar for y_waka1 y_waka1
1
150
AI感のないAWS構成図をAIエージェントに描かせたい！
Avatar for さご sagochiko
1
360
「大丈夫そう？」をObservabilityで確かめる
Avatar for Yusuke Muramatsu mrmtsu
0
150
手を動かして実感する、Kiro が変える開発体験
Avatar for Riku INADA inariku
0
310
特殊変数大全
Avatar for dak2 dak2
0
130
ADKで始める業務改善 - AIエージェント開発時の考えと設計
Avatar for Kazuki Hara harappa80
2
290
高負荷プロダクション環境におけるAWS Lambdaのリアル 〜スケールとコストを左右する実行ライフサイクルの技術仕様〜
Avatar for maimyyym maimyyym
2
580

Featured

See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
56
3.5k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3.2k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
4.9k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
5.2k
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
570
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
340
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.8k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
3k
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.6k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
220k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
10k

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