中文網路字型的現況與挑戰(Webconf 20130113)
Jan. 12, 2013•0 likes•4,761 views
Download to read offline
Report
簡介英文web font應用,和中文網路字型目前現狀，克服的問題和尚未解決的問題
michael 葉Follow
More Related Content
Viewers also liked
Does firefox matter?Irvin Chen
Secret sauce of building php applicationsLin Yo-An
20130113 Web Conference - communicateHitomi Yang
2013 01 13 webconf milkmidi Flash綠茶 奶
JavaScript for backendCaesar Chi
BDD in .NETJoey Chen
Similar to 中文網路字型的現況與挑戰(Webconf 20130113)
前端样式开发演变之路Zhao Lei
Qq.com前端架构实践与思考greengnn
浅析浏览器解析和渲染Ailsa126
编辑器设计Kissy editortaobao.com
Responsive Web UI Designjay li
网站字体渲染-麦时time zhong
More from michael 葉
Typography in web (modern web 2015)michael 葉
你不知道的內文字設計michael 葉
《文與字》2013/12/25 於清大服科所分享michael 葉
日星鉛字漫步雲端michael 葉
字型設計基礎 視覺均衡(字戀小聚-20121220)michael 葉
字型N次方 — 朱其明michael 葉
中文網路字型的現況與挑戰(Webconf 20130113)
- 1. 中文網路字型 現況與挑戰
- 3. Web fonts ?
- 4. You can only use “細明體”
- 5. Why ?
- 6. .title { font-family: “信黑體W6” , “細明體” , Arial, sans-serif; }
- 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
- 12. Google.com/webfonts 613 Typekit.com 873 Fonts.com 2000+ WebInk.com 1000+ fontDeck.com 1000+ Webtype.com 80+ Typotheque.com 60+
- 13. Web fonts in 10-15% of top 1000 websites Latin fonts Technology Adoption Curve
- 19. Google
- 20. Typekit
- 21. Why use Web Fonts ? 建立排版一致性 改善用戶體驗 強化SEO 解析度問題 支援html5效果
- 22. Asian Fonts?
- 26. .title { font-family: “雅坊POP3” , Arial, sans-serif; } @font-family { font-family: “雅坊POP3” ; src: url(http://xxx/ AFUPOP03.ttf); } Download ? Web font service ?
- 28. Huge Big5 (13,053) = 6~8MB Unicode 6.0 (109,449) = 50MB
- 29. Actually What actually is on CJK web page?
- 31. 35k Average characters in CJK web pages Scan 25% of the web (references from 2012 AtypI)
- 32. 6,255 chars to cover 50% (TC) 12,514 chars to cover 90% (TC) 22,709 chars to cover 99% (TC) (references from 2012 AtypI)
- 33. 793 unique chars to cover 80% (TC) 1,245 unique chars to cover 90% (TC) 2,940 unique chars to cover 99% (TC)
- 34. Subset Font subsetting delivers only the font characters that are used for the displayed content
- 35. Pre-Subsetting Dynamic Subsetting <link href=http://xxxxx/css? &subset=latin ref=“stylesheet” type=“text/css”>
- 36. Pre-Subsetting Dynamic Subsetting Small font size (300k or 1M ?) Small font size (50k average) Static content Dynamic content Content values identified at No additional set-up at design design time time Optimization for Chinese font Improves page load times
- 37. 90% estimate that there us a time saving (and therefore a cost saving) in excess of 90% by using web fonts over static images.
- 38. 挑戰
- 39. Speed File compression Subsetting techniques WOFF/TTF/EOT format Download times
- 40. 2 ‘s Latin: 100-300k, ½ - 2 seconds. Downloading a web font delays the users from starting to read the page.
- 41. Testing justfont service 10 page average Dynamic Subsetting technology
- 42. justfont.com Start 1.91s 2.59s 680 ms Script 392 subsetting ms 576 Css + ms download 476 ms
- 43. 0.68 s Chinese: 30-400k, 1.4 – 3 seconds. Using justfont subsetting technology. No easy way to re-use the subset on another page Good for article titles
- 44. 字體授權?
- 45. 「 一直來日本字型品質超越中文許多，但我始 終認為，漢字是我們的文字。 有生之年我只 想做好兩套字，一套是黑體，一套是宋體。 」 — 柯熾堅
- 53. 字體數量!!
- 54. 50 套+ 2013/2/1 藝術字型 藝術字型 藝術字型 藝術字型 藝術字型 藝術字型 藝術字型 藝術字型 藝術字型 藝術字型 藝術字型 藝術字型
- 55. FOUT FOUT Flash of Unstyled Text !!!!!
- 56. Start 1.91s 2.59s Script 392 Subsetting ms 576 Css + ms download 476 ms FOUT
- 57. Start 1.91s 2.59s Script 392 Subsetting ms 576 Css + ms download 476 ms FOUT
- 58. Start 1.91s 2.59s Script 392 Subsetting ms 576 Css + ms download 476 ms .jf-loading .jf-active .jf-inactive
- 59. <html class=“jf-loading”> …… </html>
- 60. .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; }
- 61. Browser
- 64. Web desinger
- 66. Web fonts in < 1% of top 1000 websites Chinese Technology Adoption Curve
- 67. 新iPad螢幕解析度為2048×1536 的視網膜顯示螢幕，解析度為 iPad 2的4倍，超越印刷出版品質。 提供跨平台與瀏覽器 的閱讀和使用體驗
- 68. 字型知識
- 69. 最專業的字型學社群 字體123：web font的使用（上）(中) (下) 字體123：必須知道的字型基本知識 字體123：大家都能懂的通用字體 字型沒那麼簡單：中性字體之必要 字型沒那麼簡單：現代倉頡怎麼造字 如何跨平台顯示更好讀的字體（1）(2) [But專欄]字型設計自己來─中文字型設計 (1) (2) (3) [日星專刊] 漫談活版印刷 (1) (2) 視覺錯視與字型設計 (1) (2) justFont 密技：怎樣跨平台顯示更好讀的字體？
- 70. 日星鑄字行 信黑體作者 張介 柯熾堅 冠 2012/03/23 2012/08/14 談現代字體應用設計 混排× 復刻× 大師對話
- 71. 字戀小聚