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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

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

7,351
views

Published on

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

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


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

No Downloads
Views
Total Views
7,351
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
110
Comments
0
Likes
26
Embeds 0
No embeds

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