2015年5月28日星期四

推荐各种字体代码

原文地址: http://www.mywzh.net/index.asp?xAction=xReadNews&NewsID=451

一、可以跳动的字
<P>
<MARQUEE scrollAmount=8 direction=up behavior=alternate height=70>
<P align=center>
<MARQUEE scrollAmount=3 height=50><B><FONT face=隶书 color=#ff3300 size=5>
<P align=center>欢迎你的光临!</P></MARQUEE></P></MARQUEE></P>




南来风


二、拖影字代码(一)
<DIV style="FILTER: shadow(color=#00FFFF,strength=10); WIDTH: 500; height:40">
<P align=center><b><FONT face=经典魏碑繁 color=#FF4500 size=7>欢迎您</FONT></B><P></DIV>


南来风
三、文字隐现
<DIV align=center>
<body bgcolor="#FF00FF" id="www_helpor_net">
<div id="helpor_net" style="visibility:visible;width:400px;height:30px;text-align:center; font-family:经典魏碑繁;font-size:30pt;color:#FF00FF"></div>
<SCRIPT language="JavaScript">
<!--
var thissize=20
var textfont="经典魏碑繁"
var textcolor= new Array()
textcolor[0]="000000"
textcolor[1]="000000"
textcolor[2]="000000"
textcolor[3]="111111"
textcolor[4]="222222"
textcolor[5]="333333"
textcolor[6]="444444"
textcolor[7]="555555"
textcolor[8]="666666"
textcolor[9]="777777"
textcolor[10]="888888"
textcolor[11]="999999"
textcolor[12]="aaaaaa"
textcolor[13]="bbbbbb"
textcolor[14]="cccccc"
textcolor[15]="dddddd"
textcolor[16]="eeeeee"
textcolor[17]="ffffff"
textcolor[18]="ffffff"
var message = new Array()
message[0]="欢迎光临"
message[1]="好玩吗?"
message[2]="你请走好"
message[3]="请再次光临"
i_message=0
var i_strength=0
var i_message=0
var timer
function www_helpor_net() {
if(document.all) {
if (i_strength <=17) {
helpor_net.innerText=message[i_message]
document.all.helpor_net.style.filter="glow(color="+textcolor[i_strength]+", strength=4)"
i_strength++
timer=setTimeout("www_helpor_net()",100)
}
else {
clearTimeout(timer)
setTimeout("dewww_helpor_net()",1500)
}
}
}
function dewww_helpor_net() {
if(document.all) {
if (i_strength >=0) {
helpor_net.innerText=message[i_message]
document.all.helpor_net.style.filter="glow(color="+textcolor[i_strength]+", strength=4)"
i_strength--
timer=setTimeout("dewww_helpor_net()",100)
}
else {
clearTimeout(timer)
i_message++
if (i_message>=message.length) {i_message=0}
i_strength=0
intermezzo()
}
}
}
function intermezzo() {
helpor_net.innerText=""
setTimeout("www_helpor_net()",1000)
}
www_helpor_net();
//-->
</SCRIPT>

