推 Ken52039:這超實用，感恩推 06/30 12:08
測試混合fontface雲端服務，Web Fonts+Typekit
測試頁 http://evendesign.tw/demo/cssfontface.html
Typekit http://typekit.com
WebFonts http://webfonts.fonts.com
一直以來我認為英文FF Meta Serif字體加上中文金黑體，
搭配起來非常好看，但是網頁就得轉成圖，
不然別人也看不到。
沒想到現在可以用一些提供@font-face字體的雲端服務實現了！
而且還是動態的！
所以這個頁面沒有使用圖片！
我用了兩家字體雲端服務：Web Fonts, Typekit
使用字體雲端服務的好處，就是不用擔心授權問題。
Typekit其中的一些字體是要付費的，如這頁使用的“HTML & CSS”
是Typekit的付費字體Meta Serif。
中文字體的金黑體與背景“才怪”兩字的超黑體，是從Web Fonts免費提供，
然而將來Web Fonts應該也是會開始收費，
畢竟他們的獨家中文（應該說是亞洲文字）挑字技術相當厲害，
為了兼顧速度與品質，僅打包本頁面含有字的字體給瀏覽器。
那為什麼我要用兩個服務，用Web Fonts不就夠了？
答案是FF Meta只有Typekit有阿...中文只有Web Fonts有阿... XD
所以嘗試一次使用兩個，結果會打架...一起上是不行的，中文出不來！
後來查了一下瀏覽器狀態
似乎是一起使用的時候會影響到Web Fonts動態送出/接收字體
所以還要特別寫一下javascript延遲typekit的font-family
結果竟然就可以同時用了！
所以，英文字體要放在前面，先讓瀏覽器找英文，
遇到中文的時候，由於英文字體內沒有，所以會繼續找後面的中文字體，
於是要這樣設定：
font-family: "ff-meta-serif-web-pro-1", "ff-meta-serif-web-pro-2",
"MSungGold HK Black";
當然了，這種技術對於老舊的瀏覽器，如ie6,7都還有相當多的疑慮。
如剛剛測過ie7的font-face透過font-family不能指定兩個eot的名字，只能吃一個，
ie8就可以吃兩個。
但是其他如safari,firefox都沒有這種問題ㄟ
測試頁 http://evendesign.tw/demo/cssfontface.html
Typekit http://typekit.com
WebFonts http://webfonts.fonts.com
本週三RGBA應該會討論這東西吧
http://rgba.tumblr.com/
或是討論之前的AAAA
http://evendesign.tw/AAAA/
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 111.243.18.188