中文網路字型的現況與挑戰(Webconf 20130113)
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

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

  • 8,076 views
Uploaded on

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

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
8,076
On Slideshare
5,337
From Embeds
2,739
Number of Embeds
7

Actions

Shares
Downloads
105
Comments
0
Likes
26

Embeds 2,739

http://deathhell1121.blogspot.tw 2,713
http://blog.wingzero.tw 9
http://www.plurk.com 8
http://pinterest.com 4
http://deathhell1121.blogspot.com 2
http://deathhell1121.blogspot.fr 2
http://deathhell1121.blogspot.hk 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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