欢迎光临
四、拖影字代码(二)
<DIV align=center>
<DIV style="FILTER: shadow(color=#FF0000, strength=60); WIDTH: 480px"><FONT style="FONT-WEIGHT: normal;
FONT-SIZE: 150pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文彩云
color=#FFFFFF>欢迎您</FONT></DIV></DIV>
五、拖影字代码(三)
<DIV align=center>
<DIV style="FILTER: shadow(color=#FF0000 , strength=60); WIDTH: 480px"><FONT face=华文彩云 color=#ffffff size=9><B>
<CENTER><BR>欢迎您</CENTER></FONT></DIV></DIV>
五、拖影字代码(四)
<FONT style="FONT-SIZE: 45pt; FILTER: shadow(color=#af2dco); WIDTH: 100%; COLOR: #730404; LINE-HEIGHT: 100%; FONT-FAMILY: 华文行楷" size=6>欢迎您</FONT>
六、拖影字代码(五)
<FONT style="FONT-SIZE: 45pt; FILTER: glow(color=#800000<br>,strength=4); WIDTH: 100%; COLOR: #a8871d; LINE-HEIGHT: 100%; FONT-FAMILY: 华文行楷"><BR>欢迎您</FONT>
七、上下重叠的文字
<MARQUEE scrollAmount=2 direction=down height=60>
<CENTER><FONT face=经典圆叠黑 color=#ff0000 size=7><STRONG>你好
</FONT></CENTER></STRONG></MARQUEE>
<CENTER>
<MARQUEE scrollAmount=2 direction=up height=60>
<CENTER><FONT face=经典圆叠黑 color=#ff0000 size=7><STRONG>欢迎您
</FONT></CENTER></STRONG></MARQUEE></CENTER>

你好

欢迎您
南来风


八、会闪光的文字
 

<DIV align=center>
<TABLE cellSpacing=0 cellPadding=0 align=center background=http://211.147.253.2/bbs/images/upfile/2004-11/20041121171040.gif>
<TBODY>
<TR>
<TD style="FILTER: chroma(color=#336699)">
<TABLE style="WIDTH: 503px; HEIGHT: 248px" align=center background=http://211.147.253.2/bbs/images/upfile/2004-11/2004111504527.gif>
<TBODY>
<TR>
<TD>
<P align=center><FONT face=华文新魏 color=#336699 size=6><B>你好吗?<BR>太让我高兴了&nbsp;&nbsp;不是吗<BR> 你的到来<BR>就是对我<BR>最大的鼓励<BR>希望你能&nbsp;&nbsp;开心快 乐</B></FONT></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV>
<P></P>
<P align=center>&nbsp;</P>
<DIV>&nbsp;</DIV>


你好吗?
太让我高兴了  不是吗
你的到来
就是对我
最大的鼓励
希望你能  开心快乐



九、
<P align=center><FONT style="FONT-SIZE: 60pt; FILTER: shadow(color=lime#b0c4de); WIDTH: 100%; COLOR: green; LINE-HEIGHT: 150%; FONT-FAMILY: 华文行楷"><B>我爱你们</FONT></B></P>
我爱你们

十、
<P align=center><FONT style="FONT-SIZE: 35pt; FILTER: glow(color=black); WIDTH: 100%; COLOR: #e4dc9b; LINE-HEIGHT: 150%; FONT-FAMILY: 楷体_GB2312">
<CENTER>
<P><B><FONT size=7>是真的爱你,你信吗?</FONT></B></P>

是真的爱你,你信吗?
十一、
<P align=center><FONT style="FONT-SIZE: 45pt; FILTER: shadow(color=#6495ED,strength=15); WIDTH: 100%; COLOR: #00ffff; LINE-HEIGHT: 150%; FONT-FAMILY: 方正舒体">如果你能来我会更高兴的</FONT></P>
如果你能来我会更高兴的

十二、
<P align=center><FONT style="FILTER: shadow(color=RED); WIDTH: 100%; COLOR: yellow; LINE-HEIGHT: 150%; FONT-FAMILY: 楷体_GB2312" size=6>
<P align=center><B>天天开心</B></P>

天天开心

十三、
<P align=center><FONT style="FONT-SIZE: 25pt; FILTER: shadow(color=#AF0530); WIDTH: 100%; COLOR: #00ccff; LINE-HEIGHT: 150%; FONT-FAMILY: 华文行楷"><B>朋友<BR>是不是觉得我们好有缘呢</B></FONT>
朋友
是不是觉得我们好有缘呢
十四、
<CENTER><FONT style="FONT-SIZE: 50pt; FILTER: shadow(color=black); WIDTH: 100%; COLOR: #6495ed; LINE-HEIGHT: 150%; face: 新宋体"><B>呵呵,你喜欢我吗?</B></FONT></CENTER>
呵呵,你喜欢我吗?
 
