不再為網頁字型煩惱!簡單好用的Google Font API
以前做網頁設計,限制於CSS的功能,只有少數的基本字型能用。如果想用比較特別的文字如Handwriting、LED等特別的字型,就得使用圖片。使用圖片會增加Loading Time,又會影響SEO,所以Designer用圖案,Programmer同SEO的同事都會唔太鐘意。
到了CSS3時代,font-face面世,將字型檔案放在自己隻web server使用,以為解決了字型使用的問題,不過只有較新的瀏覽器能支持font-face,可惜大部份人都是使用較舊的瀏覽器,故此技術不太普及。問題似乎又解決不了。
直到Google Font API的出現,網頁字型問題才算得到解決。只要登入 http://www.google.com/fonts ,便有629個font family可以選擇使用,Handwriting、Sanrif、Display類別都有,絕對足夠Web Designer使用。有
不同字形類別可供選擇。
更厲害的是,你可以preview每款字型的字母、數字及符號樣式,如果沒有樣式的符號更會於preview顯示。
選了喜歡的字型,就可以安裝落自己的網頁上。安裝的方法非常簡單,Click一下字型右下角的Quick Use按扭,會顯以下頁面:
只要跟隨指示,copy & paste Javascript Link File及font-family語法到相應的CSS便可啟用。對Web Designer來說完全沒有難度!
大家有留意的話,其實呢個網站也使用了Google Font API來顯示H1, H2 及 H3 的文字。Google Font API簡單好用,大部分Web Designer已經成了設計網頁時不可或缺的一個工具。不過目前只支援英文字形,對香港、台灣的Wed Designer可能未太好多,不過Frank相信Google Font API未來一定會support中文字型。
更多有關Frank Frank的Blog: http://frankwong.info
到了CSS3時代,font-face面世,將字型檔案放在自己隻web server使用,以為解決了字型使用的問題,不過只有較新的瀏覽器能支持font-face,可惜大部份人都是使用較舊的瀏覽器,故此技術不太普及。問題似乎又解決不了。
直到Google Font API的出現,網頁字型問題才算得到解決。只要登入 http://www.google.com/fonts ,便有629個font family可以選擇使用,Handwriting、Sanrif、Display類別都有,絕對足夠Web Designer使用。有
不同字形類別可供選擇。
更厲害的是,你可以preview每款字型的字母、數字及符號樣式,如果沒有樣式的符號更會於preview顯示。
選了喜歡的字型,就可以安裝落自己的網頁上。安裝的方法非常簡單,Click一下字型右下角的Quick Use按扭,會顯以下頁面:
只要跟隨指示,copy & paste Javascript Link File及font-family語法到相應的CSS便可啟用。對Web Designer來說完全沒有難度!
大家有留意的話,其實呢個網站也使用了Google Font API來顯示H1, H2 及 H3 的文字。Google Font API簡單好用,大部分Web Designer已經成了設計網頁時不可或缺的一個工具。不過目前只支援英文字形,對香港、台灣的Wed Designer可能未太好多,不過Frank相信Google Font API未來一定會support中文字型。
更多有關Frank Frank的Blog: http://frankwong.info