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

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

on

  • 7,619 views

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

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

Statistics

Views

Total Views
7,619
Views on SlideShare
4,882
Embed Views
2,737

Actions

Likes
26
Downloads
104
Comments
0

7 Embeds 2,737

http://deathhell1121.blogspot.tw 2713
http://www.plurk.com 8
http://blog.wingzero.tw 7
http://pinterest.com 4
http://deathhell1121.blogspot.com 2
http://deathhell1121.blogspot.fr 2
http://deathhell1121.blogspot.hk 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

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