CSS的字体

在 CSS 中，字体（font）是网页设计中的一个重要部分，它控制了文本的外观和排版效果。通过设置不同的字体属性，我们可以使网页上的文字更具吸引力和可读性。以下是与字体相关的 CSS 属性及其用法：

1️⃣ font-family — 设置字体系列

font-family 用于指定元素的字体。可以使用字体系列名称（如 Arial, Times New Roman）或 Web 字体（如 Google Fonts 提供的字体）。可以指定多个字体，浏览器会按顺序使用其中可用的字体。

语法：

element {
  font-family: 'Arial', sans-serif;
}

示例：

p {
  font-family: 'Helvetica', 'Arial', sans-serif;
}

2️⃣ font-size — 设置字体大小

font-size 用于设置文本的字体大小。常见的单位有 px（像素），em（相对于父元素的字体大小），rem（相对于根元素的字体大小），%（相对于父元素的字体大小）等。

语法：

element {
  font-size: 16px;
}

示例：

h1 {
  font-size: 2em; /* 相对于父元素字体大小 */
}

p {
  font-size: 14px; /* 使用像素指定字体大小 */
}

3️⃣ font-weight — 设置字体粗细

font-weight 用于设置文本的粗细，常用的值有 normal、bold、lighter 和具体的数值（100 到 900）。数值越大，字体越粗。

语法：

element {
  font-weight: bold;
}

示例：

p {
  font-weight: 700; /* 数值越大字体越粗 */
}

h2 {
  font-weight: lighter;
}

4️⃣ font-style — 设置字体样式

font-style 用于设置字体的样式，常见值有 normal（常规）、italic（斜体）、oblique（倾斜体）。其中，italic 表示标准的斜体，而 oblique 用于实现稍微倾斜的样式。

语法：

element {
  font-style: italic;
}

示例：

p {
  font-style: oblique;
}

em {
  font-style: italic;
}

5️⃣ font-variant — 设置字体变体

font-variant 用于设置字体的变体，最常用的是 small-caps（小型大写字母），它会将文本的所有字母变为小写字母，并将它们的大小调整为小写字母的正常大小，但仍然保持大写字母的字形。

语法：

element {
  font-variant: small-caps;
}

示例：

h1 {
  font-variant: small-caps;
}

6️⃣ line-height — 设置行高

line-height 用于设置行与行之间的间距。它可以接受数字、百分比、像素值等。通常，设置一个合适的行高可以提高文本的可读性。

语法：

element {
  line-height: 1.5; /* 值越大，行间距越大 */
}

示例：

p {
  line-height: 1.6;
}

7️⃣ letter-spacing — 设置字母间距

letter-spacing 用于设置字符之间的间距。可以增加或减少字符间距，单位通常为 px 或 em。

语法：

element {
  letter-spacing: 2px; /* 设置字母间距 */
}

示例：

h2 {
  letter-spacing: 1px;
}

8️⃣ word-spacing — 设置单词间距

word-spacing 用于设置单词之间的间距，单位通常为 px 或 em。

语法：

element {
  word-spacing: 5px; /* 设置单词间距 */
}

示例：

p {
  word-spacing: 3px;
}

9️⃣ text-transform — 设置文本转换

text-transform 用于设置文本的大小写形式。常用值有 uppercase（全部大写）、lowercase（全部小写）和 capitalize（每个单词首字母大写）。

语法：

element {
  text-transform: uppercase;
}

示例：

h1 {
  text-transform: capitalize;
}

🔟 font — 字体简写属性

font 是一种简写属性，允许将 font-family、font-size、font-weight、font-style 和 line-height 等属性组合在一起，简洁地设置字体。

语法：

element {
  font: [font-style] [font-variant] [font-weight] [font-size] [line-height] [font-family];
}

示例：

p {
  font: italic small-caps bold 16px/1.5 Arial, sans-serif;
}

• font-style: 设置字体样式（如斜体）。
• font-variant: 设置字体变体（如小型大写字母）。
• font-weight: 设置字体粗细（如粗体）。
• font-size: 设置字体大小。
• line-height: 设置行高。
• font-family: 设置字体家族。

字体的继承性

大部分字体相关属性都具有继承性，意味着子元素会继承父元素的字体设置。例如，font-family 和 font-size 会从父元素继承，但 font-weight 和 font-style 通常需要明确设置。

body {
  font-family: 'Arial', sans-serif;
  font-size: 16px;
}

h1 {
  font-family: 'Helvetica', sans-serif; /* 会覆盖 body 设置的字体 */
}

总结

CSS 的字体属性让我们能够对网页中的文本进行详细控制。通过使用 font-family、font-size、font-weight 等属性，可以根据设计需求调整字体样式、大小和粗细等。利用字体的继承性和简写属性，可以使样式更加简洁且易于维护。掌握这些字体属性，将帮助你更好地设计页面的文本显示效果。

CSS的字体 – 52kanjuqing-开发者社区,学的不仅是技术，更是梦想