How to change font weight in css-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

How to change font weight in css

醉折花枝作酒筹

Jul 26, 2021 pm 03:00 PM

css

In CSS, you can use the font-weight attribute to change the font thickness. You only need to set "font-weight: value;" to the font element. This property is used to set the font bold used in the text of the display element. The numeric value 400 is equivalent to the keyword normal, and 700 is equivalent to bold.

How to change font weight in css

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

In HTML, set the thickness of the text by adding the tag or the tag.

CSS can carefully divide the thickness of the text, and can also change the bold text into a normal thickness display.

<html>
  <head>
    <title>文字粗细</title>
    <style>
      h1 span {
        font-weight: lighter;
      }
      span {
        font-size: 30px;
      }
      span.one {
        font-weight: 100;
      }
      span.two {
        font-weight: 200;
      }
      span.three {
        font-weight: 300;
      }
      span.four {
        font-weight: 400;
      }
      span.five {
        font-weight: 500;
      }
      span.sex {
        font-weight: 600;
      }
      span.seven {
        font-weight: 700;
      }
      span.eight {
        font-weight: 800;
      }
      span.nine {
        font-weight: 900;
      }
      span.ten {
        font-weight: bold;
      }
      span.eleven {
        font-weight: normal;
      }
    </style>
  </head>

  <body>
    <h1 id="文字-span-粗-span-体">文字<span>粗</span>体</h1>
    <span class="one">文字粗细：100</span>
    <span class="two">文字粗细：200</span>
    <span class="three">文字粗细：300</span>
    <span class="four">文字粗细：400</span>
    <span class="five">文字粗细：500</span>
    <span class="six">文字粗细：600</span>
    <span class="seven">文字粗细：700</span>
    <span class="eight">文字粗细：800</span>
    <span class="nine">文字粗细：900</span>
    <span class="ten">文字粗细：bold</span>
    <span class="eleven">文字粗细：normal</span>
  </body>
</html>

The thickness of the text is set in CSS through the attribute: font-weight. The above code covers almost all text thickness values, and the font itself can be bold and become normal bold.

Recommended learning: css video tutorial

The above is the detailed content of How to change font weight in css. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn