網(wǎng)站頁面布局中網(wǎng)站設(shè)計(jì)字體的完整設(shè)計(jì)攻略

時(shí)間：2023-09-30 08:24:02 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-09-30 08:24:02 來源：網(wǎng)站運(yùn)營

網(wǎng)站頁面布局中網(wǎng)站設(shè)計(jì)字體的完整設(shè)計(jì)攻略：我們每天都設(shè)計(jì)處理字體。但我們并沒有真正關(guān)心他們的存在。我們沒有很好地使用它們甚至濫用它們。這都是因?yàn)槲覀儾涣私馑鼈?。字體是排版的重要元素之一;設(shè)計(jì)中最神秘的一個(gè)。在本文中，讓我們與大家討論這個(gè)深?yuàn)W的研究。杭州網(wǎng)站設(shè)計(jì)——浪馬峰科技

字體類型

英文字體（Typeface），分為幾個(gè)類別，這是使用英文字體時(shí)必須知道的基本知識(shí)：

一、襯線體（襯線）

襯線是筆劃邊緣的裝飾部分。下圖中以紅色標(biāo)記的地方是襯線。

襯線設(shè)計(jì)的初衷是清楚地標(biāo)記筆劃的結(jié)束，提高識(shí)別率，并提高閱讀速度。此外，使用襯線字體使人感覺更正統(tǒng)。因此，我們的許多常見英語書籍，特別是散文和小說，都使用襯線來完成文本。

網(wǎng)頁設(shè)計(jì)中常用的襯線是Times New Roman和Georgia。左邊是12px Times New Roman字體，右邊是12px Georgia。

在中文中，我們使用的Song body是相應(yīng)的serif字體。

二、非襯線體/無襯線體(Sans-serif)

如果字體沒有serif，則稱為非serif或serif。下圖是防滑體。

在網(wǎng)頁設(shè)計(jì)中通常使用相對(duì)多的防滑體。有Arial，Verdana，Tahoma，Helivetica，Calibri等。下圖從左到右依次為Arial，Verdana，Tahoma：

值得注意的是，盡管serif字體在書籍中被廣泛使用，但在Internet上很少使用serif字體。由于計(jì)算機(jī)屏幕的分辨率與書本不相當(dāng)，因此在計(jì)算機(jī)屏幕上難以識(shí)別主體10~12px的襯線字體。下圖是10px Verdana和10px Times New Roman的比較，沒有Cleartype。您可以看到左側(cè)的Verdana可以被很好地識(shí)別。右邊的Times New Roman很難識(shí)別。

三、等寬字體(Monospace)

等寬字體實(shí)際上僅適用于西方字體。因?yàn)橛⑽淖帜傅膶挾炔煌?。例如，我比m窄得多。編程期間顯示代碼，如果字母寬度不同，則難以閱讀布局。我們可以看到您在DOS命令行上使用等寬字體。

編程所需的等寬字體具有以下要求：

1，所有字符寬度相同;

2.簡潔，清晰，標(biāo)準(zhǔn)化的人物形象;

3.支持ASCII碼大于128的擴(kuò)展字符集;

4.空白字符（ASCII：0×20）與其他字符的寬度相同;

5.“1”，“l(fā)”和“i”三個(gè)字符易于區(qū)分;

6.“0”，“o”和“O”三個(gè)字符易于區(qū)分;

7.雙引號(hào)和單引號(hào)的前后部分易于區(qū)分，最好是鏡像和對(duì)稱的;

8.標(biāo)點(diǎn)形狀清晰，特別是大括號(hào)，圓括號(hào)和方括號(hào)。

常見的等寬字體是Courier，Courier New

四、手寫體(Calligraphy)

顧名思義，手寫是一種手寫樣式字體。有時(shí)我們稱之為書法字體。中國書法字體大多是鈍的。就個(gè)人而言，建議使用日本書法字體。日本書法和字體更具女人味，更人性化。然而，使用日本書法和字體的缺點(diǎn)是它們大多是傳統(tǒng)的，而且許多其他漢字將會(huì)丟失。

五、符號(hào)體(Symbol)

Windows中最著名的符號(hào)是Webdings（記得我在Windows 95中使用它時(shí)）。以下是一些Webdings字體：字體的樣式

常見的字體樣式分為：Normal Normal，Bold Bold，Italic Italic。

