CSS快速入门手册

字体

预计阅读时间1 分 40 views

1 作用

CSS 字体用于控制文本在网页中的呈现方式,可以通过 CSS 样式来设置字体的大小、颜色、粗细、字形等属性,从而使网页的文本更具可读性和美观性。

2 语法

在 CSS 中,我们可以使用 font-family 属性来定义字体系列,font-size 属性来定义字体大小,font-weight 属性来定义字体粗细,font-style 属性来定义字体样式,等等。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 字体示例</title>
<style>
    /* CSS 样式 */
    /* 设置文本的字体系列为 Arial、sans-serif,如果计算机上没有 Arial 字体,则使用默认的 sans-serif 字体 */
    body {
        font-family: Arial, sans-serif;
    }

    /* 设置文本的字体大小为 16 像素 */
    p {
        font-size: 16px;
    }

    /* 设置文本的字体加粗 */
    .bold {
        font-weight: bold;
    }

    /* 设置文本的字体斜体 */
    .italic {
        font-style: italic;
    }

    /* 设置特定的字体 */
    .custom-font {
        font-family: 'Times New Roman', Times, serif;
    }
</style>
</head>
<body>

<!-- HTML 示例 -->
<!-- 普通文本段落 -->
<p>This is a normal text paragraph.</p>

<!-- 使用 CSS 类来设置字体加粗 -->
<p class="bold">This text is bold.</p>

<!-- 使用 CSS 类来设置字体斜体 -->
<p class="italic">This text is italic.</p>

<!-- 使用自定义字体 -->
<p class="custom-font">This text uses a custom font.</p>

</body>
</html>

这个示例演示了如何使用 CSS 来设置文本的字体系列、大小、粗细和样式。

Leave a Comment

分享此文档

字体

或复制链接

内容