HTML 字體 – CSS 字體系列示例（Serif 和 Sans Serif 字符）

饕餮少女 2021-08-27 10:07:45 瀏覽數(shù) (8182)

反饋

選擇正確的字體是使您的網(wǎng)站可用和可訪問的重要第一步。文本的格式會影響您的設(shè)計(jì)和網(wǎng)頁的可讀性。您可以使用 CSS 以多種方式修改 HTML 文本的顯示方式。您可以選擇要使用的字體類型，無論是否加粗、大小，甚至可以更改顏色并為其添加不同的間距或裝飾。在本文中，我們將討論兩種最流行的字體類型 Serif 和 Sans Serif 之間的差異。此外，我們將介紹CSS語法以及如何使用該font-family屬性，以便在 CSS 的幫助下，您可以在 Web 設(shè)計(jì)項(xiàng)目中選擇并使用不同的字體。讓我們開始吧！

字體術(shù)語

首先，讓我們討論一些現(xiàn)代瀏覽器支持的最常見和最常用的字體類型。

Serif 字體類型

襯線字體的特點(diǎn)是字母末端有一些額外的細(xì)節(jié)。

Screenshot-2021-08-13-at-4.34.15-PM

在字符的主要筆畫的末尾，有稱為襯線的小粗筆。

Screenshot-2021-08-13-at-4.38.02-PM

襯線字體傳統(tǒng)上廣泛用于印刷品，因?yàn)樗鼈儽徽J(rèn)為對于較長的文本段落具有可讀性。但它們并不總是在屏幕上顯示良好。

Serif 字體被認(rèn)為是您可以使用的最經(jīng)典、最優(yōu)雅和最傳統(tǒng)的字體之一。

無襯線字體類型

這種類型的字體創(chuàng)造了一個(gè)干凈的設(shè)計(jì)外觀，同時(shí)非常易讀和清晰。

Screenshot-2021-08-13-at-4.35.04-PM

這種字體在每個(gè)字母上都有直頭，邊緣沒有筆劃，使字符看起來清晰平整，線條干凈。

Screenshot-2021-08-13-at-4.38.14-PM

Sans-serif 字體被認(rèn)為是新式的、簡約的、現(xiàn)代的，并且是高分辨率計(jì)算機(jī)屏幕的可讀性更強(qiáng)的選擇。

等寬字體類型

使用這種字體類型，每個(gè)字母都具有相同的固定寬度，并且字母之間的間距相等。

對于我們之前討論過的字體類型，每個(gè)字母都有不同的寬度。

因此，對于等寬字體，所有字母都具有相同的寬度。這使文本可以很好地對齊并易于遵循，從而使設(shè)計(jì)具有干凈的外觀和機(jī)械感。

Screenshot-2021-08-13-at-5.29.11-PM

有兩種更通用的字體類型可用，fantasy和cursive，但最廣泛使用的字體是上面提到的那些。

如何為您的網(wǎng)站選擇字體 - 字體名稱

現(xiàn)在我們已經(jīng)介紹了字體術(shù)語和描述的基礎(chǔ)知識，是時(shí)候看看每個(gè)系列中的許多不同字體樣式了。

下面列出了每個(gè)字體系列中的一些常見樣式：

襯線字體

Georgia
Times
Times New Roman
Bodoni
Garamond
Palatino
ITC Clearface
Plantin
Freight Text
Didot
American Typewriter

無襯線字體

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屬性的語法是：

element {
font-family: value;
}

我們編寫propepty，font-family后跟一個(gè)冒號:、一個(gè)空格、a value，最后以分號結(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>

如果沒有應(yīng)用任何樣式，也沒有明確地為font-family屬性設(shè)置值，瀏覽器會以自己選擇的字體顯示標(biāo)題和段落。

Google Chrome 中使用的默認(rèn)標(biāo)準(zhǔn)字體是Times New Roman襯線字體。

結(jié)果如下所示：

Screenshot-2021-08-13-at-7.03.34-PM

有幾種方法可以設(shè)置不同的字體并指定我們想要的字體。

在選擇字體時(shí)——這就是value部分——值得一提的是，網(wǎng)站使用的字體集是有限的。他們將獲取用戶計(jì)算機(jī)上已安裝的字體。

瀏覽器只有在用戶計(jì)算機(jī)上安裝了字體時(shí)才會顯示字體。

那么讓我們看看在 CSS 中設(shè)置字體的方法。

如何使用通用字體系列名稱

在這種情況下，名稱是關(guān)鍵字并且包括前面提到的字體類別之一（襯線、無襯線、等寬）。

它看起來像這樣：

p {
 font-family: serif;
 }

這將字體設(shè)置為通用襯線字體。

如何使用特定的字體系列名稱

p {
 font-family: Times,serif;
 }

此規(guī)則設(shè)置Times為所需字體，然后設(shè)置serif為通用后備選項(xiàng)，以防用戶計(jì)算機(jī)上未安裝第一個(gè)選項(xiàng)。

如果名稱包含任何空格，則需要將其括在引號中。

p {
font-family: "Courier New",monospace;
}

這Courier New會將字體設(shè)置為并添加monospace為備份。

如果我們指定的字體不是通用名稱之一（如 serif、sans-serif），我們需要給瀏覽器一個(gè)后備。

如何使用字體堆棧

在這種情況下，該font-family屬性具有多個(gè)值。

它是可以應(yīng)用于文本的字體系列名稱的優(yōu)先級、逗號分隔列表，表明所有字體都是替代字體。這可以最大限度地提高瀏覽器和操作系統(tǒng)的兼容性。

該列表的優(yōu)先級從左到右，從最高到最低。

p { 
  font-family: "Lucida Console", Courier, monospace;
}

通過應(yīng)用多個(gè)字體系列名稱，您可以創(chuàng)建一個(gè)優(yōu)先順序。我們首先從我們想要的字體開始。

如果用戶沒有在他們的計(jì)算機(jī)上安裝第一個(gè)選項(xiàng)或者瀏覽器不支持它，瀏覽器會移動到第二個(gè)字體并使用那個(gè)字體。如果該字體也不可用，則移至第三種，依此類推。

我們可以列出任意數(shù)量的字體，但最佳做法是列出三到四種。

如果所有其他方法都失敗了，最后總會有一個(gè)通用字體作為最后一個(gè)選項(xiàng)回退機(jī)制列出。

從列出的組中，瀏覽器必須支持至少一個(gè)選項(xiàng)，并且通用名稱保證將呈現(xiàn)所需字體系列中的某些內(nèi)容。

p {
 font-family: Georgia, "Times New Roman", Times, serif;

您列出的字體稱為字體堆棧。

瀏覽器將首先查找Georgia. 如果已安裝，瀏覽器將顯示該字體。否則它會尋找Times New Roman. 如果這也不可用，它將求助于顯示通用默認(rèn)serif系列字體。

結(jié)論

在本文中，我們回顧了不同的字體系列，并給出了每個(gè)系列中不同樣式的一些示例。

我們還討論了font-family屬性以及在 CSS 中設(shè)置字體的三種不同方法。

您將從絕對的基礎(chǔ)開始，然后逐步了解 Flexbox、CSS 網(wǎng)格以及如何使網(wǎng)站具有響應(yīng)性。這些是數(shù)字設(shè)計(jì)和前端 Web 開發(fā)的基本技能。

感謝閱讀，祝學(xué)習(xí)愉快。

HTML CSS

0 人點(diǎn)贊