font字体相关样式


1.字体颜色 color

2.字体大小 fofnt-size

相关单位 em rem

  1em等于1个font-size(当前元素的font-size)
  1rem等于1个根元素的font-size(适合英文布局)
  好处在于可以根据字体大小来改变

3.行高line-height

  • 文本在网页中都需要创建一个文本框,行高就是文本框的高度。
  • 使用line-height来设置行高,文字默认在行高中居中。
  • 行高可以指定一个像素值,也可以指定一个整数,指定一个数字的话,行高就是字体的倍数,行内元素背景色是行高1.33倍。
  • 可以通过行高来设置行间距:行间距=行高-字体大小。
  • 文字在行内垂直居中,可以将行高设置为和父元素高度一样(一行字,总体偏下)。

4.字体族:

font-family

使用font-family来设置字体族,常用:

      serif(衬线字体,带勾)

      sans-serif(非衬线字体)

      使用多个字体用",“隔开,有的字体有空格的话需要加引号。类似"Gill Sans”

font-face

      通过font-face可以让用户使用服务器的字体。
  要注意版权问题。

font-weight   字重

font-style   字体样式,斜体…

font-variant  字体变形

5.font简写

      通过font可以同时设置所有字体相关样式
选择器

(font: font-style font-weight font-size/line-height font-family;)

      font-size和font-family必须要有属性,否则font属性不起作用,必须按上面格式写,不能换顺序,属性间用空格隔开。




学习前端从入门到入土,我还在路上,您的每一次浏览等等微小的操作,都是对我学习路上最大的鼓励,一起努力吧!

有问题欢迎留言。

猜你喜欢

转载自blog.csdn.net/weixin_46383761/article/details/110789253