2011
Nov
02

網頁好讀版

列出一些網頁可以使用的字型,大家設計網頁時,可以參考一下囉。

先介紹一下設定字體的 css style 語法,「font-family」這個屬性就是代表字體樣式。

Example
  1. <span style="font-family:Arial;"> font letters </span>
  2. /*或是使用*/
  3. <style>
  4. .font{
  5. font-family:Arial;
  6. }
  7. </style>

預設中文字體

細明體 文字有比較好看嗎?
新細明體 文字有比較好看嗎?
標楷體 文字有比較好看嗎?

預設英文字體

Arial www.yahoo.com
Arial Black www.yahoo.com
Comic Sans MS www.yahoo.com
Courier www.yahoo.com
www.google.com.tw
字母的寬度一樣長
Courier New www.yahoo.com
www.google.com.tw
字母的寬度一樣長
Fixedsys www.yahoo.com
www.google.com.tw
Georgia www.yahoo.com
www.google.com.tw
Impact www.yahoo.com
www.google.com.tw
Lucida Console www.yahoo.com
www.google.com.tw
字母的寬度一樣長
Lucida Sans Unicode www.yahoo.com
www.google.com.tw
Marlett www.yahoo.com
www.google.c
Microsoft Sans Serif www.yahoo.com
www.google.com.tw
Modern www.yahoo.com
www.google.com.tw
MS Sans Serif www.yahoo.com
www.google.com.tw
MS Serif www.yahoo.com
www.google.com.tw
Palatrino Lintype www.yahoo.com
www.google.com.tw
Roman www.yahoo.com
www.google.com.tw
Script www.yahoo.com
www.google.com.tw
字型 = Script
Small Font www.yahoo.com
www.google.com.tw
Symbol www.yahoo.com
www.google.com.tw
System www.yahoo.com
www.google.com.tw
Tahoma www.yahoo.com
www.google.com.tw
Terminal www.yahoo.com
www.google.com.tw
Times New Roman www.yahoo.com
Trebuchet MS www.yahoo.com
www.google.com.tw
verdana www.yahoo.com
www.google.com.tw

自訂字體

部分瀏覽器提供自定義的字體,不過 user 必須先從網路上下載回來,如果是使用中文字體的話,一個字體檔就要10MB左右,光是下載時間就太久了,所以還是用用英文字體就好。

支援的瀏覽器有 Firfox ,Chrome

不支援的瀏覽器有 IE

特殊字體「abcdefghi」,Firefox才看得到喔
Example
  1. <style>
  2. @font-face{
  3. font-family:"AGENT ORANGE";
  4. src: url(AGENTORANGE.TTF);
  5.  
  6. }
  7. body{
  8. font-family:AGENT ORANGE;
  9. }
  10. </style>

Web fonts

如果你想用一些特別的英文字體,可以到 https://fonts.google.com/ 這個網站找找看,找到你要的字體後,使用他非常的簡單,只要 link 到 fonts.google 的字型檔 CSS ,就能夠使用囉。

Example
  1. <link rel="stylesheet" type="text/css"
  2. href="https://fonts.googleapis.com/css?family=Jacques+Francois+Shadow">
  3.  
  4. <style>
  5. body{
  6. font-family: 'Jacques Francois Shadow';
  7. font-size: 18px;
  8. }
  9. </style>

" Jacques Francois Shadow" 字型範例如下:

Jacques+Francois+Shadow

網頁好讀版