簡單來說，粗體是字體更暗，更“厚”。斜體是略微傾斜字軸。它們都用于強(qiáng)調(diào)空間中的某段文字。

說到粗體，我們可以很容易地想到CSS中的font-weight屬性。我們知道font-weight屬性值是普通，粗體和其他更大膽，更輕和100~900的功能的補(bǔ)充。那100-900的價(jià)值是多少？事實(shí)上，沒有100到900之間的單位。好的字體會(huì)給不同的單詞提供不同的設(shè)計(jì)。如果字體是預(yù)先構(gòu)建的，具有不同的厚度級(jí)別，那么這些值將對(duì)應(yīng)于每個(gè)級(jí)別。例如，Zurich字體包括Zurich Light，Zurich Regular，Zurich Medium，Zurich Bold，Zurich Black和Zurich UltraBlack六種字體。通過這種方式，蘇黎世之光對(duì)應(yīng)于100,200和300的三個(gè)值。蘇黎世規(guī)則對(duì)應(yīng)400，即“正常正?！保K黎世中等對(duì)應(yīng)500，蘇黎世Bold對(duì)應(yīng)于粗體大膽“，對(duì)應(yīng)600,700，蘇黎世黑色對(duì)應(yīng)800，最后，蘇黎世UltraBlack對(duì)應(yīng)900。

對(duì)于中文斜體，通常不在網(wǎng)絡(luò)上使用。由于中國筆畫數(shù)量眾多，使用斜體字將難以閱讀。

單位

我們的網(wǎng)頁設(shè)計(jì)中使用了一些單位：

1，點(diǎn)（pt，point）

72分= 1英寸，1英寸是72分。另外，1 pica = 12分

2，像素（像素，px）

像素是計(jì)算機(jī)屏幕上的最小圖像單元，用外行的術(shù)語來說，它是屏幕上的最小點(diǎn)。

3，DPI，PPI

DPI的全稱是Dots Per Inch，每英寸。 PPI的全稱是Pixel Per Inch。它們是分辨率的單位。換句話說，可以在1英寸的長度中布置多少個(gè)點(diǎn)（像素）。例如，一般來說，我們的顯示器大約為72ppi，長度為72英寸（像素），長度為1英寸。 dpi / ppi越高，分辨率越高，即顆粒越小，圖像越精細(xì)。一般來說，照片的分辨率在240dpi到300dpi之間，所以為什么照片看起來比它在屏幕上看起來要詳細(xì)得多。雜志以133或150 dpi的速度打印，高質(zhì)量的書籍可以350-400 dpi的速度打印，因?yàn)榇蠖鄶?shù)精美的印刷書籍都是以175到200 dpi的速度打印。那么為什么書中文本的相同物理尺寸比屏幕上的更清晰。也就是說，我們前面提到過，英文書籍印刷，為什么你可以大膽地使用Sans-serif字體。

dpi和ppi之間基本沒有區(qū)別。找到差異真的很難，唯一的區(qū)別是dpi通常用于描述掃描儀和打印機(jī)，而ppi通常用于描述屏幕的分辨率。

4，ex，x-height

常用于CSS。 1ex =小寫字母x的高度。

5，em

常用于CSS。當(dāng)然，em不是小寫字母m的高度（事實(shí)上，小寫字母m通常與小寫字母x相同）。 1em =字體大小的100％。是一個(gè)多單元。

間距

1，行距（行高，行距）

當(dāng)涉及行間距（行間距，行高，行距）時(shí)，我們必須首先學(xué)習(xí)一個(gè)稱為基線的術(shù)語。請(qǐng)記住，我們?cè)诘谝淮螌W(xué)習(xí)英語時(shí)曾經(jīng)寫過信件。那本行書？最粗的水平線是我們談?wù)摰幕€。基線是大多數(shù)字母“坐”的字體下降部分上方的線。大多數(shù)字體，大寫字母總是接近基線并高于基線。中文字體與英文大寫字母相同。下圖中的紅線是基線。

