目录
一、字体的常用样式
1.字体：font-family
“font-family”属性值决定了该元素中的字体类型，在设置时直接写字体的名称即可。字体类型可以定义多个，浏览器在解析时会从前到后选择它所支持的第一种字体。如果设置的所有字体浏览器都不支持，则使用浏览器的默认字体。
2.字号：font-size
“font-size”属性规定字体的大小。
| 属性值 | 作用 |
|---|---|
| 20px | 使用像素值定义字体大小 |
| xx-small | 最小 |
| x-small | 较小 |
| small | 小 |
| medium | 正常，默认值 |
| large | 大 |
| x-large | 较大 |
| xx-large | 最大 |
| larger | 相对于父对象中字体尺寸进行相对增大 |
| smaller | 相对于父对象中字体尺寸进行相对减小 |
3.字体风格：font-style
“font-style”属性可以规定字体的偏斜程度。
| 属性值 | 作用 |
|---|---|
| normal | 正常字体，默认值 |
| italic | 斜体 |
| oblique | 偏斜体，斜体与正常字体的中间状态 |
4.加粗字体：font-weight
“font-weight”属性用来设置字体的粗细。
| 属性值 | 作用 |
|---|---|
| normal | 字体正常粗细，默认值 |
| bold | 粗体 |
| bolder | 特粗体 |
| lighter | 特细体 |
| 数值，如100 | 数值的范围是100~900，一般情况下都是整百数字 |
5.小写字母转大写字母：font-variant
“font-variant”属性值可以将小写的英文字母转为大写的英文字母。
| 属性值 | 作用 |
|---|---|
| normal | 正常显示，默认值 |
| small-caps | 将小写的英文字母转化为大写的英文字母且其字体大小与小写字母的大小相同 |
6.字体的复合属性：font
以上提到的字体属性都可以通过“font”属性一次设置完成。设置font时，按顺序依次为font-style、font-variant font-weight、font-size、font-family。其中，font-size和font-family的值是必须的，其他值缺少的话则会将其默认值插入。
7.示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h1 {
font-family: 宋体;
font-size: 32px;
font-style: normal;
font-weight: lighter;
font-variant: small-caps;
}
h2 {
font-family: 楷体;
font-size: xx-small;
font-style: italic;
font-weight: bold;
}
h3 {
font-family: 微软雅黑;
font-size: medium;
font-style: oblique;
font-weight: bolder;
}
p {
font: italic small-caps bold larger 仿宋;
}
</style>
</head>
<body>
<h1>宋体Ssong</h1>
<h2>楷体</h2>
<h3>微软雅黑</h3>
<p>仿宋FangSong</p>
</body>
</html>二、文本的常用样式
1.对齐方式：text-align
| 对齐方式 | text-align 属性值 | 效果 |
|---|---|---|
| 左对齐 | left | 把文本排列到最左边，默认值 |
| 右对齐 | right | 把文本排列到最右边 |
| 居中对齐 | center | 把文本排列到中间 |
| 两端对齐 | justify | 文本的每一行全部向页面两边对齐，字与字之间的间距取决于每一行字符的数目且相等 |
| 继承 | inherit | 继承父元素的 text-align 属性值 |
2.首行缩进：text-indent
"text-indent"属性规定段落的第一行的缩进距离。
3.文本线：text-decoration
| 属性值 | 作用 |
|---|---|
| normal | 默认值，标准的文本 |
| underline | 定义文本下方的一条线，下划线 |
| overline | 定义文本上方的一条线 |
| line-through | 定义文本中间的一条线，删除线 |
| blink | 定义闪烁的文本 |
| inherit | 继承父元素的 text-decoration 属性值 |
4.字距：letter-spacing
“letter-spacing”属性规定了字符之间的间距。
5.词距：word-spacing
“word-spacing”属性规定了英文单词之间的间距。
6.行高：line-height
“line-height”属性规定了文本的行高。
7.示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
text-align: center;
}
h1 {
text-align: left;
text-indent: 2em;
text-decoration: underline;
letter-spacing: 10px;
line-height: 108px;
background-color: red;
}
h2 {
text-align: center;
text-indent: 2em;
text-decoration: overline;
word-spacing: 10px;
line-height: 72px;
background-color: red;
}
h3 {
text-align: right;
text-indent: 2em;
text-decoration: line-through;
line-height: 36px;
background-color: red;
}
p {
text-align: justify;
text-indent: 2em;
letter-spacing: 2px;
word-spacing: 20px;
}
span {
text-align: inherit;
text-indent: 2em;
}
</style>
</head>
<body>
<div>
<h1>规划明确，“十四五”智能制造发展的重点任务是加快系统创新，增强融合发展新动能。深化推广应用，开拓转型升级新路径。加强自主供给，壮大产业体系新优势。夯实基础支撑，构筑智能制造新保障。</h1>
<h2>规划明确，“十四五”智能制造发展的重点任务是加快系统创新，增强融合发展新动能。深化推广应用，开拓转型升级新路径。加强自主供给，壮大产业体系新优势。夯实基础支撑，构筑智能制造新保障。</h2>
<h3>规划明确，“十四五”智能制造发展的重点任务是加快系统创新，增强融合发展新动能。深化推广应用，开拓转型升级新路径。加强自主供给，壮大产业体系新优势。夯实基础支撑，构筑智能制造新保障。</h3>
<p>The plan is clear that the key task of the development of intelligent manufacturing in the 14th Five-Year Plan is to accelerate system innovation and enhance the new driving force of integrated development. We will deepen application and explore new paths for transformation and upgrading. We will strengthen independent supply and develop new advantages in the industrial system. Tamp foundation support, build a new guarantee for intelligent manufacturing.</p>
<span>文本继承父元素的对齐方式-居中对齐</span>
</div>
</body>
</html>三、总结
字体样式的内容不多，使用的频率也比较低，所以记住一些比较常用的字体样式即可。
文中若有不当之处，欢迎各位朋友批评指正。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