十五、
<TABLE style="FILTER: chroma(color=#336699)" align=center background=http://romantic-art.com/cards14/waitingonyou/waitingforyoutile.jpg border=0>
<TBODY>
<TR>
<TD><FONT style="FONT-SIZE: 52pt" face=华文行楷 color=#336699>欢迎您再来哦</FONT></TD></TR></TBODY& gt;</TABLE>
欢迎您再来哦

十六、
<FONT style="FONT-SIZE: 30pt; FILTER: shadow(color=FF0033); WIDTH: 100%; COLOR: white; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云"><B>欢迎光临</B></FONT>

欢迎光临
十七、
<FONT style="FONT-SIZE: 40pt; FILTER: shadow(color=green); WIDTH: 100%; COLOR: white; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云"><B>欢迎光临</B></FONT>

欢迎光临
十八、
<CENTER><FONT style="FONT-SIZE: 40pt; FILTER: shadow(color=#DA70D6); WIDTH: 100%; COLOR: white; LINE-HEIGHT: 150%; FONT-FAMILY: 方正舒体"><B>欢迎光临</B></FONT></CENTER> 
欢迎光临
 
十九、
<FONT style="FONT-SIZE:40pt;filter:wave(add=0,lightstrength=50,strength=4,freq=2,phrase=30);
WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷"><B>欢迎光临</B></FONT>

欢迎光临
二十、
<FONT style="FONT-SIZE:40pt;filter:glow(color=gray,strength=5);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷"><B>欢迎光 临</B></FONT>

欢迎光临
二十一、
<DIV align=center>
<DIV style="FILTER: glow(color=#c299ff, strength=60); WIDTH: 400px"><FONT face=隶书 color=#8a2be2 size=7><B><BR>欢迎光临</FONT></B> </DIV>


欢迎光临
二十二、
<FONT style="FONT-SIZE: 40pt; FILTER: shadow(color=#AF0530); WIDTH: 100%; COLOR: #f90b46; LINE-HEIGHT: 150%; FONT-FAMILY: 隶书"><B>欢迎光临</B></FONT>

欢迎光临
二十三、
<CENTER>
<MARQUEE scrollAmount=2 direction=down height=60>
<CENTER><FONT face=隶书 color=#ff0000 size=6><B>欢迎光临</FONT></CENTER></B></MARQUEE>
<CENTER>
<MARQUEE scrollAmount=2 direction=up height=60>
<CENTER><FONT face=隶书 color=#ff0000 size=6><B>欢迎光临</FONT></CENTER></B>< /MARQUEE></CENTER>
欢迎光临
欢迎光临
二十四、
<FONT style="FONT-SIZE:30pt;filter:shadow(color=black,direction=180);WIDTH:100%;
COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷"><B>欢迎光临</B></FONT> 

