網(wǎng)頁(yè)設(shè)計(jì)中最常用的字體有哪些？（中文和英文）

時(shí)間：2024-02-16 05:30:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2024-02-16 05:30:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

網(wǎng)頁(yè)設(shè)計(jì)中最常用的字體有哪些？（中文和英文）：現(xiàn)在很多設(shè)計(jì)師最開(kāi)始做的是APP設(shè)計(jì)，最后應(yīng)工作需要會(huì)做些網(wǎng)頁(yè)相關(guān)的頁(yè)面，直接采用APP圖文的排版規(guī)則套用在網(wǎng)站上，因?yàn)榻K端設(shè)備，使用場(chǎng)景發(fā)生變化，會(huì)顯得很不合適。其實(shí)這里面就是幾個(gè)規(guī)則的事，記住這幾個(gè)規(guī)則，即使你從來(lái)沒(méi)做過(guò)網(wǎng)頁(yè)設(shè)計(jì)，也會(huì)做出符合業(yè)界規(guī)范，排版好看的網(wǎng)站了。

行間距

1倍 1.2倍 1.5倍 1.8倍 2倍

這是一個(gè)經(jīng)驗(yàn)值，我個(gè)人最長(zhǎng)采用的行間距是1.5倍，不同的產(chǎn)品對(duì)這個(gè)值要求可能不同，比如下圖正文字號(hào)是16px，間距是24px













對(duì)于中文來(lái)說(shuō)，常用的字體大小12px、14px、16px、18px等偶數(shù)大小，在IE6和IE7設(shè)置其行高也為偶數(shù)能解決一些特殊情況下的字體對(duì)其問(wèn)題。

在這里我加入了1倍間距，做設(shè)計(jì)的同學(xué)會(huì)感到奇怪，其實(shí)這個(gè)間距是針對(duì)word上面的正文排版，常用的是1倍－1.2倍。過(guò)大就不方便閱讀。這是跟網(wǎng)頁(yè)中行距的區(qū)別。

段間距：行間距是段落間距的50%或者75%

比如行間距采用32px，那么段落間距可以采用64px ，或者43px







字體

第一類(lèi):系統(tǒng)默認(rèn)字體

不同的瀏覽器，會(huì)有不同的默認(rèn)字體，當(dāng)然也可以在網(wǎng)站中我們自己去設(shè)置，不過(guò)要考慮的一個(gè)問(wèn)題是，你選擇的字體，你的用戶(hù)電腦中是否安裝，如果沒(méi)有，那么就會(huì)瀏覽器換成默認(rèn)字體。常用默認(rèn)字體有哪些呢

中文：宋體，微軟雅黑，華文黑體 黑體（無(wú)狀態(tài)）

宋體：

Win最常見(jiàn)的字體，小字體點(diǎn)陣，大字體TrueType，但是大字體并不好看，所以最好別做標(biāo)題。

微軟雅黑：

Vista之后新引入的字體，打開(kāi)Cleartype之后顯示效果不錯(cuò)，不開(kāi)Cleartype發(fā)虛。

華文細(xì)黑：

Mac下的默認(rèn)中文。

英文：helveticaarial

Helvetica:

被評(píng)為設(shè)計(jì)師最?lèi)?ài)的字體，Realist風(fēng)格，簡(jiǎn)潔現(xiàn)代的線(xiàn)條，非常受到追捧。在Mac下面被認(rèn)為是最佳的網(wǎng)頁(yè)字體，在Windows下由于Hinting的原因顯示很糟糕。

Arial:

Helvetica的「克隆」，和Helvetica非常像，細(xì)節(jié)上比如R和G有小小差別。如果字號(hào)太小，文字太多，看起來(lái)會(huì)有些累眼。Win和Mac顯示都正常

以上這些作為系統(tǒng)字體，可以應(yīng)用在網(wǎng)站中標(biāo)題，正文需要呈現(xiàn)大量信息的地方

第二類(lèi)：圖片字體

圖片字體是網(wǎng)站中，一些banner，海報(bào)上面呈現(xiàn)信息內(nèi)容的字體，取決于視覺(jué)設(shè)計(jì)師做的效果圖，可以理解為一張圖片，不受瀏覽器默認(rèn)字體影響，唯一要注意的就是，字體的氣質(zhì)和文案內(nèi)容是否吻合，是否美觀，是否收費(fèi)







字號(hào)

正文：

10px－18px之間比較合適（中英文皆可，一般情況英文要比中文略小些）

