中文網路字型的現況與挑戰(webconf 20130113)
DESCRIPTION
簡介英文web font應用,和中文網路字型目前現狀，克服的問題和尚未解決的問題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
Typekit.com
Fonts.com
WebInk.com
fontDeck.com
Webtype.com
Typotheque.com
613
873
2000+
1000+
1000+
80+
60+
Technology Adoption Curve
Web fonts in 10-15% of top 1000 websites
Latin fonts
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 font characters that are used for the displayed content
<link href=http://xxxxx/css? &subset=latin ref=“stylesheet” type=“text/css”>
Dynamic SubsettingPre-Subsetting
Dynamic SubsettingPre-Subsetting
Small font size (300k or 1M ?)
Static content
Content values identified at design time
Small font size (50k average)
Dynamic content
No additional set-up at design time
Optimization for Chinese font
Improves page load times
90%estimate that there us a time saving (and therefore a cost saving) in excess of 90% by using web fonts over static images.
挑 戰
SpeedFile compressionSubsetting techniquesWOFF/TTF/EOT formatDownload times
2 ‘sLatin: 100-300k, ½ - 2 seconds.Downloading a web font delays the users from starting to read the page.
Testingjustfont service10 page averageDynamic Subsetting technology
Script
subsetting
Css +download
576ms
476ms
392ms
1.91s 2.59s
680 ms
Start
justfont.com
0.68 sChinese: 30-400k, 1.4 – 3 seconds.Using justfont subsetting technology.No easy way to re-use the subset on another pageGood for article titles
字體授權 ?
「 一直來日本字型品質超越中文許多，但我始終認為，漢字是我們的文字。 有生之年我只想做好兩套字，一套是黑體，一套是宋體。 」
— 柯熾堅
字體數量 !!
藝術字型
藝術字型
藝術字型 藝術字型
藝術字型
藝術字型
50 套 +
藝術字型
藝術字型
藝術字型
藝術字型
藝術字型
藝術字型2013/2/1
FOUTFlash of Unstyled Text !!!!!
FOUTFlash of Unstyled Text !!!!!
Script
Subsetting
Css +download
576ms
476ms
392ms
1.91s 2.59sStart
FOUT
Script
Subsetting
Css +download
576ms
476ms
392ms
1.91s 2.59sStart
FOUT
.jf-loading
Subsetting
Css +download
576ms
476ms
392ms
1.91s 2.59sStartScript
.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
Technology Adoption Curve
Web fonts in < 1% of top 1000 websites
Chinese
提供跨平台與瀏覽器的閱讀和使用體驗
新 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
混排 × 復刻 × 大師對話
日星鑄字行
張介冠
信黑體作者
柯熾堅
字戀小聚
