Web速查-索引

Alt text

定义

font-weight 属性设置文本的粗细。

注意：该属性用于设置显示元素的文本中所用的字体加粗。数字值 400 相当于 关键字 normal，700 等价于 bold，数字只能取100到900间的整百。

语法

font-weight:normal|bold|bolder|lighter|100-900|inherit;

属性值

值 说明 （索引中有详细介绍）
normal 默认值。定义标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。
100、200、300、400、500、600、700、800、900 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
inherit 规定应该从父元素继承字体的粗细。

实例

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>鱼C-零基础入门学习Web（Html5+Css3）</title>

    <style type="text/css">

        .normal {font-weight: normal}

        .thick {font-weight: bold}

        .thicker {font-weight: 600}

    </style>

</head>

<body>

   <p class="normal">normal: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta dolor fugiat harum laborum molestiae quisquam repellendus sequi similique veniam. A cum eos esse fuga obcaecati quae repudiandae sapiente voluptatem voluptatibus.</p>

   <br>

   <p class="thick">bold: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos distinctio dolores ipsum magni nulla voluptates voluptatum. Adipisci deleniti doloremque eum excepturi laboriosam minus nobis, odio rerum tempore velit, vero voluptate.</p>

   <br>

   <p class="thicker">900: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam distinctio dolores eligendi id inventore iste itaque, magnam nesciunt nihil nulla optio placeat quae quis sequi tempora tenetur ullam, veritatis, voluptas?</p>

</body>

</html>

normal: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta dolor fugiat harum laborum molestiae quisquam repellendus sequi similique veniam. A cum eos esse fuga obcaecati quae repudiandae sapiente voluptatem voluptatibus.


bold: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos distinctio dolores ipsum magni nulla voluptates voluptatum. Adipisci deleniti doloremque eum excepturi laboriosam minus nobis, odio rerum tempore velit, vero voluptate.


900: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam distinctio dolores eligendi id inventore iste itaque, magnam nesciunt nihil nulla optio placeat quae quis sequi tempora tenetur ullam, veritatis, voluptas?

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

Safari Chrome FireFox IE
1.0 1.0 1.0 3.0