Contenu connexe Similaire à 中文網路字型的現況與挑戰(Webconf 20130113) (20) 中文網路字型的現況與挑戰(Webconf 20130113)6. .title {
font-family: “信黑體W6” , “細明體” ,
Arial, sans-serif;
}
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
21. Why use Web Fonts ?
建立排版一致性
改善用戶體驗
強化SEO
解析度問題
支援html5效果
26. .title {
font-family: “雅坊POP3” , Arial, sans-serif;
}
@font-family {
font-family: “雅坊POP3” ;
src: url(http://xxx/ AFUPOP03.ttf);
}
Download ?
Web font service ?
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)
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.
40. 2 ‘s
Latin: 100-300k, ½ - 2 seconds.
Downloading a web font delays the
users from starting to read the page.
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
54. 50 套+
2013/2/1
藝術字型 藝術字型 藝術字型 藝術字型
藝術字型 藝術字型 藝術字型 藝術字型
藝術字型 藝術字型 藝術字型 藝術字型
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
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;
}
66. Web fonts in < 1% of top 1000 websites
Chinese
Technology Adoption Curve
70. 日星鑄字行 信黑體作者
張介 柯熾堅
冠
2012/03/23 2012/08/14
談現代字體應用設計 混排× 復刻× 大師對話