字体样式

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

属性

说明

示例

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-sizefont-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; }

我寻见一片海 碧蓝且耀着光
大片船只航行其上 都向着远方