Home > Web Front-end > CSS Tutorial > How to change font weight in css

How to change font weight in css

醉折花枝作酒筹
Release: 2023-01-07 11:45:43
Original
6250 people have browsed it

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>文字<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>
Copy after login

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!

Related labels:
css
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template