IT编程技术

天行健，君子以自强不息；地势坤，君子以厚德载物；

CSS第三节-CSS字体样式

2021-4-16 博主：Splendor CSS笔记

CSS字体样式
设置html中，字体的大小，外观，样式，颜色等属性

1，font-size 设置字体大小
例：p {font-size : 15px}
大小单位的说明：
相对长度单位 说明
em 相对当前对象内文本的字体尺寸
px 像素，最常使用，推荐首选
绝对长度单位 说明
in 英寸
cm 厘米
mm 毫米
pt 点

2，CSS中的Unicode字体，font-family设置
Unicode为了避免在CSS中使用 font 或 font-family 设置中文字体时乱码
例：div {fant-family: "\96B6\4E66"}    隶书字体     避免中文乱码
      div {fant-family: "宋体"}        宋本字体
      div {fant-family: SimSun}    宋本字体


3，font-weight:字体粗细
设置字体的粗细
例：div { font-weight:bold} //粗体
      div { font-weight:400}  //400 等同于 normal
值 描述
normal 默认值。定义标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
inherit 规定应该从父元素继承字体的粗细。

4，font-style字体样式
例：div { font-style:italic}   //字体斜体
值 描述
normal 默认值。浏览器显示一个标准的字体样式。
italic 浏览器会显示一个斜体的字体样式。
oblique 浏览器会显示一个倾斜的字体样式。
inherit 规定应该从父元素继承字体样式。
注：
 italic和oblique都是向右倾斜的文字, 但区别在于Italic是指斜体字，而Oblique是倾斜的文字，对于没有斜体的字体应该使用Oblique属性值来实现倾斜的文字效果.

5，font综合写法
上面说的都是font的分开写法，font的设置可以综和在一行书写
格式： div { font : font-style font-weight font-size/line-height font-family }
注：设置font属性时，格式的位置顺序是不能颠倒放置，没有的可以省略不写，但是必须要有font-size和font-family两个属性，各个属性用空格隔开
例：div { font : italic 400 16px SimSun,"微软雅黑"}

标签: CSS笔记

« CSS第四节-CSS外观属性样式 | CSS第二节-CSS选择器»