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

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

                         Shared by Foriver_江河



© 1997-2020 江河 All Rights Reserved.
发布了8 篇原创文章 · 获赞 0 · 访问量 183

猜你喜欢

转载自blog.csdn.net/qq_46365857/article/details/104564620