CSS 字体：Font

文章目录

• [CSS 字体](#CSS 字体)
• • serif和sans-serif字体之间的区别
• [CSS 字型](#CSS 字型)
• 字体系列
• 字体样式
• 字体大小
• 设置字体大小像素
• 用em来设置字体大小
• 使用百分比和EM组合
• [CSS 字体属性](#CSS 字体属性)

---

CSS 字体

CSS字体属性可以定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）。具体来说，CSS字体属性包括以下这些：

font-family：用于设置字体类型。

font-size：用于设置字体大小。

font-weight：用于设置字体粗细。

font-style：用于设置字体样式，如斜体。

font-variant：用于设置小型大写字母变形。

使用这些属性，可以为你的文本创建各种不同的样式。

serif和sans-serif字体之间的区别

serif和sans-serif字体之间的区别主要体现在以下几个方面：

1. 易读性：serif字体容易辨认，因此易读性较高。相反，sans-serif字体比较醒目，但在行文阅读的情况下，它容易造成字母辨认的困扰，经常会有来回重读及上下行错乱的情况。
2. 字母笔画的开始和结束：serif强调了字母笔划的开始及结束，因此较易辨识字母笔画的连续性。相比之下，sans-serif的这方面表现较弱。
3. 单词和字母的强调：serif强调的是一个单词，而非单一的字母。sans-serif则相反，它强调的是个别字母。
4. 小字体下的表现：在小字体的场合，sans-serif通常比serif更清晰。因为黑体字属于"无衬线体"（sans-serif），而宋体字属于"有衬线体"（serif），后者对于人眼的辨识来说会更轻松一些，所以在阅读的时候会更舒服。

总的来说，serif和sans-serif各有其特点和适用场合。serif更适合于需要高易读性的内容和环境，而sans-serif则更适合于需要独特视觉效果和现代感的内容和环境。

CSS 字型

CSS中的字型属性有多种，包括衬线字体（Serif）和无衬线字体（Sans-serif）等。

衬线字体在每个字母的边缘都有一个小的笔触，营造出一种形式感和优雅感，常见于报刊书籍中。例如，宋体和Times New Roman就是衬线字体的例子。

无衬线字体则没有这些小笔触，看起来更为现代和简约。例如，黑体和Arial就是无衬线字体的例子，常见于网页中。

在CSS中，可以使用font-family属性来规定文本的字体，比如font-family: "宋体"，代表将文本设置为宋体字体。除了宋体，常见的衬线字体还包括Times New Roman等。

另一方面，常见的无衬线字体包括黑体、Arial等。除了这些基本字体，还有很多其他的字体可以在CSS中使用，具体可以参考网页设计的相关资料。

字体系列

在CSS中，字体系列指的是计算机中安装的字体类型，以及相应的字体样式。

CSS中的字体系列有很多种类型，其中包括serif字体、sans-serif字体、monospace字体、cursive字体和fantasy字体等五种通用字体系列。

serif字体是一种具有衬线装饰的字体，如Times New Roman等。sans-serif字体则是一种没有衬线装饰的字体，如Arial等。monospace字体是一种每个字母和数字占据相同空间的字体，如Courier New等。cursive字体是一种手写风格的字体，如Brush Script等。fantasy字体则是一种具有装饰效果的字体，如Comic Sans MS等。

在CSS中，可以使用font-family属性来规定字体系列，例如：

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

在这个例子中，如果用户的计算机上没有"Times New Roman"字体，那么浏览器会尝试使用"Times"字体，如果"Times"也没有，那么就使用默认的serif字体。

除了font-family属性外，CSS还有很多其他的字体属性可以用于设置字体的样式和大小，例如font-size、font-weight、font-style等属性。

字体样式

在CSS中，字体样式属性包括font-style和font-variant等属性。

font-style属性用于设置字体的样式，包括normal（正常样式）、italic（斜体样式）和oblique（倾斜样式）三种类型。其中，normal是默认值，italic表示使用斜体显示，oblique表示使用倾斜字体显示。

font-variant属性用于在小型大写字母和普通文本之间切换。其值可以是normal（普通文本）或small-caps（小型大写字母）。

以下是一个示例：

p {
  font-style: italic;
  font-variant: small-caps;
}

在这个例子中，段落中的文本将被设置为斜体样式，同时使用小型大写字母显示文本中的某些字母或单词。

字体大小

在CSS中，字体大小是指字体中字符框的大小，可以使用font-size属性来设置。该属性的值可以是"small"、"large"、"smaller"、"larger"等关键字，也可以是加px、em、rem、%单位的数值。

例如，要设置一个段落字体大小为14px，可以这样写：

p {
  font-size: 14px;
}

在实际应用中，可以根据需求选择合适的字体大小和单位。

设置字体大小像素

在CSS中，设置字体大小像素可以通过以下方式实现：

p {
  font-size: 14px;
}

在这个例子中，我们将段落的字体大小设置为14像素。你可以根据实际需求设置其他元素的字体大小。

用em来设置字体大小

em是一个相对单位，通常相对于父元素的字体大小来计算。在CSS中，我们可以使用em来设置字体大小，例如：

p {
  font-size: 1em;
}

在这个例子中，段落的字体大小将设置为与父元素的字体大小相同的值。如果父元素的字体大小为16像素，则该段落的字体大小也将是16像素。

如果要设置其他字体大小，可以给em赋值，例如：

p {
  font-size: 0.875em;
}

在这个例子中，段落的字体大小将设置为父元素字体大小的0.875倍，即14像素。

使用em设置字体大小有很多优点，比如可以轻松控制字体大小，同时可以确保字体在不同显示器上看起来相同。

使用百分比和EM组合

在CSS中，可以同时使用百分比和em来设置字体大小。

例如，如果我们想设置一个段落的字体大小为其父元素字体大小的100%，并且如果父元素的字体大小为16像素，则该段落的字体大小将是16像素，我们可以这样做：

p {
  font-size: 1em; /* 以父元素的字体大小为基准 */
}

如果我们想设置一个h1元素的字体大小为其父元素字体大小的200%，并且如果父元素的字体大小为16像素，则该h1元素的字体大小将是32像素，我们可以这样做：

h1 {
  font-size: 2em; /* 以父元素的字体大小为基准 */
}

同时使用百分比和em可以让我们更灵活地控制字体大小，并且可以确保字体在不同显示器上看起来相同。

CSS 字体属性

以下的图表展示了CSS字体属性：

属性	描述
font-family	指定文本的字体系列
font-size	指定文本的字体大小
font-style	指定文本的字体样式，如斜体或正常样式
font-weight	指定字体的粗细，如正常、粗体或斜体
font-variant	以小型大写字体或者正常字体显示文本
color	设置文本颜色