欢迎光临
二十五、
<P align=center><FONT style="FONT-WEIGHT: bolder; FONT-SIZE: 50px;
FILTER: blur(add=1, direction=45,strength=10); WIDTH: 450px; POSITION: relative"
color=#3333cc>欢迎光临</FONT></CAPTION> <BR></CAPTION></P>
欢迎光临
二十六、
<CENTER><FONT face=华文彩云 color=#ee110e size=7><MARQUEE width=200 height=50><IMG src="http://freequick.myrice.com/rw/ts/43.gif">欢迎光临<IMGsrc="http://freequick.myrice.com/rw/ts/43.gif">
</FONT>
</MARQUEE><FONT face=华文彩云 color=#ee1111
size=7><MARQUEE direction=right width=200 height=50><IMG src="
http://freequick.myrice.com/rw/ts/23.gif">欢迎光临<IMG src="http://freequick.myrice.com/rw/ts/23.gif"></FONT>
</MARQUEE></FONT></FONT></CENTER>
二十七
<P align=center>
<MARQUEE scrollAmount=2 width=60 height=67 align="center" scrolldely="10"><B><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 55pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文行楷 color=#db7093><B>每 每</FONT></B></B></MARQUEE>
<MARQUEE scrollAmount=2 width=60 height=67 align="center" scrolldely="10"><B><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 55pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文行楷 color=#db7093><B>天 天</FONT></B></B></MARQUEE>
<MARQUEE scrollAmount=2 width=60 height=67 align="center" scrolldely="10"><B><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 55pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文行楷 color=#db7093><B>多 多</FONT></B></B></MARQUEE>
<MARQUEE scrollAmount=2 width=60 height=67 align="center" scrolldely="10"><B><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 55pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文行楷 color=#db7093><B>爱 爱</FONT></B></B></MARQUEE>
<MARQUEE scrollAmount=2 width=60 height=67 align="center" scrolldely="10"><B><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 55pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文行楷 color=#db7093><B>你 你</FONT></B></B></MARQUEE>
<MARQUEE scrollAmount=2 width=60 height=67 align="center" scrolldely="10"><B><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 55pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文行楷 color=#db7093><B>一 一</FONT></B></B></MARQUEE>
<MARQUEE scrollAmount=2 width=60 height=67 align="center" scrolldely="10"><B><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 55pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文行楷 color=#db7093><B>点 点</FONT></B></B></MARQUEE>&nbsp;&nbsp;</DIV></TD></TR></TBODY></TABLE>

每 每 天 天 多 多 爱 爱 你 你 一 一 点 点  



似梦似幻
山清水秀


網頁中文字型除了微軟正黑體, 還有這些好選擇!(windows)

 原文地址: http://www.wfublog.com/2014/08/web-chinese-font-choice.html

網頁中文字型除了微軟正黑體, 還有這些好選擇!(windows)

  
對於網頁能使用的中文字體,我們比較難有自訂的選擇。上一篇「網頁中英文字型跨平台設定最佳化 」說明了,由於中文字型檔太大,網頁絕對不能引用外部中文字型檔,否則載入速度可以讓訪客好整以暇地泡好一杯咖啡,並跳離該頁面。

前陣子 Google 發布了免費的中文字型「思源黑體」,不過請打消將這個字型設定在網頁上的念頭,因為這不是作業系統的預設字型,多數訪客的電腦中依然沒有這個檔案,就算設定了這個字型,訪客仍然看不到思源黑體的。

而在使用者最大宗 Windows 系統下,網頁設定中文字型比較順眼、常見的選擇會是「微軟正黑體」。但 WFU BLOG 設定的幾項字型中,主要使用的是「明瞭體」,如果沒聽過的話,其實還有更多你沒聽過的字型可用。想知道還有哪些不錯的中文字體可選擇嗎?請見以下詳細的整 理。



一、不適合在內文使用的中文字型


最早知道「明瞭體」是經由這個網頁「幸好還有明瞭體!」的介紹,也因此瞭解除了中文字型,還有其他地區的字型能夠替代。


1. Windows 所有可用的中文字型

以 Win8 為例,進入系統資料夾 Windows → Fonts 可看到所有字型檔,其中「中、日、韓」這三個地區的文字特點是 "都有漢字"。雖然「日、韓」字型會缺字,不過網頁基本的常見字都還有,所以可拿來當中文字型用。下圖是可用字型一覽──




2. 不適合在網頁內文呈現的字體

上面列表在中文的部份,有黑體、明體、楷體、宋體(簡)可選擇。當這些字體用於標題,在比較大的像素 24px 以上展現時,看起來的效果都還好。不過在內文中使用的字體一般較小,約 13px~18px 這個範圍,以下是這些字體用於內文時的效果比較──




