浅谈CSS字重（font-weight）

马黑黑 · 发表于 2023-2-7 17:53

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 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 字体只影响英文和数字，它对中文无能为力，系统会使用另外一种字体渲染中文。