交點台大Vol.9 - 葉俊麟 - justfont分享

421 views
296 views

Published on

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
421
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

交點台大Vol.9 - 葉俊麟 - justfont分享

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

×