WFU 的個人感覺是,在字體較小時,使用黑體看起來會比較舒服、順眼一些。不過微軟雅黑比較可惜的是,其預設是簡體,若在小字的情況下當內文使用時,繁、簡混雜會讓很多字看起來非常不搭。而宋體的評價排在黑體之後、其他字體之前。

結論是使用非簡體的黑體,當作內文使用會表現較好,而黑體以外的字型,可以考慮用在網頁其他區塊,或是特定點綴、裝飾用途。以下先討論適合內文的字型,將比較各語系的黑體字型。


3. 各語系的黑體字型列表

排除不相關字型後,以下是所有的黑體字型:

  • SimHei (簡)
  • 微軟正黑體
  • Microsoft YaHei (微軟雅黑 簡)
  • Meiryo (明瞭體 日)
  • MS Gothic (日)
  • MS PGothic (日)
  • Yu Gothic (游黑體 日)
  • Dotum (韓)
  • Malgun Gothic (清黑體 韓)

接下來看看他們在內文字體大小的效果比較。






二、黑體字型效果比較


1. 內文效果




在小字 13px 的表現:

  • 雅黑、明瞭體比較清楚
  • 清黑體 (Malgun Gothic 韓)也 OK, 但可惜 "偽" 漏字,轉而以細明體展示
  • SimHei (簡) 也夠清楚,但繁體字比較難看一些。
  • 其他黑體的線條稍微偏細。


在小字 18px 的表現:

  • 個人覺得明瞭體綜合表現第一
  • 雅黑還不錯,但繁、簡體的字擺在一起,有些看起來似乎不太搭。
  • 字體放大後,很多都比較好看了,不過線條偏細的那幾個,可能還是不適合設定來顯示內文,讀者可憑自己喜好挑選。


2. 標題效果




大字 24px 標準字體 的表現:

  • 幾乎全體表現都不錯,個人認為雅黑綜合表現第一(小字時的簡、繁不搭情形,因為字體放大後,不是那麼容易看出來)


因為標題通常使用粗體,需要比較 24px 粗體 的表現:

  • 雅黑及明瞭體似乎有過粗的感覺,不過若將字型再放大、拿來當網站標題是適合的。
  • 除了漏字的問題,清黑體(Malgun Gothic 韓) 綜合水準是不錯的。
  • 除了以上過粗的兩個字體,幾個日文字體例如游黑體(Yu Gothic 日)都不錯、其他的黑體看起來也不差。



三、字型設定實作


如何跨平台設定網頁的中英文字型,可詳閱:


下面以 Blogger 為例,只說明 Windows 系統部份的字型設定,而其他作業系統的字型設定,請務必參考以上教學連結。

非 Blogger 的平台若想套用以下實作範例來修改 CSS,建議使用「Chrome 開發人員工具」找出區塊的 class 或 id,在瀏覽器變更 CSS 參數來測試,再到範本或後台修改字型的 CSS 設定。


1. 網站次標題

如前所述,在大字體的表現,個人比較欣賞清黑體(Malgun Gothic 韓)的效果,而韓文會漏字的情形,在後面指定一個粗細差不多的中文黑體字型,即可解決這個問題。經過審慎比較後,選擇了 SimHei(簡) 這個字型。

網站次標題 "偽 ‧ 雲端 ‧ Blogger 調校資料庫" 便是採用這個方案,以下為操作步驟──

在範本中找到 .Header .description {...} 這個區間,新增或修改以下參數:

font-size: 30px;
font-family: "malgun gothic", simhei; /* 其他作業系統的字型設定請參考前述教學連結 */
font-weight: bold;


下圖為效果──




2. 文章標題

文章標題使用了粗細均勻的游黑體(Yu Gothic 日),而日、韓字型會漏字的情況,一樣交給線條比例相當的 SimHei(簡),以下為操作步驟──

在範本中找到 .post-title {...} 這個區間,新增或修改以下參數:

font-size: 26px;
font-family: "Yu Gothic", SimHei; /* 其他作業系統的字型設定請參考前述教學連結 */


