Repository navigation
V1 nachmittag
Die Eigenschaft font-family gibt eine Liste von Schriftarten an, von der höchsten Priorität bis zur niedrigsten. Der Browser checkt der angegebenen Reihenfolge nach, ob er die Schrift besitzt. Falls nicht geht er weiter.
Ohne Anführungszeichen: Font Familie auf dem Rechner geladen.
Mit Anführungszeichen: Generischer Name, Schrift wird von Font Server oder über CSS mitgeliefert.
.serifen{
font-family: Georgia, serif;
}
.serifenlos{
font-family: "Gill Sans", sans-serif;
}Was sind websichere Schriftarten?
Websichere Schriftarten sind Schriftarten, die universell in allen Browsern und auf allen Geräten installiert sind. Allerdings gibt es keine 100%ig sicheren Schriftarten. Es besteht immer die Möglichkeit, dass eine Schriftart nicht gefunden wird oder nicht richtig installiert ist. -> https://www.cssfontstack.com/
Daher ist es sehr wichtig, immer Ausweichschriften zu verwenden.
Das bedeutet, dass du in der Eigenschaft font-family eine Liste ähnlicher "Ersatzschriftarten" hinzufügen solltest. Wenn die erste Schriftart nicht funktioniert, probiert der Browser die nächste aus, und die nächste, und so weiter. Beende die Liste immer mit einem generischen Schriftfamiliennamen.
Adobe Fonts: https://fonts.adobe.com/fonts
Google Fonts
Wenn du keine der Standard-Schriftarten in HTML verwenden möchtest, kannst du Google Fonts verwenden.
https://fonts.google.com/
Google Fonts generiert dir einen CSS @import Befehl, um die Schrift von ihrem Server zu laden.
Du bekommst auch ein Beispiel der Syntax, um die Font einem Element zuzuweisen.
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=Roboto:wght@100&display=swap');
body {
font-family: 'Roboto', sans-serif;
}
</style>
</head>Andere Font Anbieter
Fontlizenzen
Mieten pro Monat
https://typekit.com
https://fonts.com
Fonts einmalig kaufen
https://urwpp.de
Views kaufen
https://linotype.com
https://fontshop.com
Gratis Fonts
https://velvetyne.fr/
https://typotheque.genderfluid.space/index.html
Fonts finden:
https://fontsinuse.com/
Fonts aus Bildern erkennen:
https://www.whatfontis.com/
Die CSS Regel @font-face legt eine benutzerdefinierte Schriftart fest, mit der Text angezeigt werden soll; die Schriftart kann entweder von einem Remote-Server oder von einer lokal auf dem eigenen Computer installierten Schriftart geladen werden. Das Attribut src gibt Verweise auf Font-Ressourcen an, einschließlich Hinweisen auf das Font-Format und die Technologie. Es ist erforderlich, damit die @font-face-Regel gültig ist.
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}Welches Fontformat sollte man benutzen?
Die Web Open Format-Datei WOFF ist eine ausschließlich für das Internet bestimmte, komprimierte Version der oben genannten Formate. Dies bedeutet, dass die Schriftarten schneller heruntergeladen werden, wenn sie auf einer Website angezeigt werden.
Es gibt eine neue Version von WOFF, WOFF 2.0, die eine verbesserte Komprimierung bietet. WOFF 2.0 ist das beste Format für das Web.
Die Website caniuse https://caniuse.com/?search=woff2 zeigt, dass alle modernen Browser WOFF 2.0 unterstützen.
Variable Schriftarten sind eine Weiterentwicklung der OpenType-Schriftspezifikation, die es ermöglicht, viele verschiedene Variationen einer Schriftart in eine einzige Datei zu integrieren, anstatt für jede Breite, jedes Gewicht oder jeden Stil eine eigene Schriftdatei zu haben. Bei statischen Fonts wird eine Schriftart als mehrere einzelne Schriftarten produziert, wobei jede Schriftart eine bestimmte Kombination aus Breite, Gewicht und Stil repräsentierte. So gibt es separate Dateien für "Roboto Regular", "Roboto Bold" und "Roboto Bold Italic" - was bedeutet, dass man am Ende 20 oder 30 verschiedene Schriftdateien haben kann, um eine komplette Schrift zu repräsentieren (bei einer großen Schrift, die auch verschiedene Breiten hat, kann es ein Vielfaches davon sein).
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
Variable Fonts auf Google: https://fonts.google.com/?vfonly=true
Font Playground: https://play.typedetail.com/
Finde die Fonts (oder im Ausdruck möglichst ähnliche), die in deinem Ausgangsmedium verwendet wurden. Bette sie ein, entweder über Google Fonts, Systemschriften oder über ein Font File in deinem Repository. Wende sie in Grösse und Schriftschnitt an. Arbeite mit den unterschiedlichen Masseinheiten.
Schau dir auf W3C https://www.w3schools.com/css/default.asp auch die folgenden Text Attribute an:
letter-spacing, line-height, text-align und baue eine Seite, auf der du eine typografisch möglichst genaue Übersetzung eines Auszugs erstellst.
Websiten sind modular aufgebaut. Im Unterschied zu einem Word File, bei dem alle Ressourcen wie Bilder in ein Dokument eingebunden werden, kann eine Seite Elemente enthalten, die in anderen Ordnern oder gar anderen Server liegen. Dafür brauchen wir die Adressierung, damit der Browser weiss, was wo liegt und zusammengefügt werden soll.
Ein Dateipfad beschreibt den Speicherort einer Datei in der Ordnerstruktur einer Website. Dateipfade werden verwendet, wenn auf externe Dateien verlinkt wird, wie z.B.:
- Web-Seiten
- Bilder
- Stilvorlagen
- JavaScripts
- Fonts
Drei Beispiel von Anwendungen, bei denen ihr mit Pfaden zu tun hattet:
<link rel="stylesheet" href="style.css"> <!-- Pfad im href (Hypertext Reference) Attribut -->
<style>
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"); /*Pfad im url (Unified Resource Locator Attribut) */
}
</style>Ein absoluter Dateipfad ist die vollständige URL zu einer Datei, diese Art von Pfad wird benutzt, wenn die andere Datei auf einem anderen Server oder einer anderen Domain liegt.
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>Bei relativen File Paths bildet sich der Pfad aus dem hierarchischen Bezug der Datei, in der der Link liegt, zur Datei, die eingebunden wird. Ihr denkt immer von der Datei aus, in der der Link liegt.
<img src="seite2.html"> <!--The "seite2.html" file is located in the same folder as the current page -->
<img src="seiten/seite2.html"> <!-- The "seite2.html" file is located in the seiten folder in the current folder -->
<img src="../seite2.html"> <!--The "seite2.html" file is located in the folder one level up from the current folder -->Eine architektonische Vorstellung kann helfen: Stell dir die relative Adressierung wie Angaben in einem Gebäude vor. Alle Gegenstände, die im selben Zimmer liegen, kannst du direkt adressieren. Um aus einem Zimmer rauszugehen, musst du erst zur Tür raus. Dies ist die Analogie, um aus einem Ordner rauszukommen:
<img src="../seite2.html">Willst du in ein anderes Zimmer rein und dort etwas holen, gibt du den Namen des Zimmers an. Dies ist die Analogie, um in einen Ordner einzusteigen. Du musst aber bereits auf dem Gang (auf derselben Ebene, wie das Zimmer) sein:
<img src="seiten/seite2.html"><img src="bildname.jpg" alt="eine alternative Beschreibung des Bildes">Der img tag hat zwei Attribute, die angegeben werden müssen: src und alt.
src gibt den Pfad zum Bild an (zu Pfaden mehr im nächsten Abschnitt), alt eine alternative Beschreibung für Suchmaschinen, WebCrawler und die Accessiblity für sehbehinderte Menschen.
Zwei Beispiele:
Das Bild liegt nicht auf demselben Server wie die html Page:
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/%28Orgueil%29_-_L%27%C3%89glise_Saint-Ferr%C3%A9ol_-_Voute_du_choeur.jpg/500px-%28Orgueil%29_-_L%27%C3%89glise_Saint-Ferr%C3%A9ol_-_Voute_du_choeur.jpg" alt="Orgueil - Saint Ferréol Church - Vault in trompe-l'oeil of the choir. ">Das Bild liegt auf demselben Server und im selben Ordner wie die html Page:
<img src="Voute_du_choeur.jpg" alt="eine alternative Beschreibung des Bildes"><style>
body {
background-image: url('img_girl.jpg');
}
</style>- Mehrere Backgrounds übereinander legen https://css-tricks.com/chaining-multiple-blend-modes/
Gebräuchliche 'alte' Bildformate:
| Dateiendung | Beschreibung |
|---|---|
| .gif | für flächige Graphiken und Animationen - kein Transparenzkanal |
| .jpeg, .jpg | verlustbehaftete Komprimierung von Bildern (derzeit das beliebteste Format), keine Animationen, keine Transparenz. |
| .png | PNG ist JPEG vorzuziehen, wenn es um eine genauere Reproduktion von Quellbildern geht oder wenn Transparenz erforderlich ist. |
Neue Bildformate:
| Dateiendung | Beschreibung |
|---|---|
| .apng | Gute Wahl für verlustfreie Animationen (GIF ist weniger performant). Online aus .png Sequenzen herstellen: https://ezgif.com/apng-maker |
| .avif | Eine gute Wahl sowohl für Bilder als auch für animierte Bilder aufgrund der hohen Leistung und des lizenzfreien Bildformats. Es bietet eine viel bessere Komprimierung als PNG oder JPEG und unterstützt höhere Farbtiefen, animierte Rahmen, Transparenz usw. Beachten Sie, dass Sie bei der Verwendung von AVIF Fallbacks zu Formaten mit besserer Browserunterstützung einbauen sollten: Online, https://avif.io/ |
| .svg | Vektorbildformat; ideal für Elemente der Benutzeroberfläche, Icons, Diagramme usw., die in verschiedenen Größen genau gezeichnet werden müssen. |
| .webp | Hervorragende Wahl sowohl für Bilder als auch für animierte Bilder. WebP bietet eine viel bessere Komprimierung als PNG oder JPEG mit Unterstützung für höhere Farbtiefen, animierte Rahmen, Transparenz usw. AVIF bietet eine etwas bessere Komprimierung, wird aber in Browsern nicht ganz so gut unterstützt und bietet keine Unterstützung für progressives Rendering. |
Die Bildaufbereitung ist oft ein Trade-Off zwischen Kompression und Qualität. Die Dateien sollen so klein wie möglich sein, da oft mehrere Bilder in einem Request geladen werden. Developer Tools -> Network zeigt die aktuelle Zeit an, die benötigt wird, eine Ressource zu laden.