属性值	作用
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>