Schrifteigenschaften
Bevor wir mit den Quellen arbeiten, werden wir deren Eigenschaften überprüfen, um den Hintergrund zu erfahren:
- Schriftfamilie: Bestimmt die Schriftfamilie eines Textblocks.
- Schriftgröße: Legt die Schriftgröße für einen Textblock fest.
- Schriftstil: Geben Sie den Stil der Schrift an. Er kann normal, kursiv oder schief sein.
- font-variant: Legt fest, ob der Text des Blocks in Kleinbuchstaben angezeigt werden kann oder nicht. Die möglichen Werte sind Kleinbuchstaben und normal.
- font-weight: Gibt das Gewicht der Schriftart für einen Textblock an, dh die Dicke der Schriftart . Die Werte können normal, fett, fett, heller und <number 100-900> sein.
- font: Abkürzung, mit der die Angabe der Quelle in einer einzigen Zeile vorgenommen werden kann.
Quelle auswählen
Die Eigenschaft font-family bestimmt die Gruppe von Quellen, die verwendet werden, indem eine Präferenzreihenfolge festgelegt wird. Wenn eine nicht verfügbar ist, wird sie in der Präferenzreihenfolge an die nächste übergeben. Der Browser beginnt mit der ersten Quelle der Liste und sucht nach jeder Quelle in der festgelegten Reihenfolge, bis es eine gibt, die verwendet werden kann.
Dies liegt daran, dass möglicherweise Quellen erforderlich sind, die auf dem PC eines Benutzers installiert sind oder zu einem bestimmten Betriebssystem gehören. Wenn also ein anderer Benutzer die Anforderungen nicht erfüllt, können wir steuern, wie sich unser Dokument auswirkt.
Lassen Sie uns abschließend eine Liste allgemeiner Quellen anzeigen, die standardmäßig für alle Systeme verfügbar sein sollten und mit denen wir keine Probleme haben sollten.
- serif
- serifenlos
- kursiv
- Fantasie
- Monospace
Da wir den theoretischen Aspekt der Verwaltung von Quellen behandelt haben, sehen wir uns Beispiele mit Code an, in denen wir unser Wissen darüber erhalten, wie wir alles, was wir studiert haben, in die Praxis umsetzen können:
<! DOCTYPE HTML> <html> <head> <title> Beispiel </ title> <style> p { Polsterung: 5px; Rand: mittelschwarz doppelt; Hintergrundfarbe: Hellgrau; Rand: 2px; Schwimmer: links; Schriftfamilie: "HelveticaNeue Condensed", Monospace; } </ style> </ head> <body> <p> Es gibt viele verschiedene Obstsorten - es gibt über 500 Sorten von Bananen allein. Bis wir die unzähligen Arten von hinzufügen Wir haben es mit Äpfeln, Orangen und anderen bekannten Früchten zu tun Tausende von Möglichkeiten. </ p> </ body> </ html>
In diesem Code sehen wir, dass in der Schriftfamilie eine unkonventionelle Quelle definiert wurde, da es sich um eine proprietäre Quelle handelt. HelveticaNeue Condensed. Als zweite Präferenz setzen wir Monospace, um zu sehen, wie wir dies im Browser für jeden der definierten Fälle sehen können.
[Anhang = 861: html5fuentes.jpg]
Links vom Bild sehen wir den Fall, dass die Quelle, die als erste Wahl platziert wurde, nicht existiert, dh die Monospace-Schriftart . Auf der rechten Seite sehen wir die Quelle, die sie besitzt.
Damit haben wir das Tutorial abgeschlossen. Nachdem wir die theoretischen Grundlagen kennen und in die Praxis umgesetzt haben, können wir bereits ein wenig mit den Quellen unserer Anwendung spielen und Ergebnisse erzielen, die optisch attraktiver und nach unseren Wünschen sind.
Sie können Teil 2 dieses Tutorials weiterlesen.