- 您好！欢迎来到鲲鹏知舟
CSS Font字体
CSS Font 属性用于控制文本的外观。通过使用 CSS 字体属性，您可以更改文本大小、颜色、样式等。您已经学习了如何将文本加粗或加下划线。在这里，您还将了解如何使用百分比调整字体大小。
这些是一些重要的字体属性：
CSS Font color：此属性用于更改文本的颜色。（独立属性）
CSS Font family：此属性用于更改字体的外观。
CSS Font size：此属性用于增大或减小字体的大小。
CSS Font style：此属性用于使字体变为粗体、斜体或斜体。
CSS Font variant：此属性创建小型大写字母效果。
CSS Font weight：此属性用于增加或减少字体的粗细。
1) CSS 字体颜色
CSS字体颜色是一个独立的属性CSS虽然它似乎是CSS字体的一部分。它用于更改文本的颜色。
有三种不同的格式来定义颜色：
按颜色名称
按十六进制值
按 RGB
在上面的例子中，我们已经定义了所有这些格式。
例子 (Example)
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h1 { color: red; }
h2 { color: #9000A1; }
p { color:rgb(0, 220, 98); }
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
</body>
</html>
2) CSS 字体家族
CSS 字体家族可以分为两种类型：
通用系列：包括 Serif、Sans-serif 和 Monospace。
字体系列：指定字体系列名称，如 Arial、New Times Roman 等。
Serif：Serif 字体在字符末尾包含小线。衬线体示例：Times new roman、Georgia 等。
无衬线：无衬线字体不包括字符末尾的小线。无衬线字体示例：Arial、Verdana 等。
例子 (Example)
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h1 { font-family: sans-serif; }
h2 { font-family: serif; }
p { font-family: monospace; }
}
</style>
</head>
<body>
<h1>This heading is shown in sans-serif.</h1>
<h2>This heading is shown in serif.</h2>
<p>This paragraph is written in monospace.</p>
</body>
</html>
3) CSS 字体大小
CSS font size 属性用于改变字体的大小。
这些是可用于设置字体大小的可能值：
| 字体大小值 | 描述 |
|---|---|
| xx-小 | 用于显示极小的文字大小。 |
| x-小 | 用于显示超小的文本大小。 |
| 小的 | 用于显示较小的文本大小。 |
| 中等的 | 用于显示中等大小的文字。 |
| 大的 | 用于显示大文本大小。 |
| x-大 | 用于显示超大文本大小。 |
| xx-大 | 用于显示非常大的文本大小。 |
| 较小 | 用于显示相对较小的文本大小。 |
| 更大 | 用于显示相对较大的文本大小。 |
| 以像素或百分比为单位的大小 | 用于以百分比或像素为单位设置值。 |
例子 (Example)
<html> <head> <title>Practice CSS font-size property</title> </head> <body> <p style="font-size:xx-small;"> This font size is extremely small.</p> <p style="font-size:x-small;"> This font size is extra small</p> <p style="font-size:small;"> This font size is small</p> <p style="font-size:medium;"> This font size is medium. </p> <p style="font-size:large;"> This font size is large. </p> <p style="font-size:x-large;"> This font size is extra large. </p> <p style="font-size:xx-large;"> This font size is extremely large. </p> <p style="font-size:smaller;"> This font size is smaller. </p> <p style="font-size:larger;"> This font size is larger. </p> <p style="font-size:200%;"> This font size is set on 200%. </p> <p style="font-size:20px;"> This font size is 20 pixels. </p> </body> </html>
4) CSS 字体样式
CSS Font style 属性定义了要显示的字体类型。它可以是斜体、斜体或正常的。
例子 (Example)
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h2 { font-style: italic; }
h3 { font-style: oblique; }
h4 { font-style: normal; }
}
</style>
</head>
<body>
<h2>This heading is shown in italic font.</h2>
<h3>This heading is shown in oblique font.</h3>
<h4>This heading is shown in normal font.</h4>
</body>
</html>
5) CSS 字体变体
CSS 字体变体属性指定如何设置元素的字体变体。它可能是普通和小盘股。
例子 (Example)
<!DOCTYPE html>
<html>
<head>
<style>
p { font-variant: small-caps; }
h3 { font-variant: normal; }
</style>
</head>
<body>
<h3>This heading is shown in normal font.</h3>
<p>This paragraph is shown in small font.</p>
</body>
</html>
6) CSS 字体粗细
CSS font weight 属性定义字体的粗细并指定字体的粗细程度。字体粗细的可能值可能是 normal、bold、bolder、lighter 或 number（100、200..... 到 900）。
例子 (Example)
<!DOCTYPE html> <html> <body> <p style="font-weight:bold;">This font is bold.</p> <p style="font-weight:bolder;">This font is bolder.</p> <p style="font-weight:lighter;">This font is lighter.</p> <p style="font-weight:100;">This font is 100 weight.</p> <p style="font-weight:200;">This font is 200 weight.</p> <p style="font-weight:300;">This font is 300 weight.</p> <p style="font-weight:400;">This font is 400 weight.</p> <p style="font-weight:500;">This font is 500 weight.</p> <p style="font-weight:600;">This font is 600 weight.</p> <p style="font-weight:700;">This font is 700 weight.</p> <p style="font-weight:800;">This font is 800 weight.</p> <p style="font-weight:900;">This font is 900 weight.</p> </body> </html>
-
使用社交账号登录,本站支持