CSS 字体属性详细总结

猪鼻插大葱扮大笨象

于 2024-07-25 10:15:00 发布

阅读量868

点赞数 32

分类专栏：前端自学知识文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_59779364/article/details/140676889

版权

前端自学知识专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS 字体属性详细总结

1. `font-family`

描述：定义文本的字体系列。
用法：可以指定多个字体名称，以逗号分隔，浏览器将使用第一个可用的字体。通常包括一个或多个具体字体名和一个通用字体族。

示例：

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

2. `font-size`

描述：设置字体的大小。
用法：可以使用绝对单位（如 px、pt）或相对单位（如 em、rem、%）。使用相对单位可以使文本在不同屏幕上更具适应性。

示例：

h1 {
    font-size: 24px; /* 使用绝对单位 */
}

p {
    font-size: 1.5em; /* 使用相对单位 */
}

3. `font-weight`

描述：设置字体的粗细。
用法：可以使用关键字（如 normal、bold）或数值（100到900）。数值越大，字体越粗。

示例：

h2 {
    font-weight: 700; /* 加粗 */
}

p {
    font-weight: normal; /* 正常 */
}

4. `font-style`

描述：设置字体的样式。
用法：可以是 normal、italic 或 oblique。italic 用于斜体，oblique 用于倾斜字体。

示例：

em {
    font-style: italic; /* 斜体 */
}

5. `font-variant`

描述：设置字体的变体，通常用于小型大写字母（small-caps）。
用法：常用于强调文本。

示例：

h3 {
    font-variant: small-caps; /* 小型大写 */
}

6. `line-height`

描述：设置行高，影响文本行之间的垂直间距。
用法：可以使用数值、单位（如 px、em）或百分比。推荐使用无单位数值（如 1.5），以便更好地适应不同字体大小。

示例：

p {
    line-height: 1.5; /* 使用无单位数值 */
}

7. `font`

描述：一个简写属性，用于设置多个字体相关的属性。
用法：必须按照特定顺序书写，且 font-size 和 font-family 是必需的。其他属性如 font-style、font-weight、line-height 和 font-variant 可以选择性使用。

示例：

h4 {
    font: italic small-caps bold 18px/1.5 "Georgia", serif; /* 综合设置 */
}

8. `text-transform`

描述：控制文本的大小写转换。
用法：可以设置为 uppercase、lowercase、capitalize 或 none。

示例：

h1 {
    text-transform: uppercase; /* 转换为大写 */
}

9. `letter-spacing`

描述：设置字符之间的间距。
用法：可以使用正值（增加间距）或负值（减少间距）。

示例：

h2 {
    letter-spacing: 2px; /* 增加字母间距 */
}

10. `word-spacing`

描述：设置单词之间的间距。
用法：可以使用正值或负值。

示例：

p {
    word-spacing: 5px; /* 增加单词间距 */
}

11. `text-indent`

描述：设置文本的缩进。
用法：可以使用绝对单位或相对单位。

示例：

p {
    text-indent: 20px; /* 首行缩进20px */
}

12. `text-align`

描述：设置文本的对齐方式。
用法：可以设置为 left、right、center 或 justify。

示例：

p {
    text-align: justify; /* 两端对齐 */
}

完整案例

下面是一个完整的HTML和CSS示例，展示如何使用这些字体属性来设计一个简单的网页。

HTML 代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 字体属性示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1 class="main-title">欢迎来到我的网站</h1>
    <h2 class="sub-title">这是一个关于CSS字体属性的示例</h2>
    <p class="description">使用不同的字体属性来展示文本样式。<strong>加粗文本</strong>和<em>斜体文本</em>展示了字体样式的变化。</p>
    <p class="indented">这是一个有缩进的段落，展示了 <code>text-indent</code> 属性的效果。</p>
</body>
</html>

CSS 代码（styles.css）

body {
    font-family: Arial, sans-serif; /* 全局字体 */
    line-height: 1.6; /* 全局行高 */
    color: #333; /* 字体颜色 */
    margin: 20px; /* 页面边距 */
}

.main-title {
    font: bold 36px/1.2 "Helvetica Neue", sans-serif; /* 主标题样式 */
    color: #2c3e50; /* 主标题颜色 */
    text-align: center; /* 主标题居中对齐 */
}

.sub-title {
    font: italic small-caps 24px/1.4 "Georgia", serif; /* 副标题样式 */
    color: #34495e; /* 副标题颜色 */
    text-align: left; /* 副标题左对齐 */
}

.description {
    font: normal 16px/1.5 "Times New Roman", serif; /* 描述文本样式 */
    color: #666; /* 描述文本颜色 */
    text-align: justify; /* 描述文本两端对齐 */
}

strong {
    font-weight: bold; /* 加粗文本 */
}

em {
    font-style: italic; /* 斜体文本 */
}

.indented {
    text-indent: 20px; /* 首行缩进20px */
    letter-spacing: 1px; /* 字母间距 */
    word-spacing: 2px; /* 单词间距 */
}

解释

HTML结构：我们创建了一个包含主标题、副标题和描述文本的简单网页。
CSS样式：
- 全局样式：为整个页面设置了默认字体、行高和颜色。
- 主标题：使用 font 属性设置为加粗、36px、行高为1.2，字体系列为 "Helvetica Neue"，并居中对齐。
- 副标题：使用 font 属性设置为斜体、小型大写、24px、行高为1.4，字体系列为 "Georgia"，并左对齐。
- 描述文本：使用 font 属性设置为正常样式、16px、行高为1.5，字体系列为 "Times New Roman"，并设置为两端对齐。
- 缩进段落：使用 text-indent 属性设置首行缩进，并增加字母和单词间距。