CSS基础知识点--CSS字体样式(font)

文字样式属性

文字样式 英文
字体 font-family
文字大小 font-size
文字颜色 color
文字粗细 font-weight
文字样式 font-style

font-family字体属性

font-family属性值:具体字体名,字体集

字体集:

  • Serif

  • Sans-serif

  • Monospace

  • Cursive

  • Fantasy

font-size文字大小

font-size: 绝对单位 | 相对单位

绝对单位

属性值 说明
in Inch,英寸 1英寸=2.54厘米
cm 厘米 1厘米=0.394英寸
mm 毫米 1毫米=0.1厘米
pt 磅,印刷的点数 72磅=1英寸
pc Pica,1pc=12pt
属性值 CSS2缩放系数1.2
xx-small 9px
x-small 11px
small 13px
medium(浏览器默认大小) 16px
large 19px
x-large 23px
xx-large 28px

绝对大小,不能随浏览器分辨率或父元素大小的改变而改变

相对单位

  • px 像素

  • em / %

移动端一般不用px

color文字颜色

定义元素内文字颜色

语法:

color:颜色名 | 十六进制 | RGB

font-weight文字粗细

为元素内文字设置粗细

语法:

font-weight: normal | bold | bolder | lighter | 100~900

说明:

默认值:normal

400等同于normal,而700等同于bold

font-style文字样式

为元素内文字设置样式

语法:

font-style: normal | italic | oblique

font-variant字体变形

设置元素中文本为小型大写字母

语法:

font-variant:normal | small-caps

font属性简写

语法:

font:font-style font-variant font-weight font-size/line-height font-family

说明:

  • 值之间空格隔开

  • 注意书写顺序

  • 如果font-family有多个值,用逗号分隔开

注意:

  1. 同时设置font-size和font-family,属性才起作用

  2. 前三者顺序是任意的

  3. 后两者顺序是font-size在前,font-family在后

  4. 如果有前面三者任意一种存在,必须在font-size和font-family前面

你可能感兴趣的:(CSS基础知识点--CSS字体样式(font))