發(fā)布日期：2017/7/23

摘要： 網(wǎng)站建設(shè)中的字體及字體大小的的選擇直接影響著網(wǎng)站整體的視覺(jué)效果，在某種程度上也會(huì)對(duì)網(wǎng)站優(yōu)化起到一定的作用，比如大號(hào)字體和黑體字在網(wǎng)頁(yè)上顯示 更加醒目，具有增強(qiáng)某些信

　 　

　　網(wǎng)站建設(shè)中的字體及字體大小的的選擇直接影響著網(wǎng)站整體的視覺(jué)效果，在某種程度上也會(huì)對(duì)網(wǎng)站優(yōu)化起到一定的作用，比如大號(hào)字體和黑體字在網(wǎng)頁(yè)上顯示 更加醒目，具有增強(qiáng)某些信息顯示的效果，而搜索引擎也會(huì)捕捉到這些字體的大小，更正視這些大號(hào)字體和黑體字內(nèi)的信息。雖然現(xiàn)在的字體種類特別很是多，但是可以供網(wǎng)站建設(shè)人員選擇的字體照舊比較少的，主要是因?yàn)榫W(wǎng)站建設(shè)要以用戶體驗(yàn)為中間，不能把網(wǎng)頁(yè)搞得太過(guò)于花哨，字體太多就顯得比較亂了，同時(shí)也要考慮到各種瀏覽器對(duì)這些字體的兼容性，盡量不讓瀏覽器上顯示字體時(shí)發(fā)生變形，那樣反而不好。當(dāng)然，有時(shí)候?yàn)榱烁�好地表達(dá)網(wǎng)站主題，我們照舊有需要選擇某種特殊字體來(lái)制作網(wǎng)頁(yè)，這時(shí)你可以將文字以圖片的形式展示出來(lái)，這樣就可以適合各種瀏覽器了。下面筆者簡(jiǎn)單談一下制作網(wǎng)頁(yè)如何選擇字體和字體的大小。

　　一、網(wǎng)站建設(shè)中字體的選擇：

　　一般網(wǎng)站客戶端計(jì)算機(jī)中都安裝有多種字體，瀏覽器會(huì)使用默認(rèn)字體顯示網(wǎng)頁(yè)，如WindowsXP中文版操作統(tǒng)默認(rèn)字體是宋體或新宋體，在后來(lái)的 windows操作系統(tǒng)中，以微軟雅黑為默認(rèn)字體，這種字體顯示得更加清晰，庖代了XP系統(tǒng)下默認(rèn)中文宋體，支撐高清顯示ClearType功能。以上這些字體在大多數(shù)電腦上都有安裝，但是，假如你在制作網(wǎng)頁(yè)的時(shí)候，假如選擇了比較特殊的字體，而這種字體用戶電腦里并沒(méi)有，那么用戶瀏覽網(wǎng)頁(yè)時(shí)仍不能顯示這些字體，這些字體仍以默認(rèn)的宋體或者雅黑字體來(lái)顯示。所以，為了適合更多的用戶瀏覽，我們?cè)谥谱骶W(wǎng)頁(yè)的時(shí)候應(yīng)該使用宋體或者雅黑來(lái)作為網(wǎng)頁(yè)的基準(zhǔn)字體，盡量少使用特殊字體。當(dāng)你不能確保所設(shè)置字體在所有瀏覽者電腦中都安裝時(shí)，使用一種通用字體是可行的辦法。而對(duì)于英文字體，可選擇的字體類型相對(duì)會(huì)多一些，絕大多數(shù)電腦上都裝有這些英文字體，制作網(wǎng)頁(yè)時(shí)選擇什么類型關(guān)系并不太大，只要看著美觀就行。英文通用字體主要包括下面幾類：

　　1、sans-serif，這種字體是一種有比例但沒(méi)有襯線字體，常見(jiàn)字體是Arial。

　　2、cursive，這種字體是模擬人的筆跡，這種字體大部分是由曲線和比襯線字體更強(qiáng)筆畫(huà)修飾組成，常用字體是ComicSans。

　　3、monospace，這是一種無(wú)比例字體，用于模擬打字機(jī)打出字體，這些字體中每個(gè)字符都占有同樣寬度，常用字體是Courier。

　　4、serif，這是一種成比例有襯線字體，成比例是指字體中所有字母根據(jù)它們不同尺寸占有不同寬度。襯線是指字體上附加裝飾性細(xì)線，如小寫(xiě)字母會(huì)在項(xiàng)部和底部附加細(xì)線。常用字體有Times New Roman。

