| 字型 | 語法 | 呈現效果 |
| inherit(預設字型) | <span style="font-family:inherit;">this word</span> | this word |
| Arial | <span style="font-family:Arial;">this word</span> | this word |
| Courier | <span style="font-family:Courier;">this word</span> | this word |
| Georgia | <span style="font-family:Georgia;">this word</span> | this word |
| Helvetica | <span style="font-family:Helvetica;">this word</span> | this word |
| Times | <span style="font-family:Times;">this word</span> | this word |
| Trebuchet | <span style="font-family:Trebuchet ms;">this word</span> | this word |
| Verdana | <span style="font-family:Verdana;">this word</span> | this word |
中文字可以使用底下這些字型(它們對英文字母也有效)
新細明體：PMingLiU
標楷體：DFKai-SB
微軟正黑體：Microsoft JhengHei
| 字型 | 語法 | 呈現效果 |
| 新細明體 | <span style="font-family:PMingLiU;">abc你好</span> | abc你好 |
| 標楷體 | <span style="font-family:DFKai-SB;">abc你好</span> | abc你好 |
| 微軟正黑體 | <span style="font-family:Microsoft JhengHei;">abc你好</span> | abc你好 |
請比較底下這兩種打法：
<span style="font-family:DFKai-SB;">這是標楷體</span>
<span style="font-family:標楷體;">這是標楷體</span>
這兩種打法都是對的，瀏覽器都可以正常執行。
可以同時指定多種字型：
<span style="font-family:第1種字型, 第2種字型, 第3種字型;"></span>
當第1種字型無法顯示時，就會換第2種字型，依此類推...
請比較底下這兩種打法：
<span style="font-family: '新細明體', Arial;"></span>
<span style="font-family: Arial, '新細明體';"></span>
因為新細明體對英文字母也有效，所以Arial就沒有機會發揮...；
把Arial放前面，這樣英文字母的字型就會是Arial，而中文字就是新細明體字型。
PS：不管是什麼字型，最好都是用單引號(')給它標起來，確保瀏覽器的相容性。
雖然很多人都是教用雙引號(")給它標起來，但在Blogger這裡只能用單引號！
單引號(')和雙引號(")的HTML表示法，在Blogger的HTML編輯模式都是秀"。
在台灣地區，我用IE、火狐和chrome等等瀏覽器，沒加單引號是可以正常跑出我的字型效果出來。但國外就不一定了... 畢竟中文字只有少數幾個國家會用... @@
font-family的字型並不會自動下載字型檔案！
所以對方沒有你設定的字型，就無法看到你要呈現的效果了...
因此，除了你指定的字型外，最好加上通用字型，以確保網頁可以正常呈現。
常見的通用字型有：serif、sans-serif、cursive、monospace等等。
| 字型 | 語法 | 呈現效果 |
| serif | <span style="font-family:serif;">abc你好</span> | abc你好 |
| sans-serif | <span style="font-family:sans-serif;">abc你好</span> | abc你好 |
| cursive | <span style="font-family:cursive;">abc你好</span> | abc你好 |
| monospace | <span style="font-family:monospace;">abc你好</span> | abc你好 |
其實還有很多字型沒有列出來... @@
而且字型會一直不斷地創造出來，根本不可能講解完... Orz
日後有空，我再補一些字型資料上來~ ;-)
你也可以試著Google看看~ :D
沒有留言:
張貼留言