浅谈CSS字重（font-weight）
本帖最后由 马黑黑 于 2023-2-7 18:01 编辑CSS 的 font-weight 属性用来定义文本的粗细，大家通常都会这么用：
font-weight: normal;
或者：
font-weight: bold;
其中，normal 是默认值，正常之意，bold 是粗体的意思。
除了 normal 和 bold ，还有 lighter和 bolder，前者指更细之意，后者指更粗之意。值得注意的是，并非所有字体设置为 lighter 或 bolder都有效，也就是说，有些字体可能没有 lighter 或 bolder 级别的字重。
字重还可以用数字表示，理论上共分为九个级别，最低 100，最高900，其中，100 对应 细体（lighter），400对应正常体（normal），700对应粗体（bold），900对应超粗体（bolder）。这是理论划分，具体情况要依据字体的设计而定，很多字体并没有那么多字重级别，绝大多数只有 400 和 700 这两个级别的字重设计。
如果使用数字表达字重，请参考如下方式：
font-weight: 400;
当使用超出了该字体的粗细范围的数值，浏览器会使用最邻近的字重，也有可能使用默认值。
font-weight 属性的设定，也可以集成在简写属性 font 中，试看如下表示方法：
font: bold 24px / 28px '宋体', serif;
或者：
font: 700 24px / 28px '宋体', serif;
其中，红色部分就是 font-weight 属性值，24px 是文本大小（font-size属性）值，28px 是行高（line-height属性）值，剩下的是字体（font-family）设定。
下一楼将给出一组示范，字体大小设为 4em，字重依次设置为：
第一行 lighter
第二行 normal
第三行 bold
第四行 900
可点击其下的字体按钮选择不同的字体，观察不同字体的表现。请注意，由于是中英混排，Arial 字体只影响英文和数字，它对中文无能为力，系统会使用另外一种字体渲染中文。
<style>
#mybox { font-size: 4em;}
#box > p { margin: 4px 0; padding: 0;}
.normal { font-weight: normal; }
.lighter { font-weight: lighter; }
.bold { font-weight: bold;}
.bolder { font-weight: 900; }
.btns { width: 120px; margin: 2px; cursor: pointer; }
</style>
<div id="mybox">
<p class="lighter">花潮论坛 ABCDEF 123456</p>
<p class="normal">花潮论坛 ABCDEF 123456</p>
<p class="bold">花潮论坛 ABCDEF 123456</p>
<p class="bolder">花潮论坛 ABCDEF 123456</p>
</div>
<button class="btns" value="Microsoft YaHei">微软雅黑</button>
<button class="btns" value="Arial">Arial</button>
<button class="btns" value="NSimSun">新宋体</button>
<button class="btns" value="SimHei">黑体</button>
<button class="btns" value="FangSong">仿宋</button>
<script>
let btns = document.querySelectorAll('.btns');
[...btns].forEach( (item) => {
item.onclick = () => {
mybox.style.fontFamily = item.value;
};
});
</script>
欣赏黑黑的精彩分享 小辣椒 发表于 2023-2-7 17:58
#mybox { font-size: 3em;}
#box > p { margin: 4px 0; padding: 0;}
.normal { font-weight: norma ...
你这帖影响了二楼的演示{:4_170:} 马黑黑 发表于 2023-2-7 18:04
你这帖影响了二楼的演示
我发现了，我改了3号字{:4_196:} 改回来了{:4_189:} 小辣椒 发表于 2023-2-7 18:06
改回来了
谢谢 小辣椒 发表于 2023-2-7 18:05
我发现了，我改了3号字
其实没用的，因为相同一组代码在同一页里，前面的就失效了 马黑黑 发表于 2023-2-7 18:09
其实没用的，因为相同一组代码在同一页里，前面的就失效了
好像是的，我建了个测试帖，就是不能2个帖同时测试 小辣椒 发表于 2023-2-7 18:25
好像是的，我建了个测试帖，就是不能2个帖同时测试
看代码和html的id 这个能直接看到字体大小，还能看到各种字体的效果，太棒了{:4_199:} 一个个点了看了一下，很喜欢仿宋字体。 红影 发表于 2023-2-7 21:43
一个个点了看了一下，很喜欢仿宋字体。
仿宋属于 serif 家族，有修饰。它清秀而华丽，是宋的文化写真。 红影 发表于 2023-2-7 21:43
这个能直接看到字体大小，还能看到各种字体的效果，太棒了
主要是了解一下字重 有了您的提出，大家少走多少弯路。 庶民 发表于 2023-2-8 04:41
有了您的提出，大家少走多少弯路。
{:4_191:} 马黑黑 发表于 2023-2-7 21:54
仿宋属于 serif 家族，有修饰。它清秀而华丽，是宋的文化写真。
这样对比这看特别有感觉{:4_204:} 马黑黑 发表于 2023-2-7 21:55
主要是了解一下字重
嗯嗯，现在知道了，100 400 700 900是常用的，400对应正常体。我重复一遍，加深记忆{:4_173:} 红影 发表于 2023-2-8 15:17
嗯嗯，现在知道了，100 400 700 900是常用的，400对应正常体。我重复一遍，加深记忆
不过我们常用到的就是 normal 和 bold 红影 发表于 2023-2-8 15:16
这样对比这看特别有感觉
是的吧