Front-End-HTML-Schriftarten und Textstile

Artikelverzeichnis

Front-End-HTML-Schriftarten und Textstile

Attribute	äußern	wichtiger Punkt
Schriftgröße	Schriftgröße	Die Einheit, die wir normalerweise verwenden, ist px Pixel, achten Sie darauf, mit der Einheit Schritt zu halten
Schriftfamilie	Schriftart	In der tatsächlichen Entwicklung werden Schriftarten gemäß Konventionen geschrieben
Schriftstärke	Schriftstärke	jDenken Sie daran, dass Fett 700 oder Fett bedeutet und nicht Fett Normal oder 400. Denken Sie daran, dass auf Zahlen keine Einheiten folgen dürfen.
Schriftstil	Schriftstil	Denken Sie daran, dass „Kippen“ kursiv ist und „Nicht-Kippen“ normal ist. Bei der Arbeit verwenden wir am häufigsten „Normal“.
Schriftart	Schriftligatur	1. Die Schriftarten werden nacheinander geschrieben und können nicht nach Belieben geändert werden. 2. Die mittelfristige Schriftgröße und Schriftart müssen gleichzeitig angezeigt werden.

1. Schriftstil

1.1 Schriftgröße

Name des Anwesens:font-size
Wert:数字+px
Googles Standard-Browser-Schriftgröße ist16px
Eingebettetes Zitat:

<!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 Schriftstärke

Name des Anwesens:font-weight
Wert: Schlüsselwort

Schlüsselwörter
normal	normal
Deutlich	deutlich

reine Zahlen	Ganze Prozentangaben von 100 bis 900
normal	400
Deutlich	700

Nicht alle Schriftarten bieten neun Strichstärken, daher gibt es auf einigen Werteseiten keine Änderungen.
In der tatsächlichen Entwicklung sind Normal und Fett die beiden am häufigsten verwendeten Werte.

<!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 Schriftstil (ob kursiv)

Name des Anwesens:font-style
Wert

normal	normal
Neigung	kursiv

<!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 Schriftart

Name des Anwesens:font-family
Zu den Schriftarten gehören „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 Stilkaskadierungsproblem

F: Wenn derselbe Stil für dasselbe Tag festgelegt ist, wie wird der Browser ihn dann rendern?
A: Wenn derselbe Stil für dasselbe Tag festgelegt ist, werden die Stile überlagert und abgedeckt, und der unten geschriebene wird wirksam.
Tipps: 1. CSS-Overlay-Stylesheet
2. Das sogenannte Overlay bedeutet, dass Stile einzeln überlagert werden können a>

Die Schriftfarbe des folgenden Codes wird überlagert. Die Schokoladenfarbe überdeckt schließlich das vorherige Blau und wird im Browser gerendert.

<!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 Eigenschaften der Schriftartzusammensetzung

Name des Anwesens:font
Wert:font: style weight size family
Hinweis: Wenn Kollegen separate und fortlaufende Stile festlegen müssen, schreiben Sie entweder den separaten Stil unter den fortlaufenden Stil oder den separaten Stil innerhalb des fortlaufenden Stils.

<!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>

Fügen Sie hier eine Bildbeschreibung ein

2. Textstil

Texteinzug	Texteinzug
horizontale Textausrichtung	Textausrichtung
Textdekoration	Textdekoration

2.1 Texteinzug

Name des Anwesens:text-indent
Wert
Zahl+px
Zahl+em (empfohlen: 1em=die Größe der Schriftgröße des aktuellen Etiketts)

<!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>

Fügen Sie hier eine Bildbeschreibung ein

2.2 Horizontale Textausrichtung

Name des Anwesens:text-align
Wert:

Attributwert	Wirkung
links	linksbündig
Center	Mittelausrichtung
Rechts	Rechts ausrichten

Hinweis: Wenn der Text horizontal zentriert sein soll, legen Sie das text-align-Attribut auf die Beschriftung fest, auf der sich der Text befindet (das übergeordnete Element des Texts).

<!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 kann Text, Bilder, Span-Tags, A-Tags, Eingabe-Tags, IMG-Tags usw. zentrieren .

Um das Bild zu zentrieren, fügen Sie das Attribut „center“ zu der Beschriftung hinzu, in der sich das Bild befindet.
Fügen Sie hier eine Bildbeschreibung ein

2.3 Textänderung

Name des Anwesens:text-decoration
Wert:

Attributname	Wirkung
unterstreichen	Unterstreichen (häufig verwendet
durchgestrichen	Durchgestrichen (wird nicht häufig verwendet
überstreichen	Überstreichen
keiner	Keine dekorativen Linien

Hinweis: Es wird in der Entwicklung verwendettext-decoration :none, um die Standardunterstreichung des a-Tags zu löschen

Das Folgende ist der Effekt der Verwendung der oben genannten vier Attributwerte für verschiedene Tags.
Fügen Sie hier eine Bildbeschreibung ein

<!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

Fügen Sie hier eine Bildbeschreibung ein

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

            line-height: 1.5;
        }
    </style>