2. Web
fonts

3. !
.title
{
font-­‐family:
“myFont”
,
Arial,
sans-­‐serif;
}
!
@font-­‐family
{
font-­‐family:
myFont;
src:
url(http://xxx/myfont.ttf);
}
Download
or
Web
font
service

5. Technology
Adoption
Curve
Web
fonts
in
10-­‐15%
of
top
1000
websites
Latin
fonts

11. Google

12. Typekit

14. Why
use
Web
Fonts
?
建⽴立排版⼀一致性
改善⽤用⼾戶體驗!
強化SEO!
解析度問題!
⽀支援html5效果

15. 中⽂文 ?

19. !
.title
{
font-­‐family:
“雅坊POP3”
,
Arial,
sans-­‐serif;
}
!
@font-­‐family
{
font-­‐family:
“雅坊POP3”
;
src:
url(http://xxx/
AFUPOP03.ttf);
}
Download
?
Web
font
service
?

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

22. Actually
What
actually
is
on
CJK
web
page?

24. Latin
20k
Chinese
8M

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

26. Dynamic
Subsetting
Small
font
size
(50k
average)
Dynamic
content
No
additional
set-­‐up
at
design
time
Optimization
for
Chinese
font
Improves
page
load
times

27. font
data
!
Javascript
ajax

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

29. 2.39
s
Chinese:
30-­‐400k
Using
justfont
subsetting
technology.
No
easy
way
to
re-­‐use
the
subset
on
another
page
Good
for
article
titles
Record
by
2012/2/10

30. 1.58
s
Chinese:
30-­‐400k
Using
justfont
subsetting
technology.
No
easy
way
to
re-­‐use
the
subset
on
another
page
Good
for
article
titles
Record
by
2013/10/10

31. 0.16
s
Chinese:
30-­‐400k
Using
justfont
subsetting
technology.
No
easy
way
to
re-­‐use
the
subset
on
another
page
Good
for
article
titles
Record
by
2014/5/29

32. Justfont提供跨平台與瀏覽器!
的閱讀和使⽤用體驗
新iPad螢幕解析度為2048×1536的
視網膜顯⽰示螢幕，解析度為iPad 2
的4倍，超越印刷出版品質。!

42. 260,000
k/
⽉月

43. justfont 平台服務
■ 中⽂文網路字型平台服務!
■ 深耕和推廣字型相關知識!
字型學(Typography)
字型講座舉辦!
■ 代理字型業務!
信⿊黑體授權(電⼦子書/APP)
■ 發明專利保護(台灣/⼤大陸)!
藉由圖騰伺服器產⽣生網⾴頁圖騰之⽅方法及其系統!
將⾃自訂標籤應⽤用於XML⽂文件之⽅方法及其系統

44. 字體123：web font的使⽤用（上）(中) (下)!
字體123：必須知道的字型基本知識!
字體123：⼤大家都能懂的通⽤用字體!
字型沒那麼簡單：中性字體之必要!
字型沒那麼簡單：現代倉頡怎麼造字!
如何跨平台顯⽰示更好讀的字體（1）(2)!
[But專欄]字型設計⾃自⼰己來─中⽂文字型設計 (1) (2) (3)!
[⽇日星專刊] 漫談活版印刷 (1) (2)!
視覺錯視與字型設計 (1) (2)!
justFont 密技：怎樣跨平台顯⽰示更好讀的字體？
專業的字型學社群

45. 2012/03/23
談現代字體應⽤用設計
2012/08/14
混排× 復刻× ⼤大師對話
⽇日星鑄字⾏行!
張介冠
信⿊黑體作者!
柯熾堅

46. ⿊黑與⽩白的饗宴III (2013/4/13)!
之字型松 + 創意字型展!
張介冠：⼿手書、⾏行氣與活字!
吳逸⽂文 (Even Wu)：平⾯面排版與當代網⾴頁設計!
柯志杰：漫談漢字印刷字體的形成!
張軒豪：Think the Opposite!
柯熾堅：給中⽂文設計師的建⾔言

47. 字戀⼩小聚

48. +

50. 幼兒學習網站!
注⾳音字型