下圖為效果──




3. 文章次標題

前面兩項都沒使用微軟雅黑體,是為了避免過粗顯得突兀,而文章中的次標題都是重點提示,需要使用最粗的效果,此時雅黑便派上用場

WFU 在文章中設定次標題的方法請參閱「Blogger 文章標題最佳化__(3) 修改範本 H1 H2 H3 標籤實用技巧」→「三、加強文章中的 SEO 效果」→「2. 有效率的文章範本範例」。

這些自行設定的 h2、h3、h4 標籤要設定字型 CSS 的話,以 Blogger 為例,後台範本 → 自訂 → 進階 → 新增 CSS:

.post-body h2, .post-body h3, .post-body h4 {
font-size: 22px;
font-family: "Microsoft YaHei"; /* 其他作業系統的字型設定請參考前述教學連結 */
}

效果可見本文的文章次標題(如果你使用 Windows 系統的話)。


4. 文章內文

本站在內文使用「明瞭體」已經有不短的時間,覺得比「微軟正黑體」的效果好上不少,同時將字體調大後可讓讀者有非常舒適的閱讀體驗。

「明瞭體」這個日文字型會漏字的情況,我選擇交給「微軟正黑體」。以下為操作步驟──

在範本中找到 .post-body {...} 這個區間,新增或修改以下參數:

font-size: 18px;
font-family: Meiryo, "微軟正黑體", "Microsoft JhengHei"; /* 其他作業系統的字型設定請參考前述教學連結 */

效果可見本文的內文字體(如果你使用 Windows 系統的話)。


5. 導覽列、標籤、側邊欄

更改個別區塊的字型 CSS 設定,如前所述建議使用「Chrome 開發人員工具」找出區塊的 class 或 id,在瀏覽器直接變更 CSS 參數無誤後,再到範本中修改會比較快。

目前本站導覽列使用的是「雅黑」,網站其他部份使用的是「SimSun(宋體 簡)」



四、一些補充


1. 搭配的英文字型

設定完黑體字型後,跟英文字型的視覺效果能否搭配也是一個學問。最簡單的方法就是只設定中文字型、去除英文字型的設定,那麼網頁在抓英數文字時,仍會去讀取黑體的字型。

只不過,不是每個中文字型的預設英文效果,都能跟中文搭配得很好。如果想要更美、又能搭配黑體的英文字型,可參考這篇「word 預設中英搭配有什麼問題」,來找出更好的選擇。


2. 其他平台

雖然這篇只有提到 Windows 系統的中文字型,不過只要依照同樣的流程,也是能找出其他作業系統(例如 Mac)最適合自己網頁的中文字型,並進行最佳化設定。


3. 個人觀點

由於這篇的範例選擇算是個人觀點,不代表這樣的審美觀一定是好的,也不見得這些選擇適合每個網站,也不一定需要為不同區塊都設定不同字型。

不過本文提供了各種 Windows 現成字型的圖示與效果,只需要參考範例、及教學連結,相信讀者都能找到自己心目中理想的字型,並成功套用在自己的網站。

Web 中文字体应用指南

原文地址: https://ruby-china.org/topics/14005

Web 中文字体应用指南


Web 中文字体应用指南

在 Web 上应用字体是一项基本技术,同时也是一门艺术。对于英文字体来说可选择的范围实在是太广泛了,合理的使用它们将会为你的网站增色不少。关于英文字体的使用和搭配技巧,在这里不做赘述,只推荐一套非常好的视频:Fundamentals of Design by CodeSchool
而真正的挑战在于中文字体,由于中文字体组成的特殊性导致其体积过于庞大,除了操作系统内置的字体之外,我们很难在网站上应用其他的字体。在可选性很差的前提之下,如何正确的使用中文字体呢?
首先,以下的字体声明都是很糟糕的,切忌使用:
font-family: "宋体";

font-family: "宋体", Arial;