然后，行間距是指兩條相鄰線和基線之間的距離。行間距的單位通常使用em，即根據(jù)字體大小定義行間距。在瀏覽器中，默認(rèn)行間距沒有指南。來自W3C的更多建議，它認(rèn)為默認(rèn)行間距應(yīng)該在1.0em和1.2em之間。實(shí)際上，在設(shè)置行間距時(shí)，排版有一個(gè)原則，即行之間的間隙必須大于單詞和單詞之間的間隙。否則，讀者在閱讀時(shí)很容易“序列化”。造成閱讀困難。寬大的行間距可以分隔每行文本，使眼睛很容易區(qū)分前一行或下一行。近年來，網(wǎng)上文字的布局大多喜歡1.5em的行間距，特別是中文網(wǎng)站。也就是說，如果您使用12px字體大小，設(shè)計(jì)師通常喜歡18px行間距。 1.5em真的很棒。事實(shí)上，中文論文的規(guī)格也使用1.5em的行間距。

2，字間距（字母間距，跟蹤）

字間距是一組字母之間的距離。字間距會(huì)影響行或段落中文本的密度。

3，字距調(diào)整（Kerning）

Kerning是一個(gè)針對(duì)視覺需求而完成的技術(shù)流程。簡單地說，當(dāng)兩個(gè)特定字符排成一行時(shí)，您可以為它們指定不同的字間距。例如，當(dāng)大寫字母A后面跟著小寫字母v時(shí)，兩個(gè)字符之間的視覺上會(huì)有更大的間距（實(shí)際上字間距是相同的），這不能用普通的字符間距來解決。如果縮小間距，其他字母會(huì)掛在一起。此時(shí)，需要進(jìn)行字距調(diào)整才能處理它。下圖是應(yīng)用字距調(diào)整的示例：

段落

1、行長(Measure)

行長度是文本段落的寬度。如下所示：

與總統(tǒng)有關(guān)的兩個(gè)易讀性問題：

線長越長，所需的線間距越大。行間距太小，閱讀新行時(shí)讀者很容易序列化。行間距太大，讀者在讀取行時(shí)會(huì)感覺文本不連續(xù)。

在文中，每行40到70個(gè)字母是合適的。

2、對(duì)齊(Alignment)

段落對(duì)齊基本上有四種類型：向左齊平，向右齊平，居中和對(duì)齊。

左對(duì)齊是一種對(duì)齊方法，用于設(shè)置文本內(nèi)容，調(diào)整文本的水平間距，以及將段落或文章中的文本在水平方向上與左對(duì)齊。左對(duì)齊使文章左側(cè)的文本具有整齊的邊緣。與此同時(shí)，文本的右側(cè)也不會(huì)整齊。所以左邊的英文對(duì)齊也稱為右邊的粗糙，這意味著鋸齒狀的右邊。右對(duì)齊也類似。

中心對(duì)齊是一種對(duì)齊方法，用于設(shè)置文本內(nèi)容，調(diào)整文本的水平間距，以及將段落或文章中的文本水平對(duì)齊到中心。中心對(duì)齊將文章兩側(cè)的文字整齊地排列在中間，使整個(gè)段落或整個(gè)文章整齊。

對(duì)齊是指在兩端設(shè)置文本內(nèi)容并調(diào)整單詞/單詞的水平間距，使它們均勻分布在左右邊距之間。對(duì)齊使文本的邊緣具有整齊的邊緣。

使用對(duì)齊后，兩側(cè)的對(duì)齊線將非常清晰，文本塊的“快速”感覺將是顯而易見的。但是，在英文排版中，當(dāng)線條長度非常短時(shí)，使用對(duì)齊可能會(huì)導(dǎo)致某些線條的間距過長，而某些線條的間距過短，使得單詞的間距不均勻感覺很亂。就像一件衣服到處打補(bǔ)丁。

3、易讀性

可讀性描述了印刷文本閱讀的簡易性和舒適性。事實(shí)上，通常設(shè)計(jì)的最根本目的也在這里。除了上述一些原則之外，我還收集了一些易讀性的小原則并與您分享：

最多使用三種字體大小的設(shè)計(jì)。

設(shè)計(jì)最多使用三種字體。

要保證一定的對(duì)比度，但不能過度對(duì)比。楊文（黑底白字）比陰影（白底黑）更容易閱讀。在#fff的背景下，使用＃333的文本看起來比＃000的文本更舒服。

注意文本的背景。背景應(yīng)該是單一的。避免背景噪音?！吧偌词嵌唷笔褂米钌俚脑貋韨鬟_(dá)最多的信息。讓你的鏈接看起來像是一個(gè)鏈接。

本文由杭州浪馬峰科技整理編輯噢！