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

Posted 2020-09-27

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粗，所以对于这个问题上的研究根本没意义，那么在开发时也就不需要注意这个问题了。