font-family: Arial, "宋体", "微软雅黑";

font-family: Helvetica, Arial, "华文细黑", "微软雅黑";

...
接下来,我们一步一步来说明如何定义好的字体声明。

中文字体也有英文名称

很多开发者忽略了这一点:尽管我们在操作系统中常常看到宋体微软雅黑华文细黑这样的字体名称,但实际上这只是字体的显示名称,而不是字体文件的名称。虽然说在大多数情况下直接使用显示名称也有效,但有些用户却工作在一些很极端的情况下,这会导致你的字体声明无效。
比如说,用户安装了中文版的操作系统(这意味着系统有中文字体),但是却切换到了以英文为主要语言——这种情况在那些希望加强英语锻炼的中文用户当中是很常见的。这时候,操作系统很有可能无法按照显示名称找到正确的字体,所以我们要记住的第一件事情就是: 同时声明中文字体的字体名称(英文)和显示名称(中文),就像这样:
font-family: SimSun, "宋体";

font-family: "Microsoft YaHei", "微软雅黑";

font-family: STXihei, "华文细黑", "Microsoft YaHei", "微软雅黑";

永远不要忘记声明英文字体,并且英文字体应该在中文字体之前

记住这个事实:绝大部分中文字体里包含英文字母(但是基本上都很丑),而英文字体里不包含中文字符。
在网页里中/英文混排是很常见的,你绝对不会喜欢用中文字体显示英文的效果,所以一定不要忘了先声明英文字体:
font-family: Georgia, SimSun, "宋体";

font-family: Arial, "Microsoft YaHei", "微软雅黑";
另外还有一个好习惯,就是在最后补充英文字体族的名称。字体族大体上分为两类:非衬线和衬线,它们之间的区别和使用规则请见本文开始介绍的视频。一般来说,你应该这么做:
font-family: Georgia, SimSun, "宋体", serif;

font-family: Arial, "Microsoft YaHei", "微软雅黑", sans-serif;
请注意:以上两句声明中的宋体微软雅黑不应该调换(尽管调换了也不会发生错误),这是因为从字体的式样来看,微软雅黑是非衬线的,而宋体才是衬线的。然而中文并不像英文那样严格区分字体族,所以这一点在实际应用当中并不那么重要。

别忘了照顾不同的操作系统

作为一个 Web 开发者,你理应对 Windows, Mac OS, Linux 家族等常用操作系统里的系统字体有足够的了解,特别是中文。在这里,我们假设目标网站要同时给予 windows 用户和 mac 用户最好的字体体验,于是我们可以这样声明:
font-family: Helvetica, Tahoma, Arial, STXihei, "华文细黑", "Microsoft YaHei", "微软雅黑", sans-serif;
这句声明都做到哪些事情呢?让我们一一说明(括号内代表其对应的目标操作系统):
  1. 对于英文字符,首先查找Helvetica(Mac),然后查找Tahoma(Win),都找不到就用Arial(Mac&Win);若是以上三者都缺失,则使用当前默认的sans-serif字体(操作系统或浏览器指定);
  2. 对于中文字体,我们已经了解其规则了。华文细黑(Mac),微软雅黑(Win)是这两个平台的默认中文字体。

注意向下兼容

到此为止,我们的字体声明已经很不错了——如果你不必考虑还在使用旧版本操作系统的用户的话。遗憾地是,中文市场还有大量的用户在使用 Windows XP,宋体才是他们的主要中文字体。为了照顾到这些用户,你可以为微软雅黑增加一个 fallback:
font-family: Helvetica, Tahoma, Arial, STXihei, "华文细黑", Heiti, "黑体", "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;
同样地,你看到我们也为 Mac 系统使用了黑体作为 fallback。

其他

不加双引号可以吗?

