Heim > Artikel > Web-Frontend > Was sind websichere Schriftarten und Fallback-Schriftarten in CSS?
Was sind websichere Schriftarten und Fallback-Schriftarten in CSS?
- 王林nach vorne
- 2023-08-25 23:33:121586Durchsuche
Die Website soll den Nutzern Informationen über Unternehmen, Produkte und Dienstleistungen bieten. Jede Website muss klar und schön sein, damit die Leser darauf reagieren können. Die Typografie einer Website ist ein Schlüsselfaktor, um sie konsistent zu machen und ihr ein ästhetisches Erscheinungsbild zu verleihen. Die Persönlichkeit der gesamten Website wird durch Typografie aufgebaut, die für die Schaffung einer Markenidentität von entscheidender Bedeutung ist. Wenn Sie eine einzigartige und konsistente Typografie verwenden, werden Benutzer beginnen, eine bestimmte Schriftart mit Ihrer Marke zu assoziieren.
Wenn Sie eine gute Typografie verwenden, können Sie das Interesse der Leser wecken und sie davon überzeugen, länger auf Ihrer Website zu bleiben. Durch die Schaffung einer soliden grafischen Ausgewogenheit und einer starken visuellen Hierarchie trägt dies dazu bei, den Gesamtton der Website zu bestimmen Entscheidungen werden getroffen und haben einen erheblichen Einfluss darauf, wie Leser den Textinhalt verarbeiten und interpretieren. Sie machen den Inhalt attraktiv und wirken sich somit auf die Lesbarkeit der Website aus
Mit den verschiedenen websicheren Schriftarten, die Google für Entwickler eingeführt hat, ist dies möglich Der Download ist kostenlos. In diesem Artikel besprechen wir websichere Schriftarten und Fallback-SchriftartenVon CSS bereitgestellte Schriftarten stehen Entwicklern zur Verwendung zur Verfügung.
Was sind websichere Schriftarten?
Websichere Schriftarten sind Schriftarten, die von allen Browsern auf jedem Gerät unterstützt werden. Diese Schriftarten ermöglichen es den Entwicklern, sie ordnungsgemäß anzuzeigen, auch wenn sie nicht auf dem Gerät des Benutzers installiert sind
Bevor websichere Schriftarten entwickelt wurden, zeigten Browser generische Schriftarten wieTimes New Roman an, wenn die Schriftart nicht auf dem lokalen System des Benutzers installiert war. Allerdings kann der Entwickler nicht erkennen, ob die Schriftart serverseitig korrekt angezeigt wird. Dies führt zu einer schlechten Benutzererfahrung.
Die Verwendung websicherer Schriftarten löst dieses Problem. Wenn Sie websichere Schriftarten verwenden, können Sie sicher sein, dass Ihre Schriftarten auf jedem Gerät so angezeigt werden, wie sie sindGrammatik
element{
font-family: font1;
}
Arten von websicheren Schriftarten
Es gibt sechs websichere Schriftarten. Sie lauten wie folgt: −
Serifenschrift – Diese Schriftarten enthalten kleine Vorsprünge, die im Textkörper jedes Buchstabens vorhanden sind. Sie sind auf dem Bildschirm und gedruckten Formularen besser lesbar
Monospace - Diese Schriftarten sind Schriftarten mit gleichem Abstand zwischen den Buchstaben. Space Mono, Courier, Inconsolata usw. sind allesamt Schriftarten mit fester Breite.
Sans-Serif-Schriftarten – Diese Schriftarten sind das Gegenteil von Serifen-Schriftarten. Sie enthalten keine kleinen Vorsprünge. Arial, Helvetica, Futura, Calibri usw. sind einige Beispiele für serifenlose Schriftarten.
Fantasy - Diese Schriftarten sind stark stilisiert und dekorativ. Papyrus, Herculanum, Luminari sind Fantasy-Schriftarten.
MS - Dies sind die von Microsoft eingeführten Schriftarten Trebuchet MS, MS Gothic, Georgia usw., sind MS-Schriftarten.
-
Kursivschrift - Diese Schriftarten ähneln der kursiven Handschrift. Brush Script MT, Broadley, Monarda, Raksana usw. sind einige kursive Schriftarten.
Beispiel
<!DOCTYPE html>
<html>
<head>
<meta charset= "UTF-8">
<title> Web Safe Fonts </title>
<link rel= "preconnect" href= "https://fonts.googleapis.com">
<link rel= "preconnect" href= "https://fonts.gstatic.com">
<link href= "https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel= "stylesheet">
<style>
h1{
color: green;
text-decoration: underline;
}
.demo1{
font-family: Times New Roman;
}
.demo2{
font-family: Arial;
}
.demo3{
font-family: Courier;
}
.demo4{
font-family: Brush Script MT;
}
.demo5{
font-family: Trebuchet MS;
}
.demo6{
font-family: fantasy;
}
</style>
</head>
<body>
<center>
<h2> Web Safe Fonts </h2>
<div class= "demo1"> This is an example in Times New Roman font. </div>
<div class= "demo2"> This is an example in Arial font. </div>
<div class= "demo3"> This is an example in Courier font. </div>
<div class= "demo4"> This is an example in Brush Script MT font. </div>
<div class= "demo5"> This is an example in Trebuchet MS font. </div>
<div class= "demo6"> This is an example in Fantasy font. </div>
</center>
</body>
</html>
Was ist die Fallback-Schriftart in CSS?
CSS bietet zwei Arten von Schriftfamilien für das Webdesign an. Dies sind generische Schriftfamilien wie Serif (Times New Roman, Georgia usw.) und die einzelnen Schriftfamilien wie Arial, Calibri usw.
Universelle Schriftfamilien verfügen über eine Reihe ähnlich aussehender Schriftarten. Wenn also auf dem System des Benutzers keine primäre Schriftart verfügbar ist, gibt es einen
Backup-Mechanismus, der eine Liste ähnlicher Schriftfamilien enthält, die stattdessen verwendet werden können. Diese Schriftarten werden als alternative Schriftarten bezeichnet. Sie werden als Backup im Webdesign verwendet, da keine Webschrift 100 % sicher ist. Es besteht immer die Möglichkeit eines Fehlers.
BackupFonts lösen dieses Problem, indem sie als Backup fungieren. Schriftfamilien, bei denen es sich um websichere Schriftarten handelt, können auch als Fallback-Schriftarten festgelegt werden. Einige Beispiele für alternativeSchriftarten sind Kursivschrift, Fantasy-Schriftart, Monospace-Schriftart und mehr Grammatik
element{
font-family: font1, font2, font3, font4;
}
Schriftart2, Schriftart3, Schriftart4sind die Ersatzschriftarten, die als Backup verwendet werden. Wenn der Browser Schriftart1 nicht unterstützt, wird Schriftart2 angezeigt. Wenn nicht, wird Schriftart3 verwendet und so weiter. Beispiel
<!DOCTYPE html>
<html>
<head>
<title> Fallback fonts </title>
<link rel= "preconnect" href= "https://fonts.googleapis.com">
<link rel= "preconnect" href= "https://fonts.gstatic.com">
<link href= "https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel= "stylesheet">
<style>
.demo1{
font-family: verdana,'cursive';
}
.demo2{
font-family: cursive, Cochin, Georgia;
}
.demo3{
font-family: Helvetica, arial, cursive, 'Times New Roman';
}
.demo4{
font-family: 'Times New Roman', Cambria, Cochin, Georgia, Times, serif;
}
</style>
</head>
<body>
<center>
<h2> Fallback fonts </h2>
<p class= "demo1"> This is an example. </p>
<p class= "demo2"> This is an example. </p>
<p class= "demo3"> This is an example. </p>
<p class= "demo4"> This is an example. </p>
</center>
</body>
</html>
Im obigen Beispiel ist die Schriftfamilie des Textes Schriftart1. Wenn ein Browser die Schriftfamilie „font1“ nicht unterstützt, finden Sie daneben eine Liste mit Schriftfamilien, die als Ersatzschriftarten verwendet werden können.
Fazit
Die Verwendung websicherer Schriftarten im Webdesign ist eine gute Praxis, da sie den Entwicklern sicherstellt, dass sie auf den Geräten der Benutzer angezeigt werden. Allerdings sind websichere Schriftarten nicht hundertprozentig vertrauenswürdig. Daher können CSS-Fallback-Schriftarten als Backup für Schriftarten verwendet werden, sodass der Browser eine andere aufgelistete Schriftartenfamilie ausprobieren kann, wenn eine Schriftartenfamilie nicht funktioniert. Es gehört zur guten Codierungspraxis, eine gemeinsame Schriftfamilie als erste Schriftart zu verwenden und dann dieselbe Schriftfamilie für andere Optionen zu verwenden.
Das obige ist der detaillierte Inhalt vonWas sind websichere Schriftarten und Fallback-Schriftarten in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- Wie zeige ich den Inhalt mehrzeiliger Datenattribute mit neuen Zeilen mithilfe von CSS an?
- Wie kann ich den CSS-Anzeigestatus eines Elements mithilfe von JavaScript überprüfen?
- Wie erstelle ich ein Radialmenü nur mit CSS?
- Wie ändere ich CSS-Klasseneigenschaften dynamisch mit JavaScript/jQuery?
- Wie erhalte ich in jQuery korrekt Klickkoordinaten relativ zu einem Zielelement?