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.
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;
}
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.
<!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>
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;
}
sind 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>
Fazit
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!
Die heutige Toutiao-Goldmünze entspricht 1 Yuan
So konfigurieren Sie die Pfadumgebungsvariable in Java
Was ist die Mikrocontroller-Programmiersoftware?
Tutorial zur Erstellung von Word-Dokumenttabellen
WeChat-Kampagne abbrechen
So exportieren Sie Excel-Dateien aus Kingsoft Documents
So verwenden Sie den Quellcode einer PHP-Webseite
So legen Sie die Pfadumgebungsvariable fest
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
