在平面設計中,字型的運用是一門高深的學問,而網頁設計中雖然大多使用內建的字體,但如果沒有的仔細的去調整,就像是word直接用內建的字型一樣,會產生不協調感。
本篇重點
了解font-family的設定值,以及參考其他知名網站的設定方式。
font-family
font-family分為兩個部分,一個是指定字體”family-name”,另一種是泛用字”generic-family”。
Formal syntax: [ <family-name> | <generic-family> ]#
泛用字 generic-family
首先介紹泛用字,泛用字簡單來說,就是系統的明體、黑體、捲曲字等預設值,並不是指定特定的字體,而也可稱為”字體集”、”統稱字體”、”泛用字集”、”通用字體集”等,泛用字的類型如下:
注意:並非所有瀏覽器及系統的預設泛用字是相同的
泛用字集 | 中文 | English |
---|---|---|
serif 明體 | 貳零壹肆 新年快樂 |
2014 Happy New Year. |
sans-serif 黑體 | 貳零壹肆 新年快樂 |
2014 Happy New Year. |
cursive 捲曲字體 | 貳零壹肆 新年快樂 |
2014 Happy New Year. |
fantasy 花俏字體 | 貳零壹肆 新年快樂 |
2014 Happy New Year. |
monospace 等寬字體 | 貳零壹肆 新年快樂 |
2014 Happy New Year. |
一般來說定義font-family時,會將泛用字放在最後方,參考如下。
"Lucida Grande",Helvetica,Arial,Verdana,sans-serif
//最後方的是sans-serif(黑體)
指定字體 family-name
這部分就相當容易理解,只要直接輸入字型名稱即可,但特別要注意的是如果字體名稱中有空白,就必須用''
或 ""
將他括起來。
但有少部分的字體,設定時需要注意它的英文及中文名稱,個瀏覽器的解讀不同,如IE就能夠接受”Microsoft JhengHei”,而Chrome則不行。
字體 | 中文 | English |
---|---|---|
"Microsoft JhengHei" | 貳零壹肆 新年快樂 |
2014 Happy New Year. |
微軟正黑體 | 貳零壹肆 新年快樂 |
2014 Happy New Year. |
另外在優先順序上,放在前方的字體會先被套用,如果不能才會套用次要的字體,也可以利用這方式來套用不同的字體在中英文上。
如下方的範例,先”Segoe UI”,其次是”微軟正黑體”,最後再放泛用字。
font-family: "Segoe UI","微軟正黑體",sans-serif
字體 | 中文 | English |
---|---|---|
"Segoe UI" | 貳零壹肆 新年快樂 |
2014 Happy New Year. |
"Segoe UI","微軟正黑體" | 貳零壹肆 新年快樂 |
2014 Happy New Year. |
參考
font-family在每個網頁的設定都不相同,在Mac OS以及Windows上所擁有的字型也都不相同,
在設定上也必須考量到其他系統使用者的觀感,這邊就提供幾間不同公司的font-family設定值。
Apple (TW)
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif
Apple | |
---|---|
貳零壹肆 新年快樂 | 2014 Happy New Year. |
微軟台灣
http://www.microsoft.com/taiwan/
font-family: "微軟正黑體", "Microsoft JhengHei", "Segoe UI Semibold", "Segoe UI", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif
Microsoft | |
---|---|
貳零壹肆 新年快樂 | 2014 Happy New Year. |
Yahoo (US)
font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif
Yahoo | |
---|---|
貳零壹肆 新年快樂 | 2014 Happy New Year. |
google的設定值最泛用….。
font-family: arial,sans-serif
貳零壹肆 新年快樂 | 2014 Happy New Year. |