　　在制作網(wǎng)頁(yè)的時(shí)候，為了保證在大多數(shù)瀏覽器上都能準(zhǔn)確顯示字體，給用戶呈現(xiàn)出美觀的界面，筆者通常都是選擇使用系統(tǒng)默認(rèn)字體，如中文宋體或新宋體，過(guò)些時(shí)日可以選擇雅黑作為默認(rèn)字體，英文則選擇Arial這種字體。這樣可以保證用戶系統(tǒng)中字體缺乏時(shí)，瀏覽器也能夠準(zhǔn)確識(shí)別并 顯示出正常的文字。同時(shí)筆者也建議大多的網(wǎng)站設(shè)計(jì)者都能夠選擇系統(tǒng)默認(rèn)的字體，不要把特殊的字體運(yùn)用在網(wǎng)頁(yè)的文字中。假如非要使用這些特殊的字體，筆者建議您使用這些特殊字體系體例作成圖片，然后將圖片顯示在網(wǎng)頁(yè)上的響應(yīng)位置，這樣做法更好一些，但這無(wú)形中增大了網(wǎng)頁(yè)的體積，這樣的圖片多了會(huì)延緩網(wǎng)頁(yè)打開(kāi)速度。

　　二、網(wǎng)站建設(shè)中如何選擇字體的大小

　　網(wǎng)站建設(shè)中字體大小的選擇是用戶體驗(yàn)中的一個(gè)主要部分，過(guò)大過(guò)小都會(huì)影響用戶體驗(yàn)。在制作網(wǎng)頁(yè)的時(shí)候，我們可以根據(jù)文字在網(wǎng)頁(yè)中的不同位置和不一律級(jí)來(lái)分 別使用不同大小的字體。相對(duì)來(lái)說(shuō)，內(nèi)容題目可以使用較大的字體，而內(nèi)容小題目可以采用次一號(hào)的字體，而內(nèi)容正文則可以采用正常大小的字體。

　　對(duì)于不同的分辨率，不同的顯示器尺寸，不同的DPI，乃至不同的瀏覽器設(shè)置，都會(huì)對(duì)在瀏覽器上顯現(xiàn)出來(lái)的文字大小帶來(lái)影響。的體例照舊在網(wǎng)頁(yè)制作時(shí)根據(jù)用戶的分辨率給用戶一個(gè)比較美觀的默認(rèn)字體大小。大多數(shù)專業(yè)的網(wǎng)站建設(shè)人員，都會(huì)習(xí)慣性的使用某一字體大小，比如14px或 12px，因?yàn)?2px和14px基本已經(jīng)成了大多數(shù)網(wǎng)站字體的標(biāo)準(zhǔn)大小，而11px、13px、15px等大小則涉及到一個(gè)鋸齒的問(wèn)題，特殊是在早期的顯示器中，往往不能很好的處理文字的鋸齒問(wèn)題，使用單數(shù)的像素，極有可能造成鋸齒，所以通常采用偶數(shù)的大小。

　　在CSS中，常用的描述字體大小的單位有兩個(gè)，即em和px。通常認(rèn)為em為相對(duì)大小單位，而px為大小單位。但從現(xiàn)實(shí)應(yīng)用中來(lái)講，px像素有時(shí)也像是一種相對(duì)大小單位。比如，在一塊15寸分辨率為800×600像素的屏幕上，10px大小的文字，要比一塊10寸分辨率1024×768像素的屏幕上的10px大小的文字顯得更大一些。px為像素單位，20px透露表現(xiàn)20個(gè)像素大小，在現(xiàn)在的網(wǎng)頁(yè)設(shè)計(jì)中，常被用來(lái)透露表現(xiàn)字體大小，方便且直觀。比如12px，14px就是用px作為字體大小，而16px為中等字體，18px為較大字體，12px為偏小字體。em為相對(duì)大小單位，它透露表現(xiàn)的字體大小不固定，根據(jù)基礎(chǔ)字體大小進(jìn)行相對(duì)大小的處理。瀏覽器默認(rèn)的字體大小為 16px，假如一段文字指定1em，那么就是代表16px大小，而2em就是32px大小。相對(duì)大小單位有很廣泛的用途，因?yàn)樗�的相�?duì)性，對(duì)跨平臺(tái)跨設(shè)備的字體大小處理上很有優(yōu)勢(shì)，只是無(wú)法直觀的看到大小。

　　以上是關(guān)于在網(wǎng)站建設(shè)中如何選擇字體和字體大小的介紹。其實(shí)網(wǎng)站建設(shè)就是這樣，有的時(shí)候就算是1px的差異，就可能影響這個(gè)網(wǎng)站的視覺(jué)效果，影響到網(wǎng)站建設(shè)的質(zhì)量，并影響到用戶的體驗(yàn)。作為專業(yè)網(wǎng)站建設(shè)人員就必須要掌握和了解得更多，并切實(shí)在現(xiàn)實(shí)中測(cè)試觀察效果，只有如此，我們才能制作出更加出色的網(wǎng)站。