srcmini本文概述
CSS Font属性用于控制文本的外观。通过使用CSS字体属性, 你可以更改文本大小, 颜色, 样式等。你已经研究了如何使文本加粗或加下划线。在这里, 你还将知道如何使用百分比来调整字体大小。
这些是一些重要的字体属性：
- CSS字体颜色：此属性用于更改文本的颜色。 （独立属性）
- CSS字体家族：此属性用于更改字体的外观。
- CSS字体大小：此属性用于增加或减小字体的大小。
- CSS字体样式：此属性用于使字体变为粗体, 斜体或斜体。
- CSS字体变体：此属性创建一个小写效果。
- CSS字体粗细：此属性用于增加或减少字体的粗体和明暗度。
1）CSS字体颜色
CSS字体颜色是CSS中的一个独立属性, 尽管它似乎是CSS字体的一部分。它用于更改文本的颜色。
有三种不同的格式来定义颜色：
- 通过颜色名称
- 按十六进制值
- 通过RGB
在上面的示例中, 我们定义了所有这些格式。
<!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>输出：
This is heading 1
This is heading 2
This is a paragraph.2）CSS字体家族
CSS字体家族可以分为两种类型：
- 通用族：它包括Serif, Sans-serif和Monospace。
- 字体系列：它指定字体系列名称, 例如Arial, New Times Roman等。
衬线：衬线字体在字符末尾包含小行。衬线示例：Times new Roman, Georgia等。
Sans-Serif：Sans-Serif字体不包含字符末尾的小行。 Sans-serif的示例：Arial, Verdana等。
<!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>输出：
This heading is shown in sans-serif.
This heading is shown in serif.
This paragraph is written in monospace.3）CSS字体大小
CSS字体大小属性用于更改字体的大小。
这些是可用于设置字体大小的值：
| 字体大小值 | 描述 |
|---|---|
| xx-small | 用于显示极小的文本大小。 |
| x-small | 用于显示超小的文本大小。 |
| small | 用于显示较小的文本。 |
| medium | 用于显示中等大小的文字。 |
| large | 用于显示较大的文本。 |
| x-large | 用于显示超大文本大小。 |
| xx-large | 用于显示极大的文本。 |
| smaller | 用于显示相对较小的文本大小。 |
| larger | 用于显示相对较大的文本大小。 |
| 像素大小或％ | 用于以百分比或像素为单位设置值。 |
<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>输出：
This font size is extremely small.
This font size is extra small
This font size is small
This font size is medium.
This font size is large.
This font size is extra large.
This font size is extremely large.
This font size is smaller.
This font size is larger.
This font size is set on 200%.
This font size is 20 pixels.4）CSS字体样式
CSS字体样式属性定义要显示的字体类型。它可能是斜体, 倾斜或正常的。
<!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>输出：
This heading is shown in italic font.
This heading is shown in oblique font.
This heading is shown in normal font.5）CSS字体变体
CSS字体变体属性指定如何设置元素的字体变体。可能是正常的小型股。
<!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>输出：
This heading is shown in normal font.
This paragraph is shown in small font.6）CSS字体粗细
CSS字体粗细属性定义字体的粗细并指定字体的粗体程度。字体粗细的可能值可以是正常, 粗体, 粗体, 较浅或数字（100、200 …..最多900）。
<!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>输出：
This font is bold.
This font is bolder.
This font is lighter.
This font is 100 weight.
This font is 200 weight.
This font is 300 weight.
This font is 400 weight.
This font is 500 weight.
This font is 600 weight.
This font is 700 weight.
This font is 800 weight.
This font is 900 weight.
评论前必须登录！
注册