HTML5基础加强css样式篇（font-family，font-size， font-style，font-variant， font-weight ， font 简写属性 ）（五）

简介：

  font-family 设置字体系列。

  font-size 设置字体的尺寸。

  font-style 设置字体风格。

  font-variant 以小型大写字体或者正常字体显示文本。

  font-weight 设置字体的粗细。

  font 简写属性。

 

1.font-family 设置字体系列：

 

 

  2.font-size 设置字体的尺寸。

 ①设置字体大小

 ②可选值：

 • 默认值：medium。一般浏览器默认是16px

 •smaller 把 font-size 设置为比父元素更小的尺寸。

 •larger 把 font-size 设置为比父元素更大的尺寸。

 • length 把 font-size 设置为一个固定的值。

 •% 把 font-size 设置为基于父元素的一个百分比值。

 • inherit 规定应该从父元素继承字体尺寸。

 注意：font-size 会影响 line-height 属性 进而影响一行中基线的 位置。

应用如图：

 

 

 3. font-style 设置字体风格。

①字体样式

②可选值：

 normal 默认值。浏览器显示一个标准的字体样式。

 italic 浏览器会显示一个斜体的字体样式。

 oblique 浏览器会显示一个倾斜的字体样式。

 inherit 规定应该从父元素继承字体样式。

注：

italic和oblique都是向右倾斜的文字,。

区别在于Italic是指斜体字，而Oblique是倾斜的文字，对于没有斜体的字体应该使用 Oblique属性值来实现倾斜的文字效果 .

 

 

4.font-variant 以小型大写字体或者正常字体显示文本。

①小型大写字母字体

②可选值：

•normal 默认值。浏览器会显示一个标准的字体。

•small-caps 浏览器会显示小型大写字母的字体。

•inherit 规定应该从父元素继承 font-variant 属性的值。

 

5.font-weight 设置字体的粗细。

①字体的粗细

②可选值：

•normal 默认值。定义标准的字符。

•bold 定义粗体字符。

•bolder 定义更粗的字符。

•lighter 定义更细的字符。

•100 ~900 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。

• inherit 规定应该从父元素继承字体的粗细。

 

实际开发中，我们推荐使用关键字方式。因为700 和 900的粗细根本看不出区别

 

6.  font 简写属性。

   

           /*font: bold 36px "Microsoft YaHei UI";*/

            /*font:  bold 36px   "Microsoft YaHei UI";*/

            font:  bold 36px/200px  "Microsoft YaHei UI";