iT邦幫忙

DAY 23
9

作個網站吧!系列 第 23

作個網站吧!Web Font(1)-網頁也可以不一樣

  • 分享至 

  • xImage
  •  

網頁字型已經行之有年,國外大大小小的網站都可以看到不同字體顯示,只要連結檔案就能看到效果,多數文字再也不必依賴圖片製作,不但方便還減少檔案大小,一舉兩得~
以下紀錄如何使用Web font,內容若有誤還請指正,謝謝。
網頁字型已經行之有年,國外大大小小的網站都可以看到不同字體顯示,只要連結檔案就能看到效果,多數文字再也不必依賴圖片製作,不但方便還減少檔案大小,一舉兩得~
以下紀錄如何使用Web font,內容若有誤還請指正,謝謝。

如果要在本機端使用字型,可以使用@font-face:

@font-face {
    font-family: '字型名稱';
    src: url('字型路徑') format('格式');
    font-weight: normal; /* 可預設字型粗細 */
    font-style: normal; /* 可預設字型樣式,mormal為一般,也可設定斜體italic */
}

然後在要使用字型的部份加入font-family即可。

其中字型路徑可以分別載入不同檔案格式,
因為不同瀏覽器支援的字型不盡相同,有以下格式:
.ttf:

url('webfont.ttf') format('truetype');

.eot:

url('webfont.eot?#iefix') format('embedded-opentype');

.woff:

url('webfont.woff') format('woff');

關於.woff格式資訊:https://developer.mozilla.org/zh-TW/docs/Web/Guide/WOFF
.svg:

url('webfont.svg#webfont') format('svg');


這張圖片就是以上格式會支援的瀏覽器囉~
圖片來自http://www.html5rocks.com/en/tutorials/webfonts/quick/

想支援各家瀏覽器但是沒有字型檔的話,只要檔案合法,可以利用Font Squirrel幫轉唷,設定好下載檔案即可,連CSS都幫你寫好了xD。
Font Squirrel WEBFONT GENERATOR:http://www.fontsquirrel.com/tools/webfont-generator

如果不需要本機端連線或者嫌麻煩,那麼Google Fonts就是最佳選擇!
Google Fonts:http://www.google.com/fonts
使用方法也很簡單,選擇字型後按Quick Use,複製頁面上的連結以及font-family到自己的頁面上就可以囉!

那麼中文的部份呢?
像是推行網路字型不遺餘力的justfont:http://www.justfont.com/
還有文鼎的雲端字型:http://webfont.arphic.com/
以及fonts.com:http://www.fonts.com/

真的要感謝更新技術,賦予網頁有更加完美的顯示的人們,
終於...不用煩惱網頁還是少些甚麼了xD
本文同步發表於http://azzurro.blog.aznc.cc/make_a_website_23/


上一篇
作個網站吧!Quickly Sass(4)-CSS無痛轉移Sass
下一篇
作個網站吧!Web Font(2)-誰說icon不能放大
系列文
作個網站吧!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
0
0
kuan
iT邦新手 5 級 ‧ 2013-10-29 21:54:45

真的,網頁設計那麼多年了,之前都從fonts.com用中文,但,那中文實在是不符所需,後來從朋友那知道台灣也有人在做web font,看到台灣有人在做web font就覺得真的太辦了,終於有台灣的字型廠商知道中文web font對設計師們的需求了

tpodomoto iT邦新手 4 級 ‧ 2013-10-29 23:42:08 檢舉

希望廠商的努力可以讓中文網頁字型越來越活潑~!

我要留言

立即登入留言