Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

HTML5 Grundkurs

Web-Fonts

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Das <font>-Tag ist out - CSS ist in. Und dennoch müssen moderne Webanwendungen nicht auf ausgefallene Schriftarten verzichten, Web-Fonts sei Dank.
04:55

Transkript

Allein schon ein Blick auf 'caniuse.com' verrät, wie viele umfangreiche Features es rund um HTML5, die JavaScript-Schnittstellen, und vor allem auch CSS gibt. Eins davon wollen wir uns spezifisch kurz ansehen, und zwar Web-Fonts, also spezifische Schriftarten im Web, das heißt, wenn wir hier mal gucken, haben wir eine Technologie, die...na ja, mit Einschränkungen im Internet Explorer 8 funktioniert, aber dann in praktisch allen anderen modernen Browsern, selbst in den meisten Mobilen sehr, sehr gut. Es gibt noch verschiedene Formate für diese Fonts, aber vom Prinzip her funktioniert das eigentlich sehr, sehr gut. Die Anweisung heißt tatsächlich, wie man hier auch schon sieht, @font-face. Und danach geben wir im Wesentlichen an, welchen Font wir verwenden wollen, und gegebenenfalls auch in welcher Datei dieser Font liegt. Das mit der Datei hat natürlich auch lizenzrechtliche Auswirkungen, das heißt, man braucht dann für die Schrift in der Regel eine Lizenz, gibt auch lizenzfreie Schriften, aber da muss man sich jeden Fall drum kümmern. Also ein Font einfach finden und übernehmen, könnte einen in Schwierigkeiten bringen. Ich will jetzt eine spezifische Font-Service-Schnittstelle Ihnen zeigen, und zwar die von Google: "google.com/fonts". Und Google hat so eine Liste von entsprechenden Web-Fonts, die hier eingesetzt werden können. Gibt also eine relativ große Auswahl, und da wählen wir uns einfach irgendwas aus, vielleicht diesen Font hier: Normal 400 Schriftauflösung. 'Artifika' heißt er. Und nehmen vielleicht noch einen etwas extravaganteren, wie wäre es denn hiermit 'Over the Rainbow'. Gut. So, jetzt habe ich also hier mehrere Schriftarten ausgewählt, und jetzt würde ich diese Schriftarten gerne verwenden. Nun, wie mache ich das? Ich klicke auf USE, gebe noch mal aus, welchen Schriftschnitt ich will, eben welche Schriftarten. Bekomme auch einen Hinweis, wie viel Auswirkungen diese Schriftarten auf die Ladezeit meiner Website haben. Wenn ich 20 verschiedene Fonts verwende, dann müssen die natürlich auch erst übertragen und ge-"passed" werden vom Browser. Das alles ein bisschen dauern kann, deswegen sollte man da relativ vorsichtig mit umgehen. Aber wenn ich das alles so will, dann muss ich entsprechend diese Schriftarten dann laden, und ein Weg, das zu tun ist, das link-Tag zu verwenden von HTML. Ich könnte auch '@import' als CSS-Anweisung verwenden, oder ich könnte auch puren JavaScript-Code verwenden, der das dann lädt. Aber ich denke, '@import' oder so ein Standardvorgehen ist vielleicht der beste Ansatz, und nehme vielleicht auch einfach das link-Element, gehe in die Zwischenablage damit, und im Editor legen wir eine neue Datei an. Ich nehme jetzt mal "font.html". Und im 'head'-Abschnitt lade ich das gleich als erstes, weil ich will es ja, direkt danach verwenden. Sie sehen das schon an der URL, es wird einfach übergeben, welche Schriften es sind, und dann wir das richtige CSS geliefert, also das ist tatsächlich eine CSS-Datei, die dann dabei zurückkommt. Und ja, dann gibt es einfach die übliche 'font-family'-Anweisung, die man verwenden kann. Ich kopiere auch die beiden hier raus, dann sehen wir die nämlich direkt im Einsatz Und mache jetzt mal zwei Absätze, also 'p id="Absatz1"' und das ist Artifika als Schrift, und 'p id="Absatz2"' bekommt das interessant benannte 'Over the Rainbow' Und dann schauen wir mal, wie das aussieht, indem wir hier eine style-Anweisung machen und eben sagen 'Absatz1' bekommt 'Artifika', und 'Absatz2' bekommt 'Over the Rainbow'. Und hier eben in der serif-Variante und in der kursiven-Variante könnte man sogar auch noch anpassen. Rufen wir das mal auf! Ich nehme mal den Firefox. Und das öffnet sich dann hier 'font.html'. Ja! Und die beiden Schriften werden hier tatsächlich direkt verwendet. Wir können jetzt also extravagantere Fonts einsetzen. Schauen wir in den Quelle-Code, sehen, dass hier tatsächlich eine CSS-Datei geladen wird. Und was steht dadrin? Es gibt entsprechend diese Anweisungen, und es wird eine URL angegeben. Und über diese URL werden dann entsprechend die Font-Informationen geladen. Und so kommt das dann mit dem woff-Format direkt zum Browser, der Browser unterstützt das dann, und dementsprechend kann der Browser das dann auch anzeigen. Es ist also ein relativ einfacher Weg, um Fonts auf seine Website einbauen zu können, einbauen zu dürfen, und auch wenn man natürlich sehr vorsichtig sein sollte mit Schriftarten, die ein wenig abseits der Norm und vielleicht auch teilweise schwer zu lesen sind, vor allem wenn man sich hier die untere Schrift anschaut. So kann man dafür sorgen, dass manche Webseiten, Weboberflächen, dann vielleicht noch ein bisschen pfiffiger aussehen, und deswegen ist das ein ganz praktisches Werkzeug in unserem kompletten Webentwicklung-Arsenal.

HTML5 Grundkurs

Machen Sie sich mit HTML5 fit für das Webdesign von morgen, angefangen vom Erstellen einfacher HTML-Dokumente bis hin zur Gestaltung anspruchsvoller Layouts.

3 Std. 11 min (29 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!