可以。有些英文字体的名称多于两个单词,因为单词中间有空格所以需要用 "" 包裹起来。中文字体很特别,按照英文的角度来看,像微软雅黑究竟算是一个词还是四个词呢?没关系,好在中文字体的名称里没有空格,所以 "" 不加也没什么大碍。
不过,谁都不能保证在任何操作系统/浏览器环境下都是如此,若是发生了奇怪的事情,不妨加上双引号试试看。

可以默认显示某种字体吗?比如微软雅黑

你可能注意到了,在我们最后的字体声明里,华文细黑是默认字体(如果你的系统上安装了声明里所有的中文字体的话),为什么我要先声明 Mac 系统的字体呢?
按理来说,大多数网站的主要目标市场还是 Windows 用户的,所以理论上这个才是合理的声明:
font-family: Helvetica, Tahoma, Arial, "Microsoft YaHei", "微软雅黑", SimSun, "宋体", STXihei, "华文细黑", Heiti, "黑体", sans-serif;
但实际上却并非如此。在中文字体的用户群体里,很大一部分拥有 Mac 的人都同时安装了 Win 下常用的中文字体(这得归功于 Office for Mac);但极少有 Win 用户去安装 Mac 下的中文字体。
因此,把 Mac 用字体声明在前面几乎不会对 Win 用户产生什么影响(因为他们压根没有!),倒是用来做 fallback 的黑体可能会取代微软雅黑的位置,所以更保险的做法或许是这样:
font-family: Helvetica, Tahoma, Arial, STXihei, "华文细黑", "Microsoft YaHei", "微软雅黑", SimSun, "宋体", Heiti, "黑体", sans-serif;
但无论如何请不要把微软雅黑放在中文字体的最前面,作为史上最丑陋的中文字体之一,微软雅黑实在不是什么好的选择,请照顾一下被 Mac 宠坏的用户吧,谢谢!(仅代表个人观点)
BTW,如果你也像我一样不喜欢呆头呆脑的微软雅黑,那就干脆把它删了吧~
到此为止,虽然在我们的示例代码里没有包含 Linux 家族的例子,不过相信你也明白该怎么做了吧。

一点补充

鉴于一些人对微软雅黑的排位产生异议,我不妨把上文的解决方案再延伸一步。事实是这样子的:
  1. 微软雅黑放前面,会导致安装了微软雅黑字体的 Mac 用户不得不面对微软雅黑,而在 Mac 下比微软雅黑优雅得多的中文字体比比皆是;
  2. 把 Mac 下的字体放前面,也会对 Windows 用户造成差不多的困惑,毕竟微软雅黑是 Windows 平台下显示效果最好的字体(目前为止);
1 和 2,哪一种出现的概率更大一些?我想这是一个不需要计算就能知道的答案吧?
但是——的确还有另外两个因素在纠结着:
  1. 不少 Windows 用户因为各种原因关闭了 ClearType,在此情形下微软雅黑将会惨不忍睹!但是 Mac 的字体也不是好的选择,真正的胜出者?猜对了,宋体
  2. 绝大部分 Mac 下的黑体在 Windows 下模糊不清,而微软雅黑虽然丑但在 Mac 下至少能看。(间接体现了两个平台的字体渲染技术的差距)
所以在实践中,真正接近“万无一失”的方案需要考虑以下几点:
  1. 利用 UA 判断为不同的平台加载不一样的字体声明;
  2. 除非有特别的原因,否则尽量保持正文用宋体,标题和其他可以放大些的地方用微软雅黑(针对 Windows);
  3. Mac 下的冬青体效果极佳,但是该字体在 Mac OS X 10.6 以前是没有的,所以谨慎考虑你的用户群体,或者使用华文黑体系列做 fallback;
最后,我不想再和任何人争论字体的优劣,本文的目的是介绍使用方法而不是字体选择。“美”或“丑”向来都是很主观的事情,只因为我是作者,所以我免不了会有倾向性,然而我也相信你自己会有正确的判断,和我较真没有任何实际意义。