Skip to main content

文字粗细 font-weight

Docs

font-weight - CSS | MDN (mozilla.org)

font-weight 属性指定了字体的粗细程度。一些字体只提供 normal 和 bold 两种值。

  • font-weight 用于设置文字的粗细（重量）

  • 常见的取值：

    • 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900：每一个数字表示一个重量
    • normal：等于 400
    • bold：等于 700

  • strong、b、h1~h6 等标签的 font-weight 默认就是 bold

语法​

font-weight 属性使用下面列出的任意一个值指定。

值​

  • normal：正常粗细。与 400 等值。

  • bold：加粗。与 700 等值。

  • lighter：比从父元素继承来的值更细 (处在字体可行的粗细值范围内)。

  • bolder：比从父元素继承来的值更粗 (处在字体可行的粗细值范围内)。

  • <number>：一个介于 1 和 1000 (包含) 之间的 <number> 类型值。更大的数值代表字体重量粗于更小的数值 (或一样粗)。一些常用的数值对应于通用的字体重量名称如下表所示。

    数值粗细值名称
    100Thin (Hairline)
    200Extra Light (Ultra Light)
    300Light
    400Normal (Regular)
    500Medium
    600Semi Bold (Demi Bold)
    700Bold
    800Extra Bold (Ultra Bold)
    900Black (Heavy)
    950Extra Black (Ultra Black)

示例​

<div class="normal">
  <p>
    <span>秀甲天下，广西阳朔。</span>
    这里是 20 元人民币上的山水，是中国山水组合的天然画作。"桂林山水甲天下，阳朔山水甲桂林。"桂林山水的核心都在阳朔。要看山水，视野里全是；要逛古镇，这里有兴坪古镇、龙潭古村、朗梓古寨、福利古镇；要玩水，漓江、遇龙河、龙颈河上都有泛舟漂流。
  </p>
</div>
<div class="mod">
  <p>
    <span>秀甲天下，广西阳朔。</span>
    在十里画廊可以完全置身于世界顶级的喀斯特风光中，骑车走走停停。遇龙河上的富里桥距今已有
    500 余年历史，桥身造型美观，在水中倒影恰似一满月，立于桥上，能欣赏到绝佳的田园风光。青山环抱，绿水绕庄。遇龙河上的漂流是阳朔唯一的原始竹筏，且人工撑筏。全程近 9 个坎，有些小刺激。
  </p>
</div>
http://localhost:3000/font-weight.html

秀甲天下，广西阳朔。这里是 20 元人民币上的山水，是中国山水组合的天然画作。"桂林山水甲天下，阳朔山水甲桂林。"桂林山水的核心都在阳朔。要看山水，视野里全是；要逛古镇，这里有兴坪古镇、龙潭古村、朗梓古寨、福利古镇；要玩水，漓江、遇龙河、龙颈河上都有泛舟漂流。

秀甲天下，广西阳朔。在十里画廊可以完全置身于世界顶级的喀斯特风光中，骑车走走停停。遇龙河上的富里桥距今已有 500 余年历史，桥身造型美观，在水中倒影恰似一满月，立于桥上，能欣赏到绝佳的田园风光。青山环抱，绿水绕庄。遇龙河上的漂流是阳朔唯一的原始竹筏，且人工撑筏。全程近 9 个坎，有些小刺激。