Inhaltsverzeichnis
Grammatik
Wert
Beispiel
Fazit
Heim Web-Frontend CSS-Tutorial Welche Eigenschaft wird als Abkürzung für die Angabe vieler anderer Schriftarteigenschaften in CSS verwendet?

Welche Eigenschaft wird als Abkürzung für die Angabe vieler anderer Schriftarteigenschaften in CSS verwendet?

Sep 15, 2023 am 11:25 AM

哪个属性用作简写来指定 CSS 中的许多其他字体属性?

Entwickler können die Schriftarten von Webseiten mithilfe verschiedener CSS-Eigenschaften anpassen. Beispielsweise wird die Eigenschaft „font-size“ verwendet, um die Schriftgröße anzugeben, und die CSS-Eigenschaft „font-weight“ wird verwendet, um die Schriftstärke des Textes anzugeben. Darüber hinaus können wir viele andere CSS-Eigenschaften verwenden, um die Schriftart anzupassen.

Die CSS-Eigenschaft „font“ kann als Abkürzung für alle Eigenschaften verwendet werden, um die Schriftart anzupassen.

Grammatik

Benutzer können die Kurzform-CSS-Eigenschaft „font“ verwenden, um die Schriftart einer Webseite gemäß der folgenden Syntax anzupassen.

1

font: font-style font-weight font-size/line-height font-family;

Nach dem Login kopieren

Wert

  • Schriftstil – Geben Sie den Schriftstil an, z. B. Kursivschrift, Unterstreichung usw.

  • font-weight – Geben Sie die Schriftstärke an. Es kann die Form Fett, Normal, Zahlen usw. annehmen.

  • font-size – wird verwendet, um die Schriftgröße anzugeben.

  • line-height – Gibt die Zeilenhöhe des Textes an.

  • font-family – Gibt die Schriftfamilie an.

Beispiel

Im folgenden Beispiel enthält das HTML-Element <p> Text, den wir mithilfe verschiedener CSS-Eigenschaften angepasst haben. Wir verwenden die CSS-Eigenschaft „font-size“, um die Schriftgröße anzugeben, die CSS-Eigenschaft „font-weight“, um die Schriftstärke anzugeben, „font-family“, um den Schriftarttyp anzugeben, und „font-style“, um die anzugeben Schriftgröße. Gibt den Schriftstil an und das Attribut „line-height“ gibt die Zeilenhöhe des Textes an.

In der Ausgabe können Benutzer angepasste Schriftarten beobachten.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

&lt;html&gt;

&lt;head&gt;

   &lt;style&gt;

      .text {

         font-size: 13px;

         font-weight: bold;

         font-family: Arial;

         font-style: italic;

         line-height: 3.6;

         width: 100px;

      }

   &lt;/style&gt;

&lt;/head&gt;

&lt;body&gt;

   &lt;h3&gt; Using the different &lt;i&gt; font properties &lt;/i&gt; to customize the fonts in CSS &lt;/h3&gt;

   &lt;p class = "text"&gt;

      This font is customized with various CSS properties.

   &lt;/p&gt;

&lt;/body&gt;

&lt;/html&gt;

Nach dem Login kopieren

Beispiel

Im folgenden Beispiel verwenden wir eine einzige CSS-Eigenschaft „Schriftart“, um die Schriftart anzupassen, anstatt wie im obigen Beispiel fünf verschiedene Eigenschaften zu verwenden.

In der Ausgabe kann der Benutzer beobachten, dass der Schriftart derselbe Stil wie im ersten Beispiel verliehen wird.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

&lt;html&gt;

&lt;head&gt;

   &lt;style&gt;

      .text {

         font: italic 800 1.2rem/2.5 Arial;

         width: 100px;

      }

   &lt;/style&gt;

&lt;/head&gt;

&lt;body&gt;

   &lt;h2&gt; Using the font CSS property to customize the fonts in CSS &lt;/h2&gt;

   &lt;p class = "text"&gt;

      This font is customized with the CSS 'font' property.

   &lt;/p&gt;

&lt;/body&gt;

&lt;/html&gt;

Nach dem Login kopieren

Fazit

Benutzer haben gelernt, die verkürzte CSS-Eigenschaft „font“ zu verwenden, anstatt die Anzahl der CSS-Eigenschaften zum Anpassen von Schriftarten zu verwenden. Darüber hinaus empfiehlt es sich, Kurzform-CSS-Eigenschaften zu verwenden, um die Lesbarkeit zu verbessern und die Codekomplexität zu verringern.

Das obige ist der detaillierte Inhalt vonWelche Eigenschaft wird als Abkürzung für die Angabe vieler anderer Schriftarteigenschaften in CSS verwendet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Hinzufügen von Kastenschatten zu WordPress -Blöcken und -Elementen Hinzufügen von Kastenschatten zu WordPress -Blöcken und -Elementen Mar 09, 2025 pm 12:53 PM

Hinzufügen von Kastenschatten zu WordPress -Blöcken und -Elementen

Erstellen Sie ein JavaScript -Kontaktformular mit dem Smart Forms Framework Erstellen Sie ein JavaScript -Kontaktformular mit dem Smart Forms Framework Mar 07, 2025 am 11:33 AM

Erstellen Sie ein JavaScript -Kontaktformular mit dem Smart Forms Framework

Erstellen Sie einen Inline -Texteditor mit dem inhaltlichen Attribut Erstellen Sie einen Inline -Texteditor mit dem inhaltlichen Attribut Mar 02, 2025 am 09:03 AM

Erstellen Sie einen Inline -Texteditor mit dem inhaltlichen Attribut

Machen Sie Ihren ersten Seltsamen -Sufle -Übergang Machen Sie Ihren ersten Seltsamen -Sufle -Übergang Mar 15, 2025 am 11:08 AM

Machen Sie Ihren ersten Seltsamen -Sufle -Übergang

Vergleich der 5 besten PHP -Formbauer (und 3 kostenlose Skripte) Vergleich der 5 besten PHP -Formbauer (und 3 kostenlose Skripte) Mar 04, 2025 am 10:22 AM

Vergleich der 5 besten PHP -Formbauer (und 3 kostenlose Skripte)

Datei hochladen mit Multer in node.js und ausdrücken Datei hochladen mit Multer in node.js und ausdrücken Mar 02, 2025 am 09:15 AM

Datei hochladen mit Multer in node.js und ausdrücken

Beste CSS -Animationen und Effekte auf Codecanyon 2025 (kostenlos bezahlt) Beste CSS -Animationen und Effekte auf Codecanyon 2025 (kostenlos bezahlt) Mar 01, 2025 am 09:32 AM

Beste CSS -Animationen und Effekte auf Codecanyon 2025 (kostenlos bezahlt)

Arbeiten mit GraphQL Caching Arbeiten mit GraphQL Caching Mar 19, 2025 am 09:36 AM

Arbeiten mit GraphQL Caching

See all articles