HTML 字体系列

2025年3月17日 | 阅读 8 分钟

引言

当开发者设计网页时，排版起着重要作用。通过影响可读性和美观性，可以提升整体用户体验。HTML网页设计中最基本方面之一就是选择字体家族。在本文中，我们将学习HTML字体家族。

什么是HTML字体家族？

它是一组具有共同设计的字体。在一个字体家族中，所有字体在样式上都有所不同，例如粗细（细、常规、粗、半粗等）。它们在倾斜度上也不同，如罗马体或正体、斜体和倾斜体。如果我们以最常见的字体家族 Times New Roman 为例，它包含同一种字体的罗马体、斜体、粗体和粗斜体版本。这些对于保持一致性并确保您的网页内容在不同设备和浏览器上按预期显示也很重要。它们也为特定字体内容（不可用时）提供备选方案。

常用字体家族

互联网上有许多常用字体家族。开发者经常使用这些字体家族。

1. 衬线字体 (Serif Fonts)

它们以字母笔画末端的细小装饰线或“衬线”为特征。这些字体被认为更正式和传统。一些最常见的衬线字体是 Times New Roman、Georgia 和 Baskerville。让我们看一个衬线字体的例子。

示例 1

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  /* Define a CSS rule for text using a serif font */
  body {
    font-family: "Times New Roman", Times, serif;
  }
</style>
</head>
<body>
 <h1>Welcome to javaTpoint</h1>
  <p>This is some sample text using a serif font.</p>
</body>
</html>

输出

说明

在上面的示例中，我们在 CSS 中使用了 font-family 属性来为 <body> 元素指定字体，进而指定了 HTML 文档主体中所有文本的字体。我们指定了一个通用的衬线字体作为备选方案，然后是特定的衬线字体家族，如“Times New Roman”和“Times”。浏览器将使用列表中的第一个可用字体，因此它会尝试使用“Times New Roman”，如果这些字体不可用，则回退到“Times”或任何其他通用衬线字体。

2. 无衬线字体 (Sans-Serif Fonts)

它缺乏这些装饰线，从而产生更简洁、更现代的外观。此字体的一些示例如 Arial、Helvetica 和 Roboto。让我们看一个衬线字体的例子。

示例 2

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 <h1>Sans Serif Fonts</h1>
<p>This is an example of a sans serif font: <span style="font-family: Arial;">This is Arial font</span></p>
<p>This is another example of a sans serif font: <span style="font-family: Helvetica;">This is Helvetica font</span></p>
</body>
</html>

输出

说明

这段代码将创建一个带有标题和两个段落的网页。第一个段落将以 Arial 字体显示文本“This is an example of a sans serif font”。第二个段落将以 Helvetica 字体显示文本“This is another example of a sans serif font”。

<span> 标签用于定义一个文本跨度。<span> 标签的 font-family 属性指定文本的字体家族。在这种情况下，我们正在使用 Arial 和 Helvetica 字体家族。

3. 等宽字体 (Monospace Fonts)

它会为每个字符分配相同的水平空间，使其非常适合代码块和打字机风格的文本。一些等宽字体的例子是 Courier New 和 Consolas。让我们看一个等宽字体的例子。

示例 3

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 <h1>Monospace Fonts</h1>
 <p>This is an example of a monospace font: <span style="font-family: 'Consolas', monospace;">This is Consolas font</span></p>
 <p>This is another example of a monospace font: <span style="font-family: 'Courier New', monospace;">This is Courier New font</span></p>
</body>
</html>

输出

说明

这段代码将创建一个带有标题和两个段落的网页。第一个段落将以 Consolas 字体显示文本“This is an example of a monospace font”。第二个段落将以 Courier New 字体显示文本“This is another example of a monospace font”。

<span> 标签用于定义一个文本跨度。<span> 标签的 font-family 属性指定文本的字体家族。在这种情况下，我们正在使用“Consolas”和“Courier New”字体家族。

4. 手写体字体 (Cursive Fonts)

这种字体具有模仿手写的流畅感，并为网页提供了装饰性的外观。开发者将其用于创意和艺术目的。让我们看一个手写体字体的例子。

示例 4

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  body {
    font-family: 'cursive';
  }
</style>
</head>
<body>
 <h1>Welcome to <span style="font-style: italic;">javaTpoint</span></h1>
</body>
</html>

输出

说明

在上面的代码中，我们在 HTML 文档的 <head> 中创建了 <style> 部分来定义 CSS 样式。然后我们设置了 font-family 属性为“cursive”，这将使用用户系统上可用的默认手写体字体。然后，在 <body> 内部，我们有一个 <h1> 元素，文本为“Welcome to javaTpoint”。我们还使用内联 CSS 将包含“World!”的 <span> 元素设置为斜体样式。

5. 奇幻字体 (Fantasy Fonts)

这种字体包含各种艺术性和装饰性风格。开发者会谨慎地将其用于特殊的装饰性强调，而不是正文。一些奇幻字体的例子是 Papyrus 和 Impact。让我们看一个奇幻字体的例子。

示例 5

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Fantasy Font Example</title>
 <style>
   body {
     font-family: 'fantasy';
   }
 </style>
</head>
<body>
 <h1>Welcome to the <span style="font-style: italic;">Fantasy World!</span></h1>
</body>
</html>

输出

说明

