中文網路字型的現況與挑戰(Webconf 20130113)

8,360 views

Published on

簡介英文web font應用,和中文網路字型目前現狀,克服的問題和尚未解決的問題

0 Comments
28 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,360
On SlideShare
0
From Embeds
0
Number of Embeds
2,778
Actions
Shares
0
Downloads
120
Comments
0
Likes
28
Embeds 0
No embeds

No notes for slide

中文網路字型的現況與挑戰(Webconf 20130113)

  1. 1. 中文網路字型 現況與挑戰
  2. 2. 葉俊麟 (Michael)justfont.com 創辦人曾任中華數位研發經理威鋒數位(華康字型)產品經理
  3. 3. Web fonts ?
  4. 4. You can only use“細明體”
  5. 5. Why ?
  6. 6. .title { font-family: “信黑體W6” , “細明體” , Arial, sans-serif;}
  7. 7. <img src=http://www.justfont.com/logo.jpg >
  8. 8. sIFR / Cufón
  9. 9. WOFF(Web open font format , 2010/8) Google.com/webfonts (2010/05) Typekit.com (2009/11)
  10. 10. .title { font-family: “myFont” , Arial, sans-serif;}@font-family { font-family: myFont; src: url(http://xxx/myfont.ttf);} Download or Web font service
  11. 11. Google.com/webfonts 613Typekit.com 873Fonts.com 2000+WebInk.com 1000+fontDeck.com 1000+Webtype.com 80+Typotheque.com 60+
  12. 12. Web fonts in 10-15% of top 1000 websites Latin fonts Technology Adoption Curve
  13. 13. Google
  14. 14. Typekit
  15. 15. Why use Web Fonts ? 建立排版一致性 改善用戶體驗 強化SEO 解析度問題 支援html5效果
  16. 16. Asian Fonts?
  17. 17. .title { font-family: “雅坊POP3” , Arial, sans-serif;}@font-family { font-family: “雅坊POP3” ; src: url(http://xxx/ AFUPOP03.ttf);} Download ? Web font service ?
  18. 18. HugeBig5 (13,053) = 6~8MBUnicode 6.0 (109,449) = 50MB
  19. 19. ActuallyWhat actually is on CJK web page?
  20. 20. 35kAverage characters in CJK web pagesScan 25% of the web(references from 2012 AtypI)
  21. 21. 6,255chars to cover 50% (TC)12,514 chars to cover 90% (TC)22,709 chars to cover 99% (TC)(references from 2012 AtypI)
  22. 22. 793unique chars to cover 80% (TC)1,245 unique chars to cover 90% (TC)2,940 unique chars to cover 99% (TC)
  23. 23. SubsetFont subsetting delivers only the fontcharacters that are used for thedisplayed content
  24. 24. Pre-Subsetting Dynamic Subsetting<linkhref=http://xxxxx/css?&subset=latinref=“stylesheet”type=“text/css”>
  25. 25. Pre-Subsetting Dynamic SubsettingSmall font size (300k or 1M ?) Small font size (50k average)Static content Dynamic contentContent values identified at No additional set-up at designdesign time time Optimization for Chinese font Improves page load times
  26. 26. 90%estimate that there us a timesaving (and therefore a cost saving)in excess of 90% by using webfonts over static images.
  27. 27. 挑戰
  28. 28. SpeedFile compressionSubsetting techniquesWOFF/TTF/EOT formatDownload times
  29. 29. 2 ‘sLatin: 100-300k, ½ - 2 seconds.Downloading a web font delays theusers from starting to read the page.
  30. 30. Testingjustfont service10 page averageDynamic Subsetting technology
  31. 31. justfont.comStart 1.91s 2.59s 680 ms Script 392 subsetting ms 576 Css + ms download 476 ms
  32. 32. 0.68 sChinese: 30-400k, 1.4 – 3 seconds.Using justfont subsetting technology.No easy way to re-use the subset onanother pageGood for article titles
  33. 33. 字體授權?
  34. 34. 「 一直來日本字型品質超越中文許多,但我始 終認為,漢字是我們的文字。 有生之年我只 想做好兩套字,一套是黑體,一套是宋體。 」 — 柯熾堅
  35. 35. 字體數量!!
  36. 36. 50 套+2013/2/1藝術字型 藝術字型 藝術字型 藝術字型藝術字型 藝術字型 藝術字型 藝術字型藝術字型 藝術字型 藝術字型 藝術字型
  37. 37. FOUTFOUTFlash of Unstyled Text !!!!!
  38. 38. Start 1.91s 2.59s Script 392 Subsetting ms 576 Css + ms download 476 ms FOUT
  39. 39. Start 1.91s 2.59s Script 392 Subsetting ms 576 Css + ms download 476 ms FOUT
  40. 40. Start 1.91s 2.59s Script 392 Subsetting ms 576 Css + ms download 476 ms .jf-loading .jf-active .jf-inactive
  41. 41. <html class=“jf-loading”> ……</html>
  42. 42. .title { 預設顯示 visibility: visible;} 執行後隱藏.jf-loafing .title { opacity: 0; visibility: hidden;} 成功時顯示.jf-active .title { opacity: 1; transition: opacity 0.3s ease 0.4s; visibility: visible;} 失敗時顯示.jf-inactive .title { visibility: visible;}
  43. 43. Browser
  44. 44. Web desinger
  45. 45. Web fonts in < 1% of top 1000 websitesChinese Technology Adoption Curve
  46. 46. 新iPad螢幕解析度為2048×1536 的視網膜顯示螢幕,解析度為 iPad 2的4倍,超越印刷出版品質。提供跨平台與瀏覽器的閱讀和使用體驗
  47. 47. 字型知識
  48. 48. 最專業的字型學社群字體123:web font的使用(上)(中) (下)字體123:必須知道的字型基本知識字體123:大家都能懂的通用字體字型沒那麼簡單:中性字體之必要字型沒那麼簡單:現代倉頡怎麼造字如何跨平台顯示更好讀的字體(1)(2)[But專欄]字型設計自己來─中文字型設計 (1) (2) (3)[日星專刊] 漫談活版印刷 (1) (2)視覺錯視與字型設計 (1) (2)justFont 密技:怎樣跨平台顯示更好讀的字體?
  49. 49. 日星鑄字行 信黑體作者 張介 柯熾堅 冠 2012/03/23 2012/08/14談現代字體應用設計 混排× 復刻× 大師對話
  50. 50. 字戀小聚
  51. 51. Michaelmichael@justfont.com0932-523454

×