選擇正確的字體是使您的網(wǎng)站可用和可訪問(wèn)的重要第一步。文本的格式會(huì)影響您的設(shè)計(jì)和網(wǎng)頁(yè)的可讀性。您可以使用 CSS 以多種方式修改 HTML 文本的顯示方式。您可以選擇要使用的字體類型，無(wú)論是否加粗、大小，甚至可以更改顏色并為其添加不同的間距或裝飾。在本文中，我們將討論兩種最流行的字體類型 Serif 和 Sans Serif 之間的差異。此外，我們將介紹CSS語(yǔ)法以及如何使用該font-family屬性，以便在 CSS 的幫助下，您可以在 Web 設(shè)計(jì)項(xiàng)目中選擇并使用不同的字體。讓我們開(kāi)始吧！
字體術(shù)語(yǔ)
首先，讓我們討論一些現(xiàn)代瀏覽器支持的最常見(jiàn)和最常用的字體類型。
Serif 字體類型
襯線字體的特點(diǎn)是字母末端有一些額外的細(xì)節(jié)。
在字符的主要筆畫(huà)的末尾，有稱為襯線的小粗筆。
襯線字體傳統(tǒng)上廣泛用于印刷品，因?yàn)樗鼈儽徽J(rèn)為對(duì)于較長(zhǎng)的文本段落具有可讀性。但它們并不總是在屏幕上顯示良好。
Serif 字體被認(rèn)為是您可以使用的最經(jīng)典、最優(yōu)雅和最傳統(tǒng)的字體之一。
無(wú)襯線字體類型
這種類型的字體創(chuàng)造了一個(gè)干凈的設(shè)計(jì)外觀，同時(shí)非常易讀和清晰。
這種字體在每個(gè)字母上都有直頭，邊緣沒(méi)有筆劃，使字符看起來(lái)清晰平整，線條干凈。
Sans-serif 字體被認(rèn)為是新式的、簡(jiǎn)約的、現(xiàn)代的，并且是高分辨率計(jì)算機(jī)屏幕的可讀性更強(qiáng)的選擇。
等寬字體類型
使用這種字體類型，每個(gè)字母都具有相同的固定寬度，并且字母之間的間距相等。
對(duì)于我們之前討論過(guò)的字體類型，每個(gè)字母都有不同的寬度。
因此，對(duì)于等寬字體，所有字母都具有相同的寬度。這使文本可以很好地對(duì)齊并易于遵循，從而使設(shè)計(jì)具有干凈的外觀和機(jī)械感。
有兩種更通用的字體類型可用，fantasy和cursive，但最廣泛使用的字體是上面提到的那些。
如何為您的網(wǎng)站選擇字體 - 字體名稱
現(xiàn)在我們已經(jīng)介紹了字體術(shù)語(yǔ)和描述的基礎(chǔ)知識(shí)，是時(shí)候看看每個(gè)系列中的許多不同字體樣式了。
下面列出了每個(gè)字體系列中的一些常見(jiàn)樣式：
襯線字體
- Georgia
- Times
- Times New Roman
- Bodoni
- Garamond
- Palatino
- ITC Clearface
- Plantin
- Freight Text
- Didot
- American Typewriter
無(wú)襯線字體
- Arial
- Verdana
- Helvetica
- Geneva
- Tahoma
- Trebuchet MS
- Open Sans
- Liberation Sans
- Impact
等寬字體
- Courier
- MS Courier New
- Monaco
- Lucinda Console
- Andalé Mono
- Menlo
- Consolas
如何使用font-family屬性
在 CSS 中，該font-family屬性定義元素的特定字體及其文本內(nèi)容的外觀和呈現(xiàn)方式。
font-family屬性的語(yǔ)法是：
element {
font-family: value;
}我們編寫(xiě)propepty，font-family后跟一個(gè)冒號(hào):、一個(gè)空格、a value，最后以分號(hào)結(jié)束規(guī)范;。
我們必須設(shè)置我們想要定位的屬性并分配我們想要的值。
如何設(shè)置CSS字體
假設(shè)我們有下面的 HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>CSS Fonts</title>
</head>
<body>
<h1>HTML Font – CSS Font Family </h1>
<p>I am a paragraph</p>
</body>
</html>如果沒(méi)有應(yīng)用任何樣式，也沒(méi)有明確地為font-family屬性設(shè)置值，瀏覽器會(huì)以自己選擇的字體顯示標(biāo)題和段落。
Google Chrome 中使用的默認(rèn)標(biāo)準(zhǔn)字體是Times New Roman襯線字體。
結(jié)果如下所示：
有幾種方法可以設(shè)置不同的字體并指定我們想要的字體。
在選擇字體時(shí)——這就是value部分——值得一提的是，網(wǎng)站使用的字體集是有限的。他們將獲取用戶計(jì)算機(jī)上已安裝的字體。
瀏覽器只有在用戶計(jì)算機(jī)上安裝了字體時(shí)才會(huì)顯示字體。
那么讓我們看看在 CSS 中設(shè)置字體的方法。
如何使用通用字體系列名稱
在這種情況下，名稱是關(guān)鍵字并且包括前面提到的字體類別之一（襯線、無(wú)襯線、等寬）。
它看起來(lái)像這樣：
p {
font-family: serif;
}
這將字體設(shè)置為通用襯線字體。
如何使用特定的字體系列名稱
p {
font-family: Times,serif;
}
此規(guī)則設(shè)置Times為所需字體，然后設(shè)置serif為通用后備選項(xiàng)，以防用戶計(jì)算機(jī)上未安裝第一個(gè)選項(xiàng)。
如果名稱包含任何空格，則需要將其括在引號(hào)中。
p {
font-family: "Courier New",monospace;
}
這Courier New會(huì)將字體設(shè)置為并添加monospace為備份。
如果我們指定的字體不是通用名稱之一（如 serif、sans-serif），我們需要給瀏覽器一個(gè)后備。
如何使用字體堆棧
在這種情況下，該font-family屬性具有多個(gè)值。
它是可以應(yīng)用于文本的字體系列名稱的優(yōu)先級(jí)、逗號(hào)分隔列表，表明所有字體都是替代字體。這可以最大限度地提高瀏覽器和操作系統(tǒng)的兼容性。
該列表的優(yōu)先級(jí)從左到右，從最高到最低。
p {
font-family: "Lucida Console", Courier, monospace;
}
通過(guò)應(yīng)用多個(gè)字體系列名稱，您可以創(chuàng)建一個(gè)優(yōu)先順序。我們首先從我們想要的字體開(kāi)始。
如果用戶沒(méi)有在他們的計(jì)算機(jī)上安裝第一個(gè)選項(xiàng)或者瀏覽器不支持它，瀏覽器會(huì)移動(dòng)到第二個(gè)字體并使用那個(gè)字體。如果該字體也不可用，則移至第三種，依此類推。
我們可以列出任意數(shù)量的字體，但最佳做法是列出三到四種。
如果所有其他方法都失敗了，最后總會(huì)有一個(gè)通用字體作為最后一個(gè)選項(xiàng)回退機(jī)制列出。
從列出的組中，瀏覽器必須支持至少一個(gè)選項(xiàng)，并且通用名稱保證將呈現(xiàn)所需字體系列中的某些內(nèi)容。
p {
font-family: Georgia, "Times New Roman", Times, serif;
您列出的字體稱為字體堆棧。
瀏覽器將首先查找Georgia. 如果已安裝，瀏覽器將顯示該字體。否則它會(huì)尋找Times New Roman. 如果這也不可用，它將求助于顯示通用默認(rèn)serif系列字體。
結(jié)論
在本文中，我們回顧了不同的字體系列，并給出了每個(gè)系列中不同樣式的一些示例。
我們還討論了font-family屬性以及在 CSS 中設(shè)置字體的三種不同方法。
您將從絕對(duì)的基礎(chǔ)開(kāi)始，然后逐步了解 Flexbox、CSS 網(wǎng)格以及如何使網(wǎng)站具有響應(yīng)性。這些是數(shù)字設(shè)計(jì)和前端 Web 開(kāi)發(fā)的基本技能。
感謝閱讀，祝學(xué)習(xí)愉快。
