• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • font-weight

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

    示例

    font-weight: normal;
    Copy to Clipboard
    font-weight: bold;
    font-weight: lighter;
    font-weight: bolder;
    font-weight: 100;
    font-weight: 900;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    浏览器都支持font-weight
    任何版本的IE浏览器都不支持其font-variant属性的inherit

    语法:

    font-weight:normal| bold| bolder| lighter| integer

    设置或检索对象中的文本字体的粗细。

    作用由客户端系统安装的字体的特定字体变量映射决定。系统选择最近的匹配。也就是说,用户可能看不到不同值之间的差异。对应的脚本特性为fontWeight。

    取值:

    • normal:指定文本字体样式为正常的字体。相当于数字值400。
    • bold:加粗。与700等值。
    • lighter:比从父元素继承来的值更细(处在字体可行的粗细值范围内)。
    • bolder:比从父元素继承来的值更粗(处在字体可行的粗细值范围内)。
    • integer:一个介于 1 和 1000(包含)之间的类型值。更大的数值代表字体重量粗于更小的数值(或一样粗)。一些常用的数值对应于通用的字体重量名称,如章节常见粗细值名称和数值对应所描述。
    默认值normal
    适用于所有元素
    继承性
    动画性
    计算值数字重量值

    回退机制

    如果指定的权重值不可用,则使用以下规则来确定实际呈现的权重:

    • 如果指定的权重值在400500之间(包括400500):
      • 按升序查找指定值与500之间的可用权重;
      • 如果未找到匹配项,按降序查找小于指定值的可用权重;
      • 如果未找到匹配项,按升序查找大于500的可用权重。
    • 如果指定值小于400,按降序查找小于指定值的可用权重。如果未找到匹配项,按升序查找大于指定值的可用权重(先尽可能的小,再尽可能的大)。
    • 如果指定值大于500,按升序查找大于指定值的可用权重。如果未找到匹配项,按降序查找小于指定值的可用权重(先尽可能的大,再尽可能的小)。

    以上策略意味着,如果一个字体只有normalbold两种粗细值选择,指定粗细值为100-500时,实际渲染时将使用normal,指定粗细值为600-900时,实际渲染时将使用bold

    相对粗细值的解析

    当指定的是相对粗细值lighterbolder时,将使用如下图表来决定元素渲染时的绝对粗细值:

    继承值(Inherited value)bolderlighter
    100400100
    200400100
    300400100
    400700100
    500700100
    600900400
    700900400
    800900700
    900900700

    常见粗细值名称和数值对应

    100 到 900 之间的数值大致对应如下的常见粗细值名称:

    100
    Thin(Hairline)
    200
    Extra Light(Ultra Light)
    300
    Light
    400
    Normal
    500
    Medium
    600
    Semi Bold(Demi Bold)
    700
    Bold
    800
    Extra Bold(Ultra Bold)
    900
    Black(Heavy)

    插值规律

    font-weight数值采取离散式定义(使用 100 的整倍数)。数值为实数,非 100 的整数倍的值将被四舍五入转换为 100 的整倍数,遇到*50 时,将向上转换,如 150 将转换为 200 。

    实例

    //HTML
    <p>
      alice was beginning to get very tired of sitting by her sister on the
      bank, and of having nothing to do: once or twice she had peeped into the
      book her sister was reading, but it had no pictures or conversations in
      it, 'and what is the use of a book,' thought alice 'without pictures or
      conversations?'
    </p>
    
    <div>i'm heavy<br/>
      <span>i'm lighter</span>
    </div>
    
    //CSS
    
    /* set paragraph text to be bold. */
    p {
      font-weight: bold;
    }
    
    /* set div text to two steps darker than
       normal but less than a standard bold. */
    div {
     font-weight: 600;
    }
    
    /* sets text enclosed within span tag 
       to be one step lighter than the parent. */
    span {
      font-weight: lighter;
    }
    

    上篇:font-variant

    下篇:font-kerning