How to set the font for HTML pages Chinese

Font properties Introduction

CSSThe font attribute is doing it? Fonts and font sure about the strategy, is to set the HTMLpage Chinese version of the font,
CSSthe font attributes There are several commonly used it, I give you the next comb, a total of more common 5species, today we look at this 5kind of text to give font bring any results so far.
CSS Font attribute defines the text font family, size, bold, style (such as italics).
In CSSfive species commonly used font attributes, such font-styleas: font-weight, font-size, font-family, font, .

provided italic font-style

font-styleThe main attribute is used to set the text in italics.

font-style attribute Table

value	description
normal	The italic font back to normal.
italic	Set the font to italic.

Let us enter font-stylethe property practice, practice content such as: the HTMLpage ptext font tag set in italics.
If we do not use the font-styleproperty, can not be p tag text font to italic it? If we learn HTMLalso, should know that there is one among HTML itags iThe tag is the text's font to italic, built-in functions.
A little long-winded, huh, oh beginners popularity at the details.
Block

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>设置字体为斜体</title>
</head>
<body>
    <p>成功不是打败别人，而是改变自己。</p>
    <p><i>成功不是打败别人，而是改变自己。</i></p>
</body>
</html>

Results Figure

Note: Use font-styleproperty can be ithe label comes to function italics removed, such as: Oh below critical code.

    <style>
        i{
            font-style: normal;
        }
    </style>

Use font-styleproperty of the text is italic font.
Block

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>设置字体为斜体</title>
</head>
    <style>
        p{
            font-style: italic;
        }
    </style>
<body>
   <p>成功不是打败别人，而是改变自己。</p>
</body>

</html>

Results Figure

font-weight font weight set

font-weightProperty is used to set the text font weight.

font-weight property description table

Property Value	description
normal	The thickness of the restoration of normal text.
bold	Bold font.
100-900	Bold font

Let us enter the font-weightproperty practice, the contents of the HTML page plabel text font bold, I use the classattribute value .boxto the first plabel text font is bold 900, why does the classproperty value .boxit, easy for beginners to understand, the rest are Like, it does not show too much.
Block

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>设置字体粗细</title>
</head>
    <style>
        .box{
            font-weight:900;
        }
    </style>
<body>
   <p class="box">成功不是打败别人，而是改变自己。</p>
    <p>成功不是打败别人，而是改变自己。</p>
</body>

</html>

Results Figure

font-size to set the font size

font-sizeProperty is to set the font size of text, because the font-sizeproperty value is relatively simple, do not font-sizeattribute table explains the description, font-sizeproperty value pxfor the units.
Let us enter font-sizethe property practice, practice content such as: the HTMLpage plabel text font size is set to 14pixels.
Block

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>设置字体大小</title>
</head>
    <style>
        p{
            font-size: 14px;
        }
    </style>
<body>
   
    <p>成功不是打败别人，而是改变自己。</p>
</body>

</html>

Results Figure

font-family font settings

font-familySet the font style attributes to text, such as: Microsoft elegant black, italics, Times New Roman ....
Friends of the Park have seen here, I believe we have a certain amount of self-learning ability, and will not introduce, directly on the key code, you can try to own a variety of fonts and Kazakhstan.
Block

font-family: "微软雅黑";

Note: font-familyattribute may be used such as a plurality of:font-family: "微软雅黑","宋体",....;
Details: General very special font, the site above are using images to represent. Whether this font is displayed according to the user's computer which corresponds font file, if the file will not be displayed as Times New Roman.

Abbreviations font font settings

Acronym property can be simultaneously set in italics, bold, size, font to the text, to use a comma between each value and must be sequentially.
Let us enter the fontfont settings abbreviation practice, practice content such as: the plabel Chinese text to italic, bold, size, font.
Block

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>字体设置的缩写</title>
</head>
    <style>
        p{
           font: italic 900 14px "微软雅黑";
        }
    </style>
<body>
   
    <p>成功不是打败别人，而是改变自己。</p>
</body>

</html>

Results Figure

How to set the font for HTML pages Chinese

Font properties Introduction

provided italic font-style

font-style attribute Table

font-weight font weight set

font-weight property description table

font-size to set the font size

font-family font settings

Abbreviations font font settings

Guess you like