10px對(duì)于一些字體會(huì)顯得過(guò)小，但是還是會(huì)有個(gè)別處選擇用10px

12px是宋體能顯示的極限，雖然微軟雅黑能顯示更小的字體，但目前的應(yīng)用環(huán)境尚未成熟。由于宋體基本上是目前顯示中文唯一的通用Web字體，所以12px成為最常用的字體大小。我們當(dāng)然可以依據(jù)產(chǎn)品的需要來(lái)修改這個(gè)默認(rèn)值。







在Chrome3.0之后的中文版中，字體大小最小值是12px，比如你設(shè)置最小字體為10px，最后也變成12px。

標(biāo)題

文字字號(hào)，18px，20px，24px，28px，32px， 根據(jù)內(nèi)容需要選用就好，并不是單數(shù)字號(hào)不可選，而是我個(gè)人喜好雙數(shù)哈哈。為了讓網(wǎng)頁(yè)排版更好看，這里有個(gè)技巧，增加字號(hào)對(duì)比，在app界面設(shè)計(jì)中，標(biāo)題與正文的文字差不會(huì)過(guò)大，以iPhone7尺寸為例，標(biāo)題36號(hào)，文章正文可選34px，32px，30px。而在網(wǎng)頁(yè)上極差關(guān)系可以做的更大，更夸張，標(biāo)題30px正文12px，這種做法可以讓網(wǎng)頁(yè)眾多的文字信息，分清層級(jí)主次，用戶(hù)更有視覺(jué)焦點(diǎn)。這一原則，不適用在移動(dòng)端。移動(dòng)端我們可以通過(guò)顏色，字重，等其他方式來(lái)做極差關(guān)系。







文字邊緣 銳利？渾厚？無(wú)？平滑？這些怎么選擇

首先要知道一點(diǎn)，“無(wú)，銳利，犀利、渾厚、平滑”，都是指文字邊緣的處理。

說(shuō)白了這種形式就是為了在視覺(jué)上產(chǎn)生良好體驗(yàn)，加了“羽化”效果。







具體在設(shè)計(jì)中，我們應(yīng)該如何做出選擇？簡(jiǎn)單的來(lái)說(shuō)12px以下，18px以上可以選擇銳利或者平滑這樣沒(méi)有鋸齒，其余可以選擇無(wú)。微軟雅黑 字體邊緣選擇window或者window LCD 其他字體的話(huà)基本上用window或者window LCD基本上沒(méi)什么問(wèn)題。

banner字體推薦

下面給大家推薦下在網(wǎng)頁(yè)banner圖片中，使用頻率高的字體

第一類(lèi)，穩(wěn)定型（協(xié)調(diào)，齊全，穩(wěn)定，高質(zhì)）

微軟雅黑

冬青黑體

宋體

華文細(xì)黑

方正正中黑







方正蘭亭系列







第二類(lèi)，剛硬，銳利，清晰，強(qiáng)烈

造字工坊力黑體







造字工坊版黑體







造字工坊勁黑體







銳字逼格銳線(xiàn)體簡(jiǎn)







張海山銳線(xiàn)體







華康儷金黑







蒙納超剛黑體







（更適用大氣，熱烈，權(quán)威，聲明等主題）

第三類(lèi)，輕松，手寫(xiě)，可愛(ài)，童趣，親切

方正經(jīng)黑







華康海報(bào)







漢儀小麥







方正稚藝







新蒂下午茶







漢儀歪歪體







新蒂小丸子







（適用于，游戲娛樂(lè)活動(dòng)海報(bào)，h5廣告頁(yè)面，兒童／女性主題）

第四類(lèi)，靈動(dòng)，清新，秀雅，精致，古韻

方正清刻本悅宋簡(jiǎn)體







方正宋刻本秀楷體







漢儀全唐詩(shī)簡(jiǎn)







康熙字典體







祥南行書(shū)體







造字工房刻宋







（適用于復(fù)古，典雅，傳統(tǒng)，品質(zhì)，靈動(dòng)等主題）

以上這些字體，確實(shí)很好用，大家可以下載在自己的電腦中，根據(jù)實(shí)際情況選用。特別提示下，這些字體不是免費(fèi)的，需要購(gòu)買(mǎi)版權(quán)，否則是不能用于商業(yè)用途，切記切記。土豪公司就申請(qǐng)購(gòu)買(mǎi)，如果不愿出這份錢(qián)，設(shè)計(jì)師就要?jiǎng)觿?dòng)小腦筋了，需要對(duì)字體做下調(diào)整??！