项目总结-关于字体加粗问题

近期,在开发一个h5页面的时候遇到了这样一个关于文字加粗的问题,我设置了

 <p style=“font-weight :600;”>100万代金卷</p>	

结果在安卓手机上 100加粗了,‘万代金卷’却没有变化,ios手机上都是加粗的。why?
难道还存在兼容性问题?最后我设置成了

<p style=“font-weight :600;”>100万代金卷</p>	

设置成这样的情况下字体才加粗
所以就想着把font-weight总结一下,也希望能解答自己心中的疑惑。
首先我们先看一下font-weight都可以设置为哪些值
font-weight可以设置成 normal(默认值。定义标准的字符。)、bold 、bolder 、lighter这四个值
font-weight也可以设置成数字100、200、300、400、500、600、700、800、900
normal 对应 数字 400
bold 对应 数字 700
bolder和lighter没有对应的数字,为什么呢?因为它们俩是相对父元素而言的。
例如:如果父元素设置的是font-weight:200; 子元素我设置为font-weight:bolder; 那么你在浏览器上查看的时候你会发 现最后显示就变成了normal的效果。因为bolder是相对父级元素而言的。同理lighter也是如此。

最后来一个大总结
font-weight值:normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit

可用值 值的说明
normal 字体正常显示, 对应数字400。
bold 粗体 对应数字700
bolder 相对于父元素,比父元素更粗
lighter 相对于父元素,比父元素更淡
100 至少和200一样淡 Thin(细,淡)
200 至少和100一样粗,至少和300一样淡 Extra Light (Ultra Light)
300 至少和200一样粗,至少和400一样淡 Light
400 字体正常显示,相当于normal。 Regular (Normal、Book、Roman)
500 至少和400一样粗,至少和600一样淡 Medium(中等的,适中的)
600 至少和500一样粗,至少和700一样淡 Semi Bold (Demi Bold) - 半黑体
700 粗体,相当于bold。 Bold
800 至少和700一样粗,至少和800一样淡 Extra Bold (Ultra Bold)
900 至少和800一样粗 Black (Heavy)
inherit 从父元素继承字体的粗细

注意:IE7和更早的版本不支持"inherit"的值。IE8需要定义!DOCTYPE。IE9支持"inherit"。

发布了130 篇原创文章 · 获赞 103 · 访问量 26万+

猜你喜欢

转载自blog.csdn.net/xiaolinlife/article/details/95936608
今日推荐