下面是“CSS中Font的一些基本知识点归纳总结”的完整攻略：

一、基本概念

Font 是 CSS 中字体的一种属性，用来控制元素的字体和字号。在 CSS 中，Font 含有以下子属性：

Font-family：字体族名称，即字体的种类，默认是浏览器的默认字体。
Font-size：字体大小，可以使用绝对大小和相对大小两种方式，绝对大小如px和pt，相对大小如em和rem。
Font-weight：字体粗细，取值为normal、bold、bolder、lighter或者100-900之间的数值。默认是normal。
Font-style：字体样式，取值为normal、italic、oblique，默认是normal。
Font-variant：字体变体，取值为normal和small-caps，默认是normal。

二、应用方法

2.1 设置全局字体

可以通过设置body元素来改变整个页面的默认字体，例如：

body {
    font-family: Arial, sans-serif; /*字体族*/
    font-size: 14px; /*字体大小*/
}

上述代码中，将所有文字的字体族设置为Arial，如果Arial不可用，则采用浏览器默认的 sans-serif 字体族。同时，将字体大小设置为14px。

2.2 设置特定元素的字体

同样可以通过设置特定元素来改变该元素的字体，例如：

h1 {
    font-family: Georgia, serif; /*字体族*/
    font-size: 36px; /*字体大小*/
    font-style: italic; /*字体样式*/
    font-weight: bold; /*字体粗细*/
}

上述代码中，将h1元素的字体族设置为Georgia，如果Georgia不可用，则采用默认的serif字体族；将字体大小设置为36px；将字体样式设置为italic，即斜体；将字体粗细设置为bold，即加粗。

三、示例演示

3.1 示例1：设置全局字体

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>设置全局字体示例</title>
    <style>
        body {
            font-family: Arial, sans-serif; /*字体族*/
            font-size: 16px; /*字体大小*/
        }
    </style>
</head>
<body>
    <p>这是一段使用全局字体的文字。</p>
</body>
</html>

在上述示例中，将body元素的字体族设置为Arial，字体大小设置为16px，因此页面中所有的文字都采用了Arial字体。

3.2 示例2：设置特定元素的字体

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>设置特定元素的字体示例</title>
    <style>
        h1 {
            font-family: Georgia, serif; /*字体族*/
            font-size: 36px; /*字体大小*/
            font-style: italic; /*字体样式*/
            font-weight: bold; /*字体粗细*/
        }
    </style>
</head>
<body>
    <h1>这是标题</h1>
    <p>这是一段使用默认字体的文字。</p>
</body>
</html>

在上述示例中，将h1元素的字体族设置为Georgia，字体大小设置为36px，字体样式设置为italic，字体粗细设置为bold，因此h1标题采用了Georgia字体，斜体，加粗的样式，而p段落中的文字仍采用了默认的字体。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：CSS中Font的一些基本知识点归纳总结 - Python技术站

CSS中Font的一些基本知识点归纳总结