Liste Der Javascript-Schriftfamilien

ast Python module | base64 Python module | code Python module | COM PHP module | dis Python module | Ev PHP module | exp | html Python module | http Python module | imp Python module | io Python module | JavaScript | os Python module | PS PHP module | Python functions | re Python module | select Python module | sep | site Python module | SPL PHP module | StackOverflow | time Python module | UI PHP module

Michael Zippo 04.11.2021

Das Formatieren von Text auf einer Webseite ist ein wichtiger Teil des Webdesigns. Beispielsweise möchten Sie möglicherweise, dass die Kopfzeilen in einer bestimmten Schriftart angezeigt werden oder für den gesamten Text auf einer Seite die Schriftart serif verwendet wird.

Hier wird das CSS Schrift liegt: Die Familie kommt ins Spiel. Mit der CSS-Eigenschaft font-family können Sie eine oder mehrere Schriftfamilien angeben, die verwendet werden, um den Text auf einer Web-Seite zu formatieren.

Dieses Tutorial behandelt die Grundlagen anhand von CSS-Beispielen font-family und wie Sie die Eigenschaft verwenden können, um Text auf einer Webseite zu formatieren.

CSS Font Family

Es gibt viele Aspekte, die beim Stylen einer Schriftart in CSS eine Rolle spielen, von der Einstellung einer Farbe bis zur Größe. die Polizei. Einer der wichtigsten Teile eines Schriftstils ist jedoch die Definition der Schriftfamilie, die der Stil ist, der von Text auf einer Webseite verwendet wird.

Definiere die Schriftfamilie, die von Text auf einer Webseite verwendet wird Webseite können Sie die Eigenschaft font-family verwenden. Die Syntax der Eigenschaft font-family lautet wie folgt:

Die Eigenschaft font-family akzeptiert eine einzelne Schriftart oder eine Liste von Schriftarten. Wenn Sie mehr als ein Zeichen angeben, müssen Sie jedes Zeichen durch ein Komma trennen.

Die Reihenfolge, in der die Zeichen angezeigt werden, ist die Reihenfolge, in der der Browser versucht, die Zeichen anzuwenden. Der Browser verwendet standardmäßig die erste Schriftart in der Liste, die installiert ist oder vom Webbrowser heruntergeladen werden kann. Wenn dieses Zeichen nicht verfügbar ist, wird das zweite Zeichen verwendet und so weiter.

Ist es Es ist wichtig zu beachten, dass die Eigenschaft font-family eine Schriftart für jedes Zeichen in einem Textblock auswählt. Wenn ein bestimmtes Zeichen in einer Schriftart nicht verfügbar ist, wird die nächste Schriftart Ihrer Schriftart in der Familienliste ausprobiert, bis ein geeignetes Zeichen gefunden werden kann.

Wenn Sie die Schriftstärke verwenden, ist es das Am besten fügen Sie mindestens eine generische Schriftart für den Nachnamen hinzu (z. B. Serif, Sans-Serif oder Monospace). Dadurch wird sichergestellt, dass, wenn keine andere Schriftart in der Liste verfügbar ist, der Browser immer noch in der Lage ist, eine Schriftart für den Text auf einer Webseite auszuwählen, die angezeigt werden soll.

Es gibt zwei Möglichkeiten, die Sie verwenden können die font-family-Eigenschaft. Erstens können Sie die Eigenschaft verwenden, um eine benutzerdefinierte Schriftart für eine Webseite anzugeben. Zweitens können Sie die Eigenschaft verwenden, um eine generische Schriftfamilie auf Text auf einer Webseite anzuwenden. Folgende generische Schriftfamilien stehen zur Verwendung mit der Eigenschaft font-family zur Verfügung:

• serif: Schriftarten verwenden die Serifenschrift (z. B. Lucida Bright, Palladio).
• sans-serif: Schriftarten verwenden die Sans-Serif-Schriftart (z. B. Open Sans, Trebuchet MS).
• Monospace: die Zeichen sind alle gleich breit (z. B. Minivan, Menlo).
• Kursiv: Die Zeichen haben einen Bindestrich (zB Lucida Calligraphy).
• Fantasie: Dekorative Schriftarten, die verwendet werden, um auf Schriften aufmerksam zu machen (zB Papyrus).

Die gibt es andere generische Schriftfamilien verfügbar, die Sie ausführlicher in Mozilla CSS Font Family Documentation .

Da wir nun die Grundlagen der Eigenschaft font-family kennen, können wir uns einige Beispiele ansehen, wie sie in Aktion funktioniert .

Beispiele für CSS-Schriftfamilien

Eine lokale Briefmarke bat uns, den Seattle Stamp Club, die Schriftarten für Teile von anzupassen ihre Website.

Zunächst wurden wir gebeten, die Schriftart aller

-Überschriften auf der Seite "Kontakte" zu ändern, um die "Open Sans" zu verwenden. Schriftart. So sollte beispielsweise „Kontakt“ auf der „Kontakt“-Seite ihrer Website in Open Sans erscheinen. Wenn diese Schriftart nicht verfügbar ist, muss die generische "sans-serif"-Familie verwendet werden. Dazu könnten wir den folgenden Code verwenden:

Klick " noscript> Button im Code-Editor oben, um die Ausgabe unseres HTML/CSS-Codes zu sehen .

In unserem HTML-Code haben wir einen Header mit einem

-Tag angegeben, der den Text Contact Us enthält. Also haben wir in unserem CSS-Code verwendet die Schriftfamilie, um die Schriftart für die

-Elemente auf unserer Webseite festzulegen.

Der Wert, den wir der Eigenschaft font-family zugewiesen haben, legt die Schriftart für alle

-Elemente in fest Open Sans und, falls diese Schriftart nicht verfügbar ist, wird die generische sans-serif-Familie verwendet. Um dies zu erreichen, haben wir zwei Zeichen angegeben, die durch ein Komma getrennt sind.

Nehmen wir nun an, wir wollen auch einen Stil auf alle Zeichen

Elemente der Seite Kontakte vom Stempelclub anwenden, um die Times-Schriftart zu verwenden.Wenn diese Schriftart nicht verfügbar ist, sollte eine Standard-Serifenschrift verwendet werden. Dazu könnten wir den folgenden Code verwenden:

Klick < noscript> 24" im obigen Code-Editor, um die Ausgabe unseres HTML-/CSS-Codes zu sehen.

In unserem Beispiel haben wir einen Textabsatz mit einem

Tag deklariert. Als Nächstes definieren wir die Schriftfamilie aller

Tags in unserem CSS-Stylesheet, um die Times und serif-Schriftarten. Standardmäßig versucht der Browser, alle

Tags in der Times-Schriftart anzuzeigen. Wenn diese Schriftart nicht verfügbar ist, wird die serif-Schriftart verwendet Schriftart wird verwendet.