白骑士的CSS教学语法基础篇之文本与字体 2.3.1 字体属性

白骑士所长

已于 2024-09-20 12:55:39 修改

阅读量469

点赞数 20

分类专栏： CSS 教学文章标签： css 前端

于 2024-08-25 00:01:49 首次发布

本文链接：https://blog.csdn.net/JeremyTC/article/details/141322656

版权

教学同时被 2 个专栏收录

275 篇文章 2 订阅

订阅专栏

CSS

76 篇文章 0 订阅

订阅专栏

系列目录

上一篇：白骑士的CSS教学语法基础篇之颜色与背景 2.2.2 背景属性

在网页设计中，文本和字体的样式对用户体验和视觉效果至关重要。CSS 提供了多种属性来控制文本的外观，包括字体家族、字体大小、字体粗细、字体样式和行高等。通过这些属性，开发者可以精确地调整文本的展示效果，使其符合设计需求和可读性标准。

font-family‘

‘font-family‘ 属性用于指定文本的字体家族。可以使用一个或多个字体名称，浏览器会根据优先级从左到右选择第一个可用的字体。如果指定的字体不可用，浏览器会使用下一个可用的字体。

语法：

selector {
  font-family: font1, font2, font3, ...;
}

示例：

/* 设置字体为 Arial，如果 Arial 不可用，则使用 sans-serif */
body {
  font-family: Arial, sans-serif;
}

/* 设置字体为 "Times New Roman"，如果不可用则使用 serif */
h1 {
  font-family: "Times New Roman", serif;
}

解释：

‘font-family‘ 可以包含多个字体名称，以备不时之需。浏览器会从左到右逐一尝试，直到找到一个可用的字体。
推荐将常用字体名称放在前面，确保优雅降级。

优点：

灵活性：可以指定多个字体以确保文本在不同设备上的显示效果。
可读性：选择合适的字体可以提高文本的可读性和视觉效果。

缺点：

字体兼容性：不同操作系统和设备可能没有安装相同的字体，因此需要使用通用字体族作为备选。

‘font-size‘

‘font-size‘ 属性用于设置文本的字体大小。可以使用像素（px）、相对单位（em、rem）或百分比（%）来定义字体大小。

语法：

selector {
  font-size: size;
}

示例：

/* 设置字体大小为 16px */
p {
  font-size: 16px;
}

/* 设置字体大小为 1.5em，即相对于父元素字体大小的 1.5 倍 */
h2 {
  font-size: 1.5em;
}

/* 设置字体大小为 120% */
strong {
  font-size: 120%;
}

解释：

‘font-size‘ 控制文本的大小。像素值提供了精确的大小，而相对单位允许字体根据父元素的字体大小进行缩放。
使用相对单位可以使设计更具弹性，适应不同的屏幕尺寸和用户设置。

优点：

精确控制：像素值提供了精确的字体大小控制。
适应性：相对单位和百分比允许字体根据上下文动态调整大小。

缺点：

设计一致性：使用相对单位可能导致设计在不同设备上的一致性问题，需要进行测试和调整。

‘font-weight‘

‘font-weight‘ 属性用于设置字体的粗细程度。可以使用具体的数值（100, 200, 300, ..., 900）或关键字（normal, bold）。

语法：

selector {
  font-weight: weight;
}

示例：

/* 设置字体粗细为 400，即正常字体 */
body {
  font-weight: 400;
}

/* 设置字体粗细为 700，即加粗字体 */
h1 {
  font-weight: bold;
}

/* 设置字体粗细为 900，即极粗字体 */
strong {
  font-weight: 900;
}

解释：

‘font-weight‘ 控制文本的粗细，数值越大，字体越粗。常用的关键字包括 ‘normal‘（正常）和 ‘bold‘（加粗）。
使用数值可以实现更精细的粗细控制，适用于不同设计需求。

优点：

控制文本强度：允许开发者创建视觉层次和强调。
适应不同设计：可以使用多种粗细选项来符合设计风格。

缺点：

字体支持：不是所有字体都支持所有粗细级别，需要确保所用字体支持所需的粗细选项。

‘font-style‘

‘font-style‘ 属性用于设置文本的字体样式，主要用于设置斜体。常用的值有 ‘normal‘、‘italic‘ 和 ‘oblique‘。

语法：

selector {
  font-style: style;
}

示例：

/* 设置字体为正常样式 */
p {
  font-style: normal;
}

/* 设置字体为斜体 */
em {
  font-style: italic;
}

/* 设置字体为倾斜体 */
cite {
  font-style: oblique;
}

解释：

‘font-style‘ 控制文本的斜体样式。‘italic‘ 是标准斜体，‘oblique‘ 是倾斜体，通常表现为轻微的倾斜效果。
‘normal‘ 表示普通样式，没有斜体效果。

优点：

文本样式变化：允许通过斜体来突出显示文本或表示引用。
设计变化：可以用于创建视觉效果或强调。

缺点：

字体支持：某些字体可能没有斜体版本，可能会回退到普通样式。

‘line-height‘

‘line-height‘ 属性用于设置文本行的高度，即每一行的间距。可以使用像素、相对单位或百分比来定义。

语法：

selector {
  line-height: height;
}

示例：

/* 设置行高为 1.5 倍字体大小 */
body {
  line-height: 1.5;
}

/* 设置行高为 24px */
p {
  line-height: 24px;
}

/* 设置行高为 120% */
h2 {
  line-height: 120%;
}

解释：

‘line-height‘ 控制文本行之间的间距。适当的行高可以提高文本的可读性，避免行间距过于紧凑或过于分散。
使用相对单位可以根据字体大小自适应行高，适合响应式设计。

优点：

提高可读性：调整行高可以使文本更易于阅读。
设计一致性：可根据不同的字体大小进行动态调整。

缺点：

设计调试：不当的行高设置可能导致文本拥挤或空白过多，需要根据实际设计进行调整。

总结

在 CSS 中，字体属性对于控制文本的外观至关重要。通过使用 ‘font-family‘、‘font-size‘、‘font-weight‘、‘font-style‘ 和 ‘line-height‘ 属性，开发者可以精确调整文本的显示效果。这些属性不仅允许开发者实现特定的视觉设计，还能提高文本的可读性和用户体验。了解并掌握这些属性的使用，有助于创建美观、易读的网页内容。

下一篇：白骑士的CSS教学语法基础篇之文本与字体 2.3.2 文本对齐与装饰