網(wǎng)頁設(shè)計(jì)中的字體排版

時(shí)間：2023-10-04 09:06:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-10-04 09:06:01 來源：網(wǎng)站運(yùn)營

網(wǎng)頁設(shè)計(jì)中的字體排版：網(wǎng)頁設(shè)計(jì)中我們更多的在談?wù)撘曈X效果和交互方式。但一個(gè)好用、常用的網(wǎng)站，在建立“第一次好印象”之后，最關(guān)鍵的“用戶體驗(yàn)”應(yīng)該是內(nèi)容及獲取的途徑。內(nèi)容在設(shè)計(jì)方向上自然是不在討論范疇。就獲取途徑，良好的站點(diǎn)地圖、合理的內(nèi)容布局、規(guī)范的圖文編排都是其中的重要基石。這其中，作為內(nèi)容的載體——文字的編排，可以堪稱為基石中的鋼筋龍骨。
自從電腦技術(shù)進(jìn)入千家萬戶之后，千字印刷所需要的專業(yè)技法和知識被簡單的電腦自動排版所取代，字體編排成了一件不需要被熟知的技能。這也使得很多現(xiàn)代設(shè)計(jì)師不熟悉文字編排的通病。同時(shí)，伴隨著技術(shù)的演進(jìn)。設(shè)計(jì)師和程序員分工相對獨(dú)立，在相互不了解工作機(jī)制的前提下就會產(chǎn)生設(shè)計(jì)稿無法被完全還原的情況。

本著“設(shè)計(jì)，不是為了設(shè)計(jì)稿而設(shè)計(jì)”的理念。作為設(shè)計(jì)師的我們應(yīng)該注意以下這些我認(rèn)為重要的字體編排知識。

善變的字體

不知道現(xiàn)在的你正在用著怎樣的設(shè)備閱讀這篇文章？可能是在公司的臺式電腦上，或者坐在咖啡廳端著蘋果MacBook筆記本，亦或者是在公交車上拿著Android手機(jī)在閱讀呢？
如果你拿著這些設(shè)備做對比，會發(fā)現(xiàn)，每個(gè)設(shè)備上的頁面都會有些許的不同，其中主要體現(xiàn)在文字上。每個(gè)設(shè)備（確切的說是每個(gè)操作系統(tǒng)）都會集成自己默認(rèn)的字體，網(wǎng)頁是調(diào)用系統(tǒng)中現(xiàn)有的字體。而由于版權(quán)的原因，你有的我不一定有，我有的你也不一定有。所以在不同系統(tǒng)中一張網(wǎng)頁看起來會有所不同。

當(dāng)你規(guī)定了某款字體的時(shí)候，需要它是足夠“通用”的，但這很難。一般我們的解決方法是制定足夠多的字體來給系統(tǒng)備選，這樣你可以在不同系統(tǒng)間設(shè)定充足的備選方案。
另一方面，由于實(shí)現(xiàn)的技術(shù)不同，Windows和MAC OS系統(tǒng)對同一款字體的展示效果也會有很大差異。在Mac OS中字體看起來更加柔和平滑，而在Windows中則會變得像素化、銳利。

所以，盡可能多的在你需要展示的設(shè)備上去測試這些字體的呈現(xiàn)效果以達(dá)到你的預(yù)期。

統(tǒng)一調(diào)度字號

以前網(wǎng)頁中都以12px的字體作為正文字號，不過在一個(gè)12*12的點(diǎn)集中能呈現(xiàn)出來的字型是非常有限的。你甚至已經(jīng)無法區(qū)分襯線體和非襯線體之間的區(qū)別了。這也是當(dāng)時(shí)技術(shù)下所需要的效果——在較小的屏幕中展示更多文字同時(shí)這些文字看起來都差不多。
而現(xiàn)在的字體，多以14px或16px作為正文字號。清晰、便于閱讀且能更好的區(qū)分不同字體之間的差別。

相較于以前以px(像素點(diǎn))作為文字尺寸單位，現(xiàn)代技術(shù)下更推薦em(相對比例)最為單位。瀏覽器默認(rèn)狀態(tài)下1em=16px,
換算一下12px=0.75em。利用em為單位的優(yōu)勢是可以修改默認(rèn)值來實(shí)現(xiàn)全局字號統(tǒng)一調(diào)整。

行間距

行間距和字間距影響著閱讀時(shí)的舒適度。間距過窄會容易造成閱讀跳行，難以區(qū)分內(nèi)容。過寬的間距則會使得內(nèi)容顯得松散而不成體系。
字間距由字體本身控制，所以如果你無法確定自己的修改是否是更合適的時(shí)候，保持默認(rèn)字間距是明智的選擇。

就中文而言，是有一個(gè)相對較為固定的行高：1.5～2em，即為字體高度的1.5～2倍之間。
一般而言我較為多用的值時(shí)1.75，相交1.5要來的寬松，相交1.7數(shù)值更為完整。

p {line-height: 1.75em;}

左右對齊

傳統(tǒng)中文是方塊文字，活字印刷保持著縱橫對其的原則。但現(xiàn)代書寫系統(tǒng)中避頭尾點(diǎn)及中英文混排使得這一點(diǎn)已經(jīng)很難實(shí)現(xiàn)了。
不過，即使無法做到縱橫對其，保持首尾對齊也還是能讓段落看起來美觀很多。

p { text-align: justify;text-justify: ideographic;}對齊會強(qiáng)制拉寬字距，在一些情況下會使得文字顯得不連貫。

p { word-break: break-all; }break-all會強(qiáng)制截?cái)嘤⑽脑~語，同時(shí)無視避頭尾點(diǎn)讓文字連貫。不過由于其特性，需要謹(jǐn)慎使用。

不要使用斜體

中文中從來不存在斜體這種書寫形式。而拉丁文中的「italic」主要是指「手寫體」，所以對應(yīng)的中文更恰當(dāng)?shù)氖怯脮w來替代。例如：楷書、行書等。
網(wǎng)頁中<em>往往會被強(qiáng)制斜體，這其實(shí)并不符合我們的需求。比較合適的處理是加粗、改成黑體或者加下劃線等。
去掉<em>標(biāo)簽的斜體屬性

em { font-style: normal; }以上就是網(wǎng)頁中的一些文字牌排版技巧，在設(shè)計(jì)時(shí)能時(shí)刻考慮到這些以保證你的設(shè)計(jì)稿能在代碼還原時(shí)候的復(fù)現(xiàn)是十分必要的。也是作為基于屏幕工作的諸位所需要熟知的。