CSS 中的版式和字体样式

讲座 4：CSS 中的版式和字体样式

在本次讲座中，我们将探讨如何使用 CSS 设置文本样式。版式是网页设计的一个重要方面，影响可读性、用户体验和整体美观。在本讲座结束时，您将了解如何在网站上应用各种字体样式并控制文本外观。

---

了解网页字体

网络字体允许您在网站上使用各种字体。您可以使用设备上预装的系统字体，也可以使用 Google Fonts 等服务导入自定义字体。

1.系统字体

系统字体是可靠的，因为它们预装在大多数设备上，但它们限制了您的设计选项。

• 示例：

  body {
    font-family: Arial, sans-serif;
  }

2.谷歌字体

Google Fonts 提供多种网络字体供您选择，您可以轻松地将它们集成到您的网站中。

• 示例：

  1. 首先，在 HTML 中包含字体链接：

   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  

1. 然后，在 CSS 中应用字体：
   

    body {
      font-family: 'Roboto', sans-serif;
    }
   

CSS 中的字体属性

CSS 提供了多种属性来设置字体样式，包括字体大小、粗细、样式等等。

1.字体大小

您可以使用 font-size 属性控制文本的大小。

• 示例：

  h1 {
    font-size: 36px;
  }
  p {
    font-size: 16px;
  }

2.字体粗细

font-weight 属性允许您设置文本显示的粗体程度。

• 示例：

  h1 {
    font-weight: bold; /* Or use numeric values like 700 */
  }

3.字体样式

字体样式属性可让您将文本设置为斜体。

• 示例：

  em {
    font-style: italic;
  }

4.字体变体

使用 font-variant 以小写字母显示文本。

• 示例：

  p.caps {
    font-variant: small-caps;
  }

5.行高

line-height 属性控制文本行之间的间距。

• 示例：

  p {
    line-height: 1.5;
  }

6.文本对齐

text-align 属性控制元素内文本的水平对齐方式。

• 示例：

  h1 {
    text-align: center;
  }

7.文字装饰

text-decoration 属性允许您向文本添加下划线、上划线或删除线。

• 示例：

  a {
    text-decoration: underline;
  }

8.文字阴影

您可以使用 text-shadow 属性为文本添加阴影效果。

• 示例：

  h2 {
    text-shadow: 2px 2px 5px gray;
  }

实际示例：

让我们结合这些属性来设计网页样式，重点关注排版。

HTML：

5d1e94760349a02ec7e3e05385bc999a
  4a249f0d628e2318394fd9b75b4636b1Welcome to Our Blog473f0a7621bec819994bb5020d29372a
  c1a436a314ed609750bd7c7d319db4daLatest Updates2e9b454fa8428549ca2e64dfac4625cd
  03c914392195facb4bb03ef129401e65Stay updated with the latest trends in web development, design, and more.94b3e26ee717c64999d7867364b1b4a3
  e388a4556c0f65e1904146cc1a846beeExplore articles, tutorials, and resources to help you master the art of web design.94b3e26ee717c64999d7867364b1b4a3
16b28748ea4df4d9c2150843fecfba68

CSS：

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

body {
  font-family: 'Open Sans', sans-serif;
  color: #333;
  line-height: 1.6;
}

/* Heading Styles */
h1 {
  font-size: 36px;
  font-weight: 700;
  text-align: center;
  text-shadow: 2px 2px 4px #aaa;
}

h2 {
  font-size: 28px;
  font-weight: 700;
  margin-top: 20px;
}

/* Paragraph Styles */
p {
  font-size: 18px;
  margin-bottom: 15px;
}

.intro {
  font-style: italic;
  font-variant: small-caps;
  text-align: justify;
}

/* Centering the content */
.content {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

在此示例中：

• 所有文本均使用 Google 字体“Open Sans”。
• 标题（h1、h2）采用特定的字体大小、粗细和文本阴影进行样式设置。
• 段落采用标准字体大小，并在 .intro 类中应用特殊样式，包括斜体和小型大写字母。
• 内容位于页面中央，具有最大宽度和自动边距。

练习运动

1. 创建一个包含各种标题和段落的 HTML 页面。
2. 应用不同的字体属性来设置文本样式。
3. 使用 Google 字体让您的网页具有独特的外观。
4. 尝试文本对齐、装饰和阴影效果。

---

下一步：在下一讲中，我们将讨论 CSS 布局：浮动、Flexbox 和网格，您将在其中学习如何为以下内容创建复杂且响应式的布局你的网站。敬请期待！

---

在 LinkedIn 上关注我
里多伊·哈桑

以上是CSS 中的版式和字体样式的详细内容。更多信息请关注PHP中文网其他相关文章！