在上面的代码中，我们在 HTML 文档的 <head> 中包含了一个 <style> 部分来定义 CSS 样式。然后设置了 font-family 属性为“fantasy”，这将使用用户系统上可用的默认奇幻字体。然后，在 <body> 内部，我们有一个 <h1> 元素，文本为“Welcome to the Fantasy World!”，其中“Fantasy World!”以奇幻字体样式显示。请记住，实际使用的奇幻字体将取决于用户的系统和浏览器设置。如果您有特定的奇幻字体想要使用，则可以在 font-family 属性中指定其名称，而不是“fantasy”。此外，我们可以使用 font-style、font-size 和 font-weight 等 CSS 属性进一步自定义文本的外观。

6. 系统字体 (System Fonts)

这些类型的字体预装在用户的系统中。这些字体还提供了良好的跨平台兼容性。系统字体的一些例子是 Arial、Helvetica 和 Times New Roman。让我们看一个系统字体的例子。

示例 6

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>System Font Example</title>
 
</head>
<body>
 <p>This text will use the system's default font.</p>
</body>
</html>

输出

说明

在此示例中，<p> 元素内的文本将使用用户操作系统和浏览器配置的默认字体显示。这使得我们的网页内容能够无缝地与用户在字体渲染方面的系统偏好集成。

7. 谷歌字体 (Google Fonts)

它是最流行的网络服务，提供大量免费、对网络友好的字体，可以轻松集成到您的 HTML 文档中。它还允许我们指定自定义字体家族，让您更多地控制您网站的排版。下面我们来看一个谷歌字体的例子。

要将 Google Fonts 用于我们的程序，我们需要按照以下步骤操作。

首先，我们必须访问 Google Fonts 网站 (https://fonts.google.com/)。
然后，我们必须搜索您喜欢的字体。假设您选择“Roboto”字体。
然后，我们必须点击要使用的字体旁边的“+”按钮。它将被添加到您的选择中。
选择完要使用的字体后，在右侧边栏的“嵌入”部分向下滚动。
然后，我们必须复制“嵌入”部分提供的 HTML <link> 标签，并将其粘贴到 HTML 文档的 <head> 部分。
现在，我们可以使用 CSS 将字体应用于 HTML 中的特定元素。这是一个例子

示例 7

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Google Font Example</title>
  
  <!-- Include the Google Font -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
  
  <!-- Apply the Google Font to a CSS class -->
  <style>
    .custom-font {
      font-family: 'Roboto', sans-serif;
    }
  </style>
</head>
<body>
 <h1 class="custom-font">This text uses the Roboto font from Google Fonts.</h1>
  <p class="custom-font">Welcome to javaTpoint</p>
</body>
</body>
</html>

输出

说明

在上面的代码中，我们通过在 <head> 部分添加指向 Google Fonts URL 的 <link> 标签来包含了 Google 字体“Roboto”。然后，我们定义了一个名为 .custom-font 的 CSS 类，并为其应用了“Roboto”字体家族。然后，我们使用 .custom-font 类来样式化 HTML 中的 <h1> 和 <p> 元素。这些元素内的输出文本将使用 Google Fonts 的“Roboto”字体显示。我们还可以通过更改 <link> 标签和 CSS 规则中的字体名称来将“Roboto”替换为任何您喜欢的其他 Google 字体。

网页设计中字体家族的最佳实践

在为网页提供字体家族之前，我们需要记住一些事情。它们如下。

选择易读的字体

我们必须选择比美学更易读的字体。我们还必须确保所选字体易于阅读，尤其是对于正文文本。

限制字体种类

我们不应该为我们的网页使用太多字体。这不是最佳实践。如果我们这样做，可能会让您的网站看起来混乱且不专业。我们必须选择少数几种字体来实现统一的设计。

提供备选方案

我们必须始终选择提供保证的字体家族，即使首选字体不可用，我们的内容也能保持可读性。

考虑网络字体服务

最佳实践是选择 Google Fonts、Adobe Fonts 和 Typekit 等服务，它们提供各种适合网络的字体。这些服务可以处理字体托管和兼容性，从而更轻松地使用自定义字体。

跨设备和浏览器测试

选择字体家族后，我们必须在各种设备和浏览器上测试我们的字体家族，以确保它们完美运行。

使用字体粗细和样式

我们还必须利用字体粗细（例如，粗体、斜体）和样式（例如，常规、倾斜），以强调文本并创建视觉层次结构。

下一主题HTML 滑块

HTML 字体系列

引言

什么是HTML字体家族？

常用字体家族

1. 衬线字体 (Serif Fonts)

2. 无衬线字体 (Sans-Serif Fonts)

3. 等宽字体 (Monospace Fonts)

4. 手写体字体 (Cursive Fonts)

5. 奇幻字体 (Fantasy Fonts)

6. 系统字体 (System Fonts)

7. 谷歌字体 (Google Fonts)

网页设计中字体家族的最佳实践

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

HTML 字体系列

引言

什么是HTML字体家族？

常用字体家族

1. 衬线字体 (Serif Fonts)

2. 无衬线字体 (Sans-Serif Fonts)

3. 等宽字体 (Monospace Fonts)

4. 手写体字体 (Cursive Fonts)

5. 奇幻字体 (Fantasy Fonts)

6. 系统字体 (System Fonts)

7. 谷歌字体 (Google Fonts)

网页设计中字体家族的最佳实践

相关帖子

HTML 中的 hidden 和 aria-hidden 属性

如何在 HTML 中更改背景颜色

HTML selected 属性

HTML Boilerplate

HTML 复选框只读

HTML Rel

HTML 历史

Web 2.0

HTML 深色模式样式

HTML 仅输入数字

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器