当前位置：首页 > news >正文

CSS字体

news 来源：原创 2025/4/22 14:47:48

CSS字体

CSS 中的字体样式设置是网页设计的重要部分，以下是一些关键知识点和常见用法：
1.font-family ：用于设置元素的字体系列。可以指定一个或多个字体名称作为备选项，以确保如果某个字体不可用，可以使用下一个备选字体：

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

2.font-size ：用于设置字体大小。可以使用绝对单位或相对单位来指定字体大小：

h1 { font-size: 2rem; }   /* 相对根元素 */
p { font-size: 16px; }    /* 绝对单位 */
small { font-size: 80%; } /* 相对父元素 */

3.font-weight ：用于设置字体粗细。常见取值有normal , bold（加粗） ,以及数值：

.bold { font-weight: 700; } /* 等价于 bold */
.light { font-weight: 300; }

4.font-style : 用于设置字体样式，如斜体。常见取值有 normal （默认），italic（斜体），以及oblique（倾斜）：

em { font-style: italic; }
.oblique { font-style: oblique 15deg; } /* 可调节角度 */

5.text-decoration : 用于设置文本修饰效果，如下划线和删除线。常见的取值有none (无修饰)， underline（下划线），和line-through（删除线）:

a{text-decoration: underline;
}

当涉及到字体样式的示例时，可以使用CSS中的字体相关属性来演示。
以下是设置元素字体样式示例：

<!DOCTYPE html>
<html>
<head><title>CSS字体示例</title> <!-- 修正标题拼写 --><style>.custom-font {font-family: "Arial", sans-serif;font-size: 24px;font-weight: bold;font-style: italic;text-decoration: underline;} /* 添加闭合的大括号 */</style>
</head>
<body><p class="custom-font">This is a custom font example.</p><p>This is a regular paragraph.</p>
</body>
</html>