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

中文網路字型
現況與挑戰

葉俊麟 (Michael)
justfont.com 創辦人

曾任
中華數位研發經理
威鋒數位(華康字型)產品經理

You can only use

“細明體”

.title {
font-family: “信黑體W6” , “細明體” ,
Arial, sans-serif;
}

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 613
Typekit.com 873
Fonts.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

Why use Web Fonts ?
建立排版一致性
改善用戶體驗
強化SEO
解析度問題
支援html5效果

.title {
font-family: “雅坊POP3” , Arial, sans-serif;
}

@font-family {
font-family: “雅坊POP3” ;
src: url(http://xxx/ AFUPOP03.ttf);
}
Download ?
Web font service ?

Huge
Big5 (13,053) = 6~8MB
Unicode 6.0 (109,449) = 50MB

Actually
What actually is on CJK web page?

35k
Average characters in CJK web pages
Scan 25% of the web

(references from 2012 AtypI)

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)

793
unique chars to cover 80% (TC)
1,245 unique chars to cover 90% (TC)
2,940 unique chars to cover 99% (TC)

Subset
Font subsetting delivers only the font
characters that are used for the
displayed content

Pre-Subsetting Dynamic Subsetting

<link
href=http://xxxxx/css?
&subset=latin
ref=“stylesheet”
type=“text/css”>

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

90%
estimate that there us a time
saving (and therefore a cost saving)
in excess of 90% by using web
fonts over static images.

Speed
File compression
Subsetting techniques
WOFF/TTF/EOT format
Download times

2 ‘s
Latin: 100-300k, ½ - 2 seconds.
Downloading a web font delays the
users from starting to read the page.

Testing
justfont service
10 page average
Dynamic Subsetting technology

justfont.com
Start 1.91s 2.59s

680 ms
Script

392 subsetting
ms
576 Css +
ms download
476
ms

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

「一直來日本字型品質超越中文許多，但我始
終認為，漢字是我們的文字。有生之年我只
想做好兩套字，一套是黑體，一套是宋體。」

— 柯熾堅

50 套+

2013/2/1
藝術字型藝術字型藝術字型藝術字型



FOUT
FOUT
Flash 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

.jf-loading .jf-active
.jf-inactive

.title { 預設顯示
visibility: visible;
}
執行後隱藏
.jf-loafing .title {
opacity: 0;
visibility: hidden;
}
成功時顯示
.jf-active .title {
opacity: 1;
transition: opacity 0.3s ease 0.4s;
}
失敗時顯示
.jf-inactive .title {
}

Web fonts in < 1% of top 1000 websites

Chinese

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
談現代字體應用設計混排× 復刻× 大師對話

Michael
michael@justfont.com
0932-523454

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

More Related Content

Viewers also liked

More from michael 葉

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