One-Page-Webseiten mit Bootstrap, LESS und Sass

Schriften einbinden

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Um Schriften einzubinden, müssen Sie – wie in CSS – zuerst die Schrift "vorstellen" (importieren) und sie dann in einer Klasse aufrufen.
03:50

Transkript

In einem nächsten Schritt möchte ich ganz gerne die Überschriften ein ganz klein wenig abändern. Das heißt, ich möchte sie abheben vom normalen Schriftzug. Der Fließtext ist in "Helvetica" und ich hätte gerne eine eigene, leicht andere Schrift für die Überschriften. Dazu gehe ich auf Google Fonts und werde mir hier jetzt eine Schriftart aussuchen. Das heißt, ich habe sogar schon eine im Auge, die heißt "Hind", und "Hind" ist eben eigentlich nur minimal anders als "Helvetica", aber eben etwas breiter gesetzt und ich glaube, das tut meinen Überschriften gut. Ich sage also "Add to Collection", und werde mir das Ganze jetzt hier noch mit allen unterschiedlichen Styles anschauen. Ich hätte ganz gern nicht die normale, sondern die "bold"-Version und sage jetzt "use". "Semi-bold use". Und wenn Sie da jetzt ein Stückchen hinunterscrollen, bekommen Sie die Möglichkeit, das Ganze eben in Ihren HTML-Text zu integrieren im Head-Bereich. Nachdem wir aber mit LESS arbeiten, können wir auch mit einem Import-Befehl arbeiten. Und das tun wir auch. Das heißt, ich kopiere mir hier diesen Import-Befehl mit Strg+C und werde ihn dort hineintun, wo ich eigentlich alle meine Importe drin habe, nämlich in "bootstrap.less". Ich öffne also "bootstrap.less", habe hier schon "Schriftart" mir vorgeschrieben und mit Strg+V füge ich hier jetzt meinen Import ein und speichere das Ganze. Ich werde jetzt natürlich noch nicht viel sehen, weil bis jetzt habe ich nur die Schrift importiert, aber ich wende sie ja noch nirgends an. Und die Frage ist jetzt: Wo treffe ich auf die Möglichkeit, dass ich die Schrift tatsächlich einsetzen kann? Ich sehe mir hier meine "less"-Dateien durch, und komme dann eben irgendwann mal auf "type.less" und tatsächlich liegen hier alle Typographien. Aber ich merke sehr schnell, wenn es um die Schriftfamilie geht, so habe ich es hier mit einer Variablen zu tun und Variablen werden alle abgehandelt in der "variables.less". Und hier werde ich dann endlich fündig, denn ich habe hier zwar als Schriftfamilie "Helvetica", aber wenn ich etwas weiter herunterscrolle, dann sehe ich hier "headings-font-family" und da habe ich es mit einer Vererbung zu tun. Das heißt, hier wird im Moment noch aus dem body, also von der normalen Schriftangabe hier, der Schrifttyp vererbt und das möchte ich gerne ändern und wie ich es ändern möchte, finde ich ebenfalls wieder auf der Google Fonts-Seite, nur ein Stückchen weiter herunten. Hier, das ist nun der Eintrag um den es geht. Den kopiere ich mir auch wieder. Na gut, habe jetzt alles kopiert, macht auch nichts. Mit Strg+C hole ich es mir, und baue es dann hier statt "inherit" mit Strg+V wieder ein. Allerdings muss ich hier jetzt diese doppelte Nennung der Schriftfamilie noch wieder weglöschen und ich speichere das Ganze. Jetzt sollten meine Überschriften mit dieser neuen Schriftart bestückt worden sein. Und das können wir uns gleich im Inspector anschauen. Wir sagen "Element untersuchen" - ich bin hier in Firefox - und wenn ich hier jetzt bei den Elementen schaue, dann werde ich merken, dass bei der Schriftfamilie tatsächlich "Hind" zum Einsatz kommt. Sie können mit Schriften sehr viel Ausdruck auch noch erzeugen und Sie merken, dass es sehr einfach ist, Schriftarten auch mithilfe von LESS einzublenden.

One-Page-Webseiten mit Bootstrap, LESS und Sass

Erstellen Sie eine moderne Website im One-Page-Design, die mit wenigen Dateien auskommt und mit Effekten wie Parallax Scrolling aufwartet.

2 Std. 1 min (28 Videos)
Derzeit sind keine Feedbacks vorhanden...

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!