Front-end HTML fonts and text styles

Article directory

Front-end HTML fonts and text styles

Attributes	express	important point
font-size	Font size	The unit we usually use is px pixels, be sure to keep up with the unit
font-family	font	In actual development, fonts are written according to conventions
font-weight	Font weight	jRemember that bold means 700 or bold, and non-bold means normal or 400. Remember that numbers should not be followed by units.
font-style	Font style	Remember that tilting is italic, and not tilting is normal. We use normal most often in work.
font	font ligature	1. The fonts are written sequentially and cannot be changed at will. 2. The mid-term font size and font must appear at the same time.

1. Font style

1.1 Font size

Property name:font-size
Value:数字+px
Google's default browser font size is16px
Embedded quote:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
      
      
            font-size:30px 
        }
    </style>
</head>
<body>
    <p>段落文字</p>
</body>
</html>

1.2 Font weight

Property name:font-weight
Value: keyword

Keywords
normal	normal
Bold	bold

pure numbers	Whole percentages from 100 to 900
normal	400
Bold	700

Not all fonts provide nine weights, so there are no changes in some values pages.
In actual development, normal and bold are the two most commonly used values.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 400正常，700加粗 */
        div{
      
      
            font-weight: 700;
        }
    </style>
</head>
<body>
    <div>这是div</div>
</body>
</html>

1.3 Font style (whether it is italic)

Property name:font-style
value

normal	normal
tilt	italic

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
      
      
        font-style: italic
    }
    </style>
<body>
    <p>这是倾斜的文字</p>
</body>
</html>

1.4 Font type

Property name:font-family
Fonts include "Microsoft YaHei", Microsoft YaHei, Hei...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
      
      
            /* sans-serif */
            /* 如果用户电脑没有安装微软雅黑，就按照黑体显示文字 */
            /* 如果用户电脑没有安装黑体，就按任一一种非衬线字体系列显示 */
            font-family: YaHei,黑体,sans-serif;
        }
    </style>
</head>
<body>
    <div>我想变字体</div>
</body>
</html>

1.5 Style cascading problem

Q: If the same style is set for the same tag, how will the browser render it?
A: If the same style is set for the same tag, the styles will be overlaid and covered, and the one written at the bottom will take effect.
Tips: 1. CSS overlay style sheet
2. The so-called overlay means that styles can be overlaid one by one a>

The font color of the code below is overlaid. The chocolate color finally covers the previous blue and is rendered in the browser.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
      
      
            color: blue;
            color: chocolate;
        }
    </style>
</head>
<body>
    <p>层叠</p>
</body>
</html>

1.6 Font composite properties

Property name:font
Value:font: style weight size family
Note: If you need colleagues to set separate and continuous styles, either write the separate style under the continuous style, or write the separate style inside the continuous style.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
      
      
            /* font:style weight size 字体; */
            font: italic 700 30px 宋体;
        }
    </style>
</head>
<body>
    <p>这是好的好的吧</p>
</body>
</html>

Insert image description here

2. Text style

text indent	text-indent
text horizontal alignment	text-align
Text decoration	text-decoration

2.1 Text indentation

Property name:text-indent
Value
Number+px
Number+em (recommended: 1em=the size of the font-size of the current label)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
      
      
            /* 浏览器默认字号：16px */
            /* 首行缩进2个字体   32px */
            text-indent: 32px;
        }
    </style>
</head>
<body>
    <p>hbdiwkj不丢五千七百都比我高的杠八岁的u阿凡达给挂u给iegd成功后请务必hbdiwkj不丢五千七百都比我高的杠八岁的u阿凡达给挂u给iegd成功后请务必hbdiwkj不丢五千七百都比我高的杠八岁的u阿凡达给挂u给iegd成功后请务必hbdiwkj不丢五千七百都比我高的杠八岁的u阿凡达给挂u给iegd成功后请务必hbdiwkj不丢五千七百都比我高的杠八岁的u阿凡达给挂u给iegd成功后请务必hbdiwkj不丢五千七百都比我高的杠八岁的u阿凡达给挂u给iegd成功后请务必</p>
</body>
</html>

Insert image description here

2.2 Text horizontal alignment

Property name:text-align
Value:

attribute value	Effect
left	left aligned
center	center alignment
right	Align right

Note: If you need the text to be centered horizontally, set the text-align attribute to the label where the text is located (the parent element of the text).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
      
      
            /* text-align: left; */
            /* text-align: right; */
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>新闻标题</h1>
</body>
</html>

text-align:center can center text, pictures, span tags, a tags, input tags, img tags, etc. .

To center the picture, add the center attribute to whichever label the picture is in.
Insert image description here

2.3 Text modification

Property name:text-decoration
Value:

attribute name	Effect
underline	Underline (commonly used
line-throgh	Strikethrough (not commonly used
overline	Overline
none	No decorative lines

Note: It will be used in developmenttext-decoration :none to clear the default underline of the a tag

The following is the effect of using the above four attribute values for different tags.
Insert image description here

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
      
      
            text-decoration: underline;
        }
        p{
      
      
            text-decoration: line-through;
        }
        h2{
      
      
            text-decoration: overline;
        }
        a{
      
      
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div>div</div>
    <p>pppp</p>
    <h2>h2</h2>
    <a href="#">我是一个超链接</a>
</body>
</html>

3. Yukidaka

Insert image description here

    <style>
        p{
      
      
            /* font-size: 40px; */
            /* line-height: 60px; */

            line-height: 1.5;
        }
    </style>