Verwendung von Schriftarten in SVG
SVG unterstützt mehrere Möglichkeiten, Schriftarten für <text>-Elemente anzugeben.
Der empfohlene moderne Ansatz besteht darin, CSS zu verwenden, ähnlich wie Sie Schriftarten in HTML gestalten würden.
Anwenden und Gestalten einer Schriftart mit CSS
Der folgende Code zeigt, wie Sie das angegebene <text>-Element mit einer bestimmten Schriftart mithilfe von CSS gestalten könnten: in diesem Fall die Systemschriftart "Courier New".
Beachten Sie, dass das CSS hier innerhalb eines SVG-<style>-Elements verschachtelt ist, aber auch im einbettenden HTML angewendet werden könnte.
<svg>
<style>
text {
/* Specify the system or custom font to use */
font-family: "Courier New", monospace;
/* Add other styling */
font-size: 24px;
font-weight: bold;
font-style: italic;
}
</style>
<text x="10" y="20">Some text</text>
</svg>
Dies wird wie unten gezeigt gerendert:
Verwendung von Webschriften mit @font-face
Der vorherige Abschnitt verwendet CSS, um eine Systemschriftart anzuwenden. Sie können jedoch eine mit der @font-face-Regel spezifizierte Webschrift auf genau die gleiche Weise anwenden.
Das Beispiel zeigt, wie zuerst eine Schriftfamilie namens "FiraSans" definiert und dann verwendet wird:
<svg
viewBox="0 0 400 50"
width="350"
height="50"
xmlns="http://www.w3.org/2000/svg">
<style>
/* Define the font family using web fonts */
@font-face {
font-family: "FiraSans";
src:
url("https://mdn.github.io/shared-assets/fonts/FiraSans-Italic.woff2")
format("woff2"),
url("https://mdn.github.io/shared-assets/fonts/FiraSans-Bold.woff2")
format("woff2");
}
/* Style the text */
text {
/* Specify the system or custom font to use */
font-family: "FiraSans", sans-serif;
/* Add other styling */
font-size: 24px;
font-weight: bold;
font-style: italic;
}
</style>
<text x="10" y="20">Text styled with custom font</text>
</svg>
Referenzierung eines Stils im Text-Element
Sie können auch direkt auf einen Stil innerhalb eines <text>-Elements mit dem Attribut font-family verweisen.
Dieser Code zeigt, wie wir die benutzerdefinierte "My Font" auf das <text>-Element anwenden könnten.
<svg>
<text font-family="My Font" x="10" y="20">Text using "My Font" font</text>
</svg>
Beachten Sie, dass dies dem Anwenden von Stil auf ein HTML-Element ähnlich ist. Während es Fälle gibt, in denen dies nützlich sein kann, ist es im Allgemeinen besser, CSS und CSS-Selektoren zu verwenden.