- 能選擇多組字型
- 能預覽這些字型在不同樣式、位置的搭配效果
- 字型是公開授權過的
- 不用擔心 @font-face 的多平台多字型問題
可惜沒有提供中文、日文字型,畢竟這些字型的檔案都太大(2MB+)。
TO HOST FONT
把字型檔案擺在正確的位置,並多加一行 @font-face 在 CSS 前面,就能讓 font-family 使用自已放在 server 上的字體:
<style type="text/css"> @font-face { font-family: 'mikachan'; src: url('/fonts/mikachan.otf'); } /* some elsewhere ... */ body { font-family: 'mikachan', sans-serif; } </style>
在最簡單的情況下,用 Chrome 與 Firefox 能正常下載和顯示這字型。若字型要讓
- 老版本的 Internet Explorer 使用 (eot)
- 其它平台的瀏覽器使用 (svg, ttf)
- 讓它遵循規範
那麼 @font-face 這邊就必須加上多種格式:
<style type="text/css"> @font-face { font-family: 'mikachan'; src: url('/fonts/mikachan.eot'); src: url('/fonts/mikachan.eot?#iefix') format('embedded-opentype'), url('/fonts/mikachan.woff') format('woff'), url('/fonts/mikachan.ttf') format('truetype'), url('/fonts/mikachan.svg#mikachan') format('svg'); font-weight: normal; font-style: normal; } </style>
當中的數個 src properties 是必要的,Nice Web Type 這邊記錄和說明每一行必須存在的原因,也詳列數年來各種不同的 bullet-proof 技巧。
不同字型格式的轉換可以用 www/ttf2eot 和 www/sfnt2woff,或是直接用線上的轉換服務:
- http://www.fontsquirrel.com/fontface/generator/ # 轉字型的龍頭,有檔案大小限制
- http://fontface.codeandmore.com/ # 能轉亞洲語系這類超過 2MB 的檔案
它們會同時幫你產生對應的 @font-face CSS 和 demo page。
如果要 host 的字型變多了,可以寫一個產生 CSS @font-face 的 handler:
甚至判斷瀏覽器 User Agent,僅回應指定的 @font-face rule,這樣就不需特別作 IE bullet proof。
以及 nginx.conf,
傳輸用 gzip 是讓我們的字體能小一點點(woff 是已經壓過的格式,所以不再 gzip),要注意的是那個 header,W3C 規範瀏覽器必須禮貌性遵守字型的同源政策,也就是:
如果要 host 的字型變多了,可以寫一個產生 CSS @font-face 的 handler:
<?php header('Content-Type: text/css'); function fill($buffer) { global $font_family; global $file_name; return str_replace('{FILE_NAME}', $file_name, str_replace('{FONT_FAMILY}', $font_family, $buffer)); } ?> <?php ob_start('fill'); ?> @font-face { font-family: '{FONT_FAMILY}'; src: url('/fonts/{FILE_NAME}.eot'); src: url('/fonts/{FILE_NAME}.eot?#iefix') format('embedded-opentype'), local('☺'), url('/fonts/{FILE_NAME}.woff') format('woff'), url('/fonts/{FILE_NAME}.ttf') format('truetype'), url('/fonts/{FILE_NAME}.svg#{FILE_NAME}') format('svg'); font-weight: normal; font-style: normal; } <?php ob_end_flush(); ?>
甚至判斷瀏覽器 User Agent,僅回應指定的 @font-face rule,這樣就不需特別作 IE bullet proof。
NGINX CONFIGURATION
新增或修改這幾種附檔名的 MIME Type:
types { application/x-font-ttf ttf; application/x-font-woff woff; application/vnd.ms-fontobject eot; }
以及 nginx.conf,
server { ... location /fonts { add_header Access-Control-Allow-Origin http://mu.adios.tw; gzip_types image/svg+xml application/x-font-ttf application/vnd.ms-fontobject; } ... }
傳輸用 gzip 是讓我們的字體能小一點點(woff 是已經壓過的格式,所以不再 gzip),要注意的是那個 header,W3C 規範瀏覽器必須禮貌性遵守字型的同源政策,也就是:
- 你在瀏覽 Host A 的網頁
- Host A 的 @font-face src properties 指到 Host B
- 瀏覽器向 Host B 問字型時,Host B 會先回應含有這條 header 的訊息
- 瀏覽器將這條 header 比對 Host A,如果一樣,才會下載並使用字型
IE9: CS3111: Unknown Error
如果 Internet Explorer 9 無法顯示字型,打開開發者工具,檢查看看是不是吐這條訊息,這表示字型檔案錯誤。詳細原因我也不明暸,應該是字體內有些屬性 Windows 不懂,這發生在從 otf 轉換的 eot 字型,後來我是拿為原本設計給 windows 的 ttf 格式來轉換 eot,就正常無虞了。
顯示字型的一致性
在字型正在被下載的過程中,採用該字體的文字:
- Chrome 不顯示任何東西,直到字體下載完,才會顯示
- Firefox 顯示預設字型,直到字體下載完,才會更新
WebFont Loader 能彌平這種不一致性。要嘛就讓所有瀏覽器都不顯示,要嘛就是先顯示預設字型。
沒有留言:
張貼留言