【CSS3】设置字体样式

字体样式

• 字体类型
• 字体大小
• 字体风格
• 字体粗细

属性	说明	示例
font	在一个声明中设置所有字体属性	font: italic bold 32px “宋体”;
font-family	设置字体类型	font-family: “隶书”;
font-size	设置字体大小	font-size: 32px;
font-style	设置字体风格	font-style: oblique;
font-weight	设置字体粗细	font-weight: bold;

  语法顺序 ：

{ font: font-style font-weight font-size font-family; } 
       （字体风格） （字体粗细）  （字体大小）（字体类型）

  CSS Code ：

{ font: italic bold 32px "宋体"; } // 属性合写

  ※font的属性合写时，必须按照上面的顺序，中间用空格隔开。
  ※其中不需要设置的属性可以省略，但必须保留font-size和font-family两个属性，否则font设置的字体样式将不起作用。

---

字体类型

  CSS Code ：

{ font-family: "宋体"; } // 声明一种字体类型
{ font-family: Verdana, "宋体"; } // 声明两种字体类型
{ font-family: Arial, "Times New Roman", "楷体"; } // 声明三种字体类型
※ 如果计算机中没有字体"Arial"，那么浏览器的英文字体会使用"Times New Roman"

  ※每种字体之间用英文状态的逗号隔开。
  ※英文字体在前，一般不加英文状态的双引号；中文字体在后，必须加英文状态的双引号。
  ※如果中文字体设置在英文字体之前，那么英文字体将不起作用。
  ※如果字体名称中包含空格等符号，则该字体必须加英文状态的双引号，使浏览器知道这是一种字体的名称。

---

字体大小

值	说明
px	像素

  CSS Code ：

{ font-size: 32px; } 

  在CSS中设置字体大小还有一些其它的单位，如in（英寸）、cm（厘米）、mm（毫米）、pt（点）、%（百分比），但是在实际的网页开发中，这些单位并不常用。

---

字体风格

值	说明
normal	标准风格
oblique	倾斜风格
italic	意大利体风格/斜体风格

  CSS Code ：

{ font-style: italic; } 

  font-style属性的默认值为normal，其余两个属性italic和oblique在页面中显示的效果非常相似。

---

字体粗细

值	说明
normal	标准字体
bold	粗体字体
bolder	更粗的字体
lighter	更细的字体
100、200、300、400、500、600、700、800、900	定义由细到粗的字体，400等同于normal，700等同于bold

  CSS Code ：

{ font-weight: bold; } 
{ font-weight: 700; } 

---

我寻见一片海 碧蓝且耀着光

大片船只航行其上 都向着远方

                         Shared by Foriver_江河

© 1997-8023 江河 All Rights Reserved.