CSS font-weight：字体浓淡
本帖最后由 马黑黑 于 2022-1-7 20:46 编辑 <br /><br /><style type="text/css">.sDiv { font-family:'微软雅黑',SimSun; }
.sDiv > p { font-size:20px; }
</style>
<div class="sDiv">
<p> 在CSS里，font-weight 用于对字体的粗细样式进行设置，语法如下：</p><p><br></p><p></p><p> font-weight: normal/bold/bolder/lighter/700;</p><p><br></p>
<p>其中，normal 是默认缺省值，即不做 font-weight 设定时字体的粗细样式是正常样式；bold 是粗体，bolder是更粗，试看 20px 大小的字体粗细比较：</p><p><br></p>
<p style="font-weight:bold;"> bold: 粗体</p>
<p style="font-weight:bolder;"> bolder：更粗</p><p style="font-weight:bolder;"></p>
<p style="font-weight:lighter;"> lighter：更细</p><p style="font-weight:lighter;"><br></p>
<p>但这些效果不一定有区别，因为这个跟字体的自身特性有关（下同），亦即，如果字体自身不设计更粗、更细，则bolder和lighter等同于bold和light，至于什么字体自身设定了这些，我也不清楚。以上默认用的是微软雅黑，接着是宋体。</p>
<p><br></p>
<p>font-weight 的值还有一个纯数字数值，该数值从 100 开始，最大是 900，700对应于 normal ，我们还是来看一下效果：</p>
<p style="font-weight:lighter;"><br></p><p style="font-weight:100;"> 100：Hello 一百</p>
<p style="font-weight:700;"> 700：Hello 七百</p>
<p style="font-weight:900;"> 900：Hello 九百</p>
<p><br></p><p>一般来说，字体的粗细（也称浓淡）设置需要了解所用字体的特性，如果不清楚，则用normal、bold即可，这两样所有字体都具备。</p>
</div> 当用纯数字表达字体浓淡的时候，如果该字体没有此数值的字样，则用他临近的那个 <p style="font-family:'微软雅黑';font-weight:900;font-size:20px;">微软雅黑 900 Hello</p>
<p style="font-family:'微软雅黑';font-weight:800;font-size:20px;">微软雅黑 800 Hello</p>
<p style="font-family:'微软雅黑';font-weight:700;font-size:20px;">微软雅黑 700 Hello</p>
<p style="font-family:'微软雅黑';font-weight:600;font-size:20px;">微软雅黑 600 Hello </p>
<p style="font-family:'微软雅黑';font-weight:500;font-size:20px;">微软雅黑 500 Hello </p>
<p style="font-family:'微软雅黑';font-weight:400;font-size:20px;">微软雅黑 400 Hello</p>
<p style="font-family:'微软雅黑';font-weight:300;font-size:20px;">微软雅黑 300 Hello </p>
<p style="font-family:'微软雅黑';font-weight:200;font-size:20px;">微软雅黑 200 Hello</p>
<p style="font-family:'微软雅黑';font-weight:100;font-size:20px;">微软雅黑 100 Hello</p>
页:
[1]