Embed Size (px)
Citation preview
Web fonts
!.title { font-‐family: “myFont” , Arial, sans-‐serif; } !@font-‐family { font-‐family: myFont; src: url(http://xxx/myfont.ttf); } Download or
Web font service
Technology Adoption Curve
Web fonts in 10-‐15% of top 1000 websites
Latin fonts
Typekit
Why use Web Fonts ?
建⽴立排版⼀一致性改善⽤用⼾戶體驗!強化SEO!解析度問題!⽀支援html5效果
中⽂文 ?
!.title { font-‐family: “雅坊POP3” , Arial, sans-‐serif; } !@font-‐family { font-‐family: “雅坊POP3” ; src: url(http://xxx/ AFUPOP03.ttf); }
Download ? Web font service ?
HugeBig5 (13,053) = 6~8MB Unicode 6.0 (109,449) = 50MB
ActuallyWhat actually is on CJK web page?
Latin
20k
Chinese
8M
SubsetFont subsetting delivers only the font characters that are used for the displayed content
Dynamic Subsetting
Small font size (50k average)
Dynamic content
No additional set-‐up at design time
Optimization for Chinese font
Improves page load times
font data
!Javascript
ajax
SpeedFile compression Subsetting techniques WOFF/TTF/EOT format Download times
2.39 sChinese: 30-‐400k Using justfont subsetting technology. No easy way to re-‐use the subset on another page Good for article titles Record by 2012/2/10
1.58 sChinese: 30-‐400k Using justfont subsetting technology. No easy way to re-‐use the subset on another page Good for article titles Record by 2013/10/10
0.16 sChinese: 30-‐400k Using justfont subsetting technology. No easy way to re-‐use the subset on another page Good for article titles Record by 2014/5/29
Justfont提供跨平台與瀏覽器!的閱讀和使⽤用體驗
新iPad螢幕解析度為2048×1536的視網膜顯⽰示螢幕，解析度為iPad 2的4倍，超越印刷出版品質。!
260,000 k/ ⽉月
justfont 平台服務■ 中⽂文網路字型平台服務!■ 深耕和推廣字型相關知識!
字型學(Typography) 字型講座舉辦!
■ 代理字型業務!信⿊黑體授權(電⼦子書/APP)
■ 發明專利保護(台灣/⼤大陸)!藉由圖騰伺服器產⽣生網⾴頁圖騰之⽅方法及其系統!
將⾃自訂標籤應⽤用於XML⽂文件之⽅方法及其系統
字體123：web font的使⽤用（上）(中) (下)!
字體123：必須知道的字型基本知識!
字體123：⼤大家都能懂的通⽤用字體!
字型沒那麼簡單：中性字體之必要!
字型沒那麼簡單：現代倉頡怎麼造字!
如何跨平台顯⽰示更好讀的字體（1）(2)!
[But專欄]字型設計⾃自⼰己來─中⽂文字型設計 (1) (2) (3)!
[⽇日星專刊] 漫談活版印刷 (1) (2)!
視覺錯視與字型設計 (1) (2)!
justFont 密技：怎樣跨平台顯⽰示更好讀的字體？
專業的字型學社群
2012 /03 /23談現代字體應⽤用設計
2012 /08 /14
混排× 復刻× ⼤大師對話
⽇日星鑄字⾏行!
張介冠信⿊黑體作者!
柯熾堅
⿊黑與⽩白的饗宴III (2013/4/13)! 之字型松 + 創意字型展!張介冠：⼿手書、⾏行氣與活字!吳逸⽂文 (Even Wu)：平⾯面排版與當代網⾴頁設計!柯志杰：漫談漢字印刷字體的形成!張軒豪：Think the Opposite!柯熾堅：給中⽂文設計師的建⾔言
字戀⼩小聚
+
幼兒學習網站!注⾳音字型
