Font Style Properties Set

Font style properties include font type, size, weight, style, and color.
If font-family is not defined, the browser will adopt a default font family, which is "SimSun".
::: normal-demo Font Style Demo

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #div1 {font-family: Arial;}
        #div2 {font-family: "Times New Roman";}
        #div3 {font-family: "Microsoft YaHei";}
    </style>
</head>
<body>
    <div id="div1">Arial</div>
    <div id="div2">Times New Roman</div>
    <div id="div3">Microsoft YaHei</div>
</body>
</html>

:::

font-size (font size)

::: normal-demo Font Size Demo

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            #p1 {font-size: 10px;}
            #p2 {font-size: 15px;}
            #p3 {font-size: 20px;}
        </style>
    </head>
    <body>
        <p id="p1">Font size is 10px</p>
        <p id="p2">Font size is 15px</p>
        <p id="p3">Font size is 20px</p>
    </body>
</html>

:::

font-weight (font weight)

::: normal-demo Font Weight Demo

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1 {font-weight: 100;}
        #p2 {font-weight: 400;}
        #p3 {font-weight: 700;}
        #p4 {font-weight: 900;}
    </style>
</head>
    <body>
        <p id="p1">Font weight is: 100 (lighter)</p>
        <p id="p2">Font weight is: 400 (normal)</p>
        <p id="p3">Font weight is: 700 (bold)</p>
        <p id="p4">Font weight is: 900 (bolder)</p>
    </body>
</html>

:::

font-style (font style)

::: normal-demo Font Style Demo

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            #p1{font-style:normal;}
            #p2{font-style:italic;}
            #p3{font-style:oblique;}
        </style>
    </head>
    <body>
        <p id="p1">Font style is normal</p>
        <p id="p2">Font style is italic</p>
        <p id="p3">Font style is oblique</p>
    </body>
</html>

:::

color (font color)

::: normal-demo Font Color Demo

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            #p1{color:gray;}
            #p2{color:orange;}
            #p3{color:red;}
        </style>
    </head>
    <body>
        <p id="p1">Font color is gray</p>
        <p id="p2">Font color is orange</p>
        <p id="p3">Font color is red</p>
    </body>
</html>

:::