Nicht standardmäßige Schriftarten bezieht sich auf alle Schriftarten in CSS, die nicht zum Standardsatz von Schriftarten gehören, die in den meisten Browsern verfügbar sind. Zu den Standardschriftarten gehören Arial, Times New Roman und Verdana. Dabei handelt es sich um Standardschriftarten, da sie auf den meisten Computern und Geräten vorinstalliert sind.
Nicht standardmäßige Schriftarten sind Schriftarten, die nicht vorinstalliert sind und zur Verwendung speziell auf die Website geladen werden müssen. Diese Schriftarten können von Websites wie Google, Adobe oder MyFonts bezogen werden. Sie können auch individuell gestaltet oder gekauft werden.
Die Verwendung nicht standardmäßiger Schriftarten kann dazu beitragen, Ihrem Website-Design eine einzigartige und persönliche Note zu verleihen. Sie werden oft verwendet, um einen bestimmten Look zu kreieren oder die visuelle Identität einer Marke zu etablieren.
Typografie spielt bei der Gestaltung einer Website eine entscheidende Rolle. Die in CSS bereitgestellten Standardschriftarten wie Arial, Times New Roman und Verdana sind zwar funktional verfügbar, wirken jedoch oft langweilig und allgemein.
Die @font-face-Regel ermöglicht die Angabe von Schriftartdateien und -eigenschaften, sodass Schriftarten auf bestimmte Elemente auf der Seite angewendet werden können.
Die Syntax für die Verwendung von @font-face-Regeln lautet wie folgt -
@font-face {
font-family: 'MyFont';
src: url('path/to/MyFont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}In diesem Beispiel haben wir die Schriftfamilie als „MyFont“ angegeben. Dies ist der Name, der im gesamten CSS zur Referenzierung dieser Schriftart verwendet wird. Das Attribut „src“ gibt den Speicherort der Schriftartdatei an und das Attribut „format“ gibt das Dateiformat der Schriftart an. Für eine bessere Browserkompatibilität wird empfohlen, mehrere Schriftformate einzubeziehen, z. B. truetype, woff, woff2, eot usw.
Sobald eine Schriftart mithilfe der @font-face-Regel definiert ist, kann sie mithilfe des Attributs „font-family“ auf bestimmte Elemente auf der Seite angewendet werden. Im folgenden Beispiel wenden wir die benutzerdefinierte Schriftart „MyFont“ auf das „body“-Element an −
body {
font-family: 'MyFont', Fallback, sans-serif;
}
<html>
<head>
<style>
body {
background-color:pink;
}
@font-face {
font-family: 'MyFont';
src: url('/css/font/SansationLight.woff')
format('truetype');
font-weight: normal;
font-style: normal;
}
p {
font-family: 'MyFont', Fallback, sans-serif;
}
.div {
font-family: 'MyFont', Arial, sans-serif;
}
</Style>
</head>
<body>
<div class="div">This is the example of font face with CSS3.</div>
<p><b>Original Text :</b>This is the example of font face with CSS.</p>
</body>
</html>
Wir können @import auch verwenden, um Schriftarten aus Remote-Quellen wie Google Fonts oder einem anderen Schriftarten-Hosting-Dienst zu importieren.
@import url('https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap');
<!DOCTYPE html>
<html>
<title>Google fonts example</title>
<head>
<link href="https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap" rel="stylesheet"/>
<style>
body {
font-family: "Permanent Marker";
font-size: 15px;
}
</style>
</head>
<body>
<h1>Google fonts example</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis non a quos repudiandae doloribus cumque! Ex rem rerum aut maiore. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis non a quos repudiandae doloribus cumque! Ex rem rerum aut maiores</p>
</body>
</html>
Mit den oben genannten Schritten haben wir der Website erfolgreich nicht standardmäßige Schriftarten hinzugefügt. Denken Sie daran, sicherzustellen, dass die Schriftartdateien auf dem Server gehostet werden und für den Browser zugänglich sind, damit die Schriftarten korrekt dargestellt werden.
Das obige ist der detaillierte Inhalt vonWie füge ich in CSS einige nicht standardmäßige Schriftarten zur Website hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
