首页 > 代码库 > 为什么font-size推荐使用具体数值?

为什么font-size推荐使用具体数值?

1.font-size的单位

  font-size通常用的单位是px/em/rem,px就不说了,em/rem 主要用在移动端,原因的根据根元素大小进行适配,简而言之,em相对于父级定义基础字号,rem相对于根字号定义;

  另外比较常用的是%,%很好理解就是单纯的相对父级乘以对应的%就好了,还有一种是pt定义,1px = 0.75pt;

2.除了可以用单位来定义字体的大小意外可以通过具体的代码来定义;

  • xx-small     
  • x-small       
  • small         
  • medium       
  • large           
  • x-large        
  • xx-large 
  • smaller   按w3c上解释是比父级更小的尺寸,那么问题来了,这个“小”是指的多少,后来发现chrome和Firefox是不一样的 ,chrome大概是5/6;Firefox就不一定了。
  • larger     同理也是chrome还是5/6的比例,Firefox不定 

综上所述,所以在开发的时候尽可能的还是以具体的数值来定,尽量不要使用代码代替。

除此之外还有一个font-weight,的属性,可以用具体数字代替也可以使用相应的代码,font-weight 可以从100-900(注:只能是整百的数)400 等价于 normal   700 等价于bold

按照w3c的讲解是normal 定义标准字符 bold 定义粗体字符  bolder 定义更粗的字符 lighter定义更细的字符

很佩服w3c的语言组织能力,说的很巧妙,只说了更粗没有说粗多少,只说了更细没说细多少,在控制台打开也不能计算出对应的数值,还有一点就是浏览器的字体粗细定义是不同的,Firefox明显比chrome粗,所以对于这个问题上的研究根本没意义,那么在开发时也就不需要注意这个问题了。

 

为什么font-size推荐使用具体数值?