Liste Der Javascript-Schriftfamilien

| | | | | |

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:

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 `Bild" noscript> `Bild 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 `Bild < 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.

Fazit

Mit der CSS-Eigenschaft font-family können Sie den Stil des Textes einer Webseite festlegen. Beispielsweise können Sie die Eigenschaft font-family verwenden, um die Schriftarteigenschaft „Arial“ oder die generische Schriftart „Italic“ für den gesamten Text auf einer Webseite zu verwenden.

Dieses Tutorial wird durch Bezugnahme erklärt Beispiele, die Grundlagen der CSS-Eigenschaft font-family und wie Sie sie verwenden können, um Text auf einer Webseite zu formatieren. Sie können jetzt damit beginnen, die Eigenschaft der Schriftfamilie wie ein erfahrener Webdesigner zu verwenden !

Shop

Learn programming in R: courses

$

Best Python online courses for 2022

$

Best laptop for Fortnite

$

Best laptop for Excel

$

Best laptop for Solidworks

$

Best laptop for Roblox

$

Best computer for crypto mining

$

Best laptop for Sims 4

$

Latest questions

NUMPYNUMPY

psycopg2: insert multiple rows with one query

12 answers

NUMPYNUMPY

How to convert Nonetype to int or string?

12 answers

NUMPYNUMPY

How to specify multiple return types using type-hints

12 answers

NUMPYNUMPY

Javascript Error: IPython is not defined in JupyterLab

12 answers

News


Wiki

Python OpenCV | cv2.putText () method

numpy.arctan2 () in Python

Python | os.path.realpath () method

Python OpenCV | cv2.circle () method

Python OpenCV cv2.cvtColor () method

Python - Move item to the end of the list

time.perf_counter () function in Python

Check if one list is a subset of another in Python

Python os.path.join () method