跳到正文

字重

Font Weight

初级通用

字重(Font Weight)表示同一字体中文字笔画的粗细程度,常用来区分标题、正文和需要强调的信息。它帮你建立阅读层级:比如让后台表格的列标题比数据内容更醒目,而不必把字号一起放大。

你可能会说:「帮我把页面标题和关键信息做得更醒目,但别把所有文字都放大。」

动手看看

最近订单查看本周新收到的订单
订单编号
客户
金额
状态
#A1038
林小姐
¥268.00
待发货
#A1037
陈先生
¥129.00
已发货
#A1036
周小姐
¥486.00
已完成

拖动「列标题字重」,对比表头和订单数据的笔画粗细;也可以悬停订单行。两者字号始终都是 13px,变化的只有表头字重。

要点

  1. 1

    它改变笔画粗细而非字号

    同样大小的文字,笔画更粗时通常更容易先被看到。比如设置页里,你可以让分组标题比说明文字稍重,让用户扫一眼就找到要改的那组内容。

  2. 2

    数值要结合实际字体来看

    写 CSS 时,你会见到 400、500、700 这样的字重数值。但不是每款字体都有对应粗细,浏览器可能选用最接近的版本或模拟加粗,所以最好在实际页面检查效果。

  3. 3

    少量层级比处处加粗有效

    如果卡片标题、字段名、说明和按钮全都很粗,用户反而难判断先看哪里。我们通常先给正文一个稳定字重,再把较重的字重留给标题或真正需要强调的数据。

容易混淆的地方

字重说的是笔画粗细,字号说的是文字大小;两者都能让文字显眼,但改变字号还会影响占位和换行。字重也不等于对比度:浅灰文字即使加粗,仍可能难读。如果问题是文字与背景分不清,你更该检查颜色对比,而不是只调字重。

什么时候用

适合用

  • 做网站首页时,用不同字重区分主标题、段落和辅助信息,让访客知道先读什么。
  • 做后台表格时,让列标题或关键数值比普通单元格稍重,方便用户快速扫描。
  • 让 AI Agent 实现设计稿时,明确标题、正文和按钮各用什么字重,减少它自行猜测。

不适合用

  • 正文因为颜色太浅而难读时,先调整文字与背景的对比度;单纯加粗解决不了根本问题。
  • 一段说明文字因为行距太挤而难读时,优先调整行高;字重不能替文字腾出行间空间。
  • 某些汉字显示成不一致的字体时,先检查字体选择与回退;调整字重无法补齐缺失字形。

练一练

你在做订单后台:表格里的金额需要方便扫读,但整张表的字号已经合适。你会怎么向 AI Agent 描述修改?

让 AI 帮你做

请调整订单表格的文字层级:保持现有字号和行高,普通单元格沿用正文字重,金额列使用稍重的字重。先确认项目所用字体支持哪些字重,再在实际页面检查效果,避免整张表都变粗。

接下来学什么