CSS3 - Web-Schriftarten
Web-Schriftarten werden verwendet, um die Schriftarten in CSS zuzulassen, die nicht auf dem lokalen System installiert sind.
Verschiedene Web-Schriftartenformate
| Sr.Nr. | Schriftart & Beschreibung |
|---|---|
| 1 | TrueType Fonts (TTF) TrueType ist ein Gliederungsschriftstandard, der Ende der 1980er Jahre von Apple und Microsoft entwickelt wurde. Er wurde sowohl für Windows- als auch für MAC-Betriebssysteme am häufigsten verwendet. |
| 2 | OpenType Fonts (OTF) OpenType ist ein von Microsoft entwickeltes Format für skalierbare Computerschriftarten |
| 3 | The Web Open Font Format (WOFF) WOFF wird für die Entwicklung von Webseiten verwendet und im Jahr 2009 entwickelt. Jetzt wird es gemäß der W3C-Empfehlung verwendet. |
| 4 | SVG Fonts/Shapes SVG erlaubt SVG-Schriftarten in der SVG-Dokumentation. Wir können CSS auch auf SVG mit der Eigenschaft font face anwenden. |
| 5 | Embedded OpenType Fonts (EOT) EOT wird zum Entwickeln der Webseiten verwendet und in Webseiten eingebettet, sodass keine Schriftarten von Drittanbietern zugelassen werden müssen |
Der folgende Code zeigt den Beispielcode der Schriftart -
<html>
<head>
<style>
@font-face {
font-family: myFirstFont;
src: url(/css/font/SansationLight.woff);
}
div {
font-family: myFirstFont;
}
</Style>
</head>
<body>
<div>This is the example of font face with CSS3.</div>
<p><b>Original Text :</b>This is the example of font face with CSS3.</p>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Beschreibung der Schriftarten
Die folgende Liste enthielt alle Schriftartenbeschreibungen, die in der @ font-face-Regel enthalten sind -
| Sr.Nr. | Wert & Beschreibung |
|---|---|
| 1 | font-family Wird verwendet, um den Namen der Schriftart zu definieren |
| 2 | src Wird verwendet, um die URL zu definieren |
| 3 | font-stretch Wird verwendet, um herauszufinden, wie die Schrift gedehnt werden soll |
| 4 | font-style Wird verwendet, um den Schriftstil zu definieren |
| 5 | font-weight Wird verwendet, um die Schriftstärke (Fettdruck) zu definieren. |