nicht angemeldet Robert B.
Gunnar Bittersmann
Der Martin
Rolf B
Gunnar Bittersmann
Hallo, ich sammle Schriften ordnerweise, d.h. z.B. eine Schriftart in allen Schriftschnitten in einem Ordner. Hierzu habe ich vordefinierte CSS-Dateien mit allen nötigen @font-face Angaben gebaut, die ich je nach Entscheidung für eine Schriftart via PHP-include in meine Styles-Datei einbinde. Meine Fragen zielen auf das Verhalten der Browser in Bezug auf das Datenvolumen ab.
Moin Kalle,
- Frage: Werden die modernen Browser alle 14 Schriftschnitte vorladen, auch wenn aus dem Seitenaufbau hervor geht, das nur 4 von 14 definitiv genutz werden?
Du kannst die Frage selbst beantworten, in dem du in den Netzwerk-Tab deiner Browser-Entwicklertools schaust (F12 drücken).
- Sollte man sich also auf die wirklich benutzten Schriften und Schnitte beschränken, oder kann man für seine Eventualitäten ruhig kleine Module vorbauen und diese auch unter dem Aspekt 'mobile first' Datenvolumen sparen einbinden, weil die Browser inzwischen so intelent sind und wirklich nur die Daten Laden, die tatsächlich im Viewport sichtbar werden.
Auch das kannst du mit dem Netzwerk-Tab und dem Responsive Design Mode nachvollziehen.
Viele Grüße
Robert
@@KallePeng
- Frage: Werden die modernen Browser alle 14 Schriftschnitte vorladen, auch wenn aus dem Seitenaufbau hervor geht, das nur 4 von 14 definitiv genutz werden?
Ohne weiteres Zutun werden keine Fonts vorgeladen.
Sie werden bei Bedarf geladen, d.h. wenn Glyphen daraus auf der Seite benötigt werden. In deinem Fall heißt das: Es werden 4 Fonts geladen, nicht 14. @Robert B. schrieb ja schon, wie du das feststellen kannst.
„Bei Bedarf“ heißt aber nicht nur Schriftschnitte, sondern auch Unicode-Bereiche. Ich habe mich unlängst erst damit beschäftigt, Fonts aufzuteilen in Fonts mit ziemlich sicher benötigten Zeichen (basic, enthält die meisten ASCII-Zeichen, Umlaute, ß, €, typografisch korrekte Anführungszeichen und Gedankenstriche), Fonts mit eventuell benötigten Zeichen (extended, u.a. Buchstaben mit diakritischen Zeichen wie á, å, ă, ç, ć, č, ğ, ł, œ, ş) und Fonts mit sehr selten vorkommenden Zeichen (other).
☞ TIL about font subsetting₂, slide 14, Einbindung auf slide 18
Auf den meisten Seiten werden nur die Basic-Fonts geladen, die deutlich kleiner sind als es die Fonts mit allen Glyphen wären. Bei Bedarf wird auch mal der ein oder andere Extended-Font dazugeladen. Der Bedarf an Other-Fonts dürfte kaum auftreten; aber wenn, dann werden auch diese Zeichen in der gewünschten Schriftart dargestellt (vorausgesetzt, die Schriftart hat Glyphen dafür).
Um den flash of unstyled text (FOUT) zu vermeiden bzw. kaum sichtbar werden zu lassen, kann man den/die garantiert benötigten Font(s) vorladen: <link ref="preload" …> (☞ slide 18), das sollte aber auch per HTTP-Header gehen. Dadurch wird dieser Font schon geladen, bevor das CSS geparst wird, steht also schon beim initialen Rendern der Seite zur Verfügung.
Das wird aber i.d.R. nur der Font mit dem Normal-Schriftschnitt für die Basic-Zeichen sein. Es macht keinen Sinn, alles vorzuladen, denn das würde ja die Priorität wieder zunichtemachen.
🖖 Живіть довго і процвітайте
@Gunnar Bittersmann: Vielen Dank für die ausführliche Antwort. 👍
@Robert B. für gewöhnlich verbringe ich sehr viel Zeit im Netz mit Recherchen, nicht nur um konkretes Wissen, sondern auch damit, ob meine Frage ggf. und das ist in den meisten Fällen durchaus der Fall, so bereits gestellt und beantwortet wurde.
Ich habe sehr großen Respekt und Dankbarkeit vor den 'Machern' dieses Wiki´s und noch einiger anderer gleichwertiger Seiten.
Ohne Euch wären meine Seiten lange nicht so weit.
Allerdings als Autodidakt, der Zielgerichtet selbst seine Seiten zu bauen versucht und dessen Ziel nicht die 100%ige Barrierefreiheit für Taub-Blinde ist, sondern erst einmal wenigstens gemäß dem Ziel 'mobil-First' dass soweit zu optimieren, das eine brauchbare Seite dabei heraus kommt, habe ich ein großes Zeitproblem. Ich setze mich mit html, css, php und js auseinander, schreibe mit dem NP++ meinen Code und scheue mich davor von der wenigen Zeit die ich habe um vorwärts zu kommen, auch noch Zeit abzuzwacken, um für mich unbekannte Tools zu erlernen, die mich, so ich sie denn beherrschen würde gewiss schneller ans Ziel bringen würden 🤔
Ja, ich kann F12 drücken, habe ich auch tatsächlich getan, aber ich kann das, was ich sehe nicht ohne großen Zeitaufwand interpretieren.
Dieses Wiki ist sehr wichtig, aber bei allem Respekt, ich kann mich nicht auf das Niveau eines Menschen hieven, der in der Lage ist, sein Wissen regelmäßig aus dem 3W-Konsortium auf Englisch zu ziehen, es zu verstehen und dann auch noch auf deutsch interpretiert und kommentiert wieder zu geben.
Ich habe meine Frage hier gestellt, weil ich denke, das sie so speziell ist, dass nur von solchen Cracks wie Euch oder Frau H. von Mediaevent beantwortet werden kann. Und ich habe eine Antwort bekommen, eine Menge Zeit für diesen speziellen Fall gespart, danke nochmal :-)
Edit Rolf B: kramdown-Support…
Hallo,
nichts direkt zum Thema, aber: Es wäre schön, wenn du nicht eine endlose Textwurst formulieren würdest. Eine rudimentäre Gliederung durch Absätze würde der Übersichtlichkeit sehr helfen.
Einen schönen Tag noch
Martin
Hi,
nichts direkt zum Thema, aber: Es wäre schön, wenn du nicht eine endlose Textwurst formulieren würdest. Eine rudimentäre Gliederung durch Absätze würde der Übersichtlichkeit sehr helfen.
die ist im Prinzip vorhanden - dank kramdown aber nicht …
cu,
Andreas a/k/a MudGuard
Hallo MudGuard,
hassu recht, hab mal ein paar Linefeeds ergänzt.
Korrekter Mark/Kramdown-Satz ist nicht immer intuitiv...
Rolf
Hallo,
hassu recht, hab mal ein paar Linefeeds ergänzt.
Korrekter Mark/Kramdown-Satz ist nicht immer intuitiv...
nein, oft nicht. Aber hier? Den Unterschied zwischen einem einfachen Zeilenumbruch und einem Absatzwechsel (der auch in reinen Textdokumenten meist durch einen doppelten Zeilenumbruch dargestellt wird) könnte man eigentlich kennen.
Einen schönen Tag noch
Martin
Hallo KallePeng,
Ja, ich kann F12 drücken, habe ich auch tatsächlich getan, aber ich kann das, was ich sehe nicht ohne großen Zeitaufwand interpretieren.
Da kommt es mal wieder drauf an. Das Netzwerk-Tab und die darin dargestellten Informationen über Ladetiming und Datenvolumen sind relativ einfach zu lesen, das solltest Du auf jeden Fall zu verstehen versuchen.
Die Interpretation der Details, insbesondere die Request- und Response-Header ist eine ganz andere Sache. Aber auch da wirst Du irgendwann an den Punkt kommen, wo Du das Übertragungsprotokoll und seine Feinheiten verstehen musst.
Der Elemente-Inspektor ist, wenn man es genau wissen will, ebenfalls nichts für schwache Nerven, das gebe ich zu.
Barrierefreiheit erscheint für Leute, die mit zwei guten Augen und zwei funktionierenden Händen vor ihrem Gerät sitzen, oft genug als ein unnötiges Add-On. Aber das ist es nicht. Barrierefreiheit ist ein Kernfeature, von dem keiner weiß, wann er darauf angewiesen ist. Es zu realisieren verläuft aber oftmals konträr zu diversen Designvorstellungen, weshalb man sich von dieser Anforderung gegängelt fühlt (oder gar in seiner Freiheit behindert). Ja. Gut. Aber für wen baut man denn Webseiten? Für sich selbst?
Rolf
Barrierefreiheit erscheint für Leute, die mit zwei guten Augen und zwei funktionierenden Händen vor ihrem Gerät sitzen, oft genug als ein unnötiges Add-On. Aber das ist es nicht. Barrierefreiheit ist ein Kernfeature, von dem keiner weiß, wann er darauf angewiesen ist. Es zu realisieren verläuft aber oftmals konträr zu diversen Designvorstellungen, weshalb man sich von dieser Anforderung gegängelt fühlt (oder gar in seiner Freiheit behindert). Ja. Gut. Aber für wen baut man denn Webseiten? Für sich selbst?
Hallo Rolf,
als Mittel zum Zweck.
Ich habe in dieser ach so realen Welt, nachdem ich durch den ersten Lockdown arbeitslos geworden bin tatsächlich nicht die Hände in den Schoß gelegt.
Ich produziere und verkaufe seit Februar dieses Jahres (2022) <- (für die Nachhut) einen Basilikum-Blüten-Essig.
Meine Prioritäten in den vergangenen 2 1/2 Jahren waren:
Ich bin zur Zeit ziemlich stolz, dass ich das alles mit black-screen, blinking Cursor alleine ohne Startkapital, ohne Förderungen hingekriegt habe. Und ich finde es kann sich bis jetzt sehen lassen: https://feinkost.zoellner.de
LG Matthias
es sollte https://feinkost-zoellner.de heissen. Kleiner aber relevanter Fehler.
@@Rolf B
Barrierefreiheit ist ein Kernfeature, von dem keiner weiß, wann er darauf angewiesen ist.
Tja, wer weiß schon, wann die Sonne das nächste Mal auf den Monitor/das Display scheint? Gut, wenn da ausreichend Kontrast zwischen Text und Hintergrund ist.
Es zu realisieren verläuft aber oftmals konträr zu diversen Designvorstellungen
Ist das so? Und wenn, dann sind möglicherweise die Vorstellungen von Design falsch. Superfeine Schrift in Grau auf Weiß ist nicht Design, sondern Bullshit. (Ich spreche hier von Fließtext, nicht von Displayschrift wie auf diesem Albumcover.)
Und bei der Umsetzung von Designvorstellungen ist es auch eher Wissen, was man tun sollte und was nicht, als Zeitaufwand. (Gut, die Aneignung dieses Wissens erfordert auch etwas Zeit.) Wenn einem bspw. die System-Radiobuttons nicht gefallen, kann man sie durchaus durch eigene ersetzen – wenn man es denn richtig macht.
weshalb man sich von dieser Anforderung gegängelt fühlt (oder gar in seiner Freiheit behindert).
Ah ja, fReIhEiT. Wie die fReIhEiT, keine Maske zu tragen, um andere und sich selbst zu schützen. Das ist nicht Freiheit, sondern Dummheit und Arroganz.
🖖 Живіть довго і процвітайте
Alles zu seiner Zeit
Ich nehme mir die Freiheit meine Prioritäten zu setzen.
Barrierefreiheit hat an der Stelle einen Wert für mich, an der es auf meiner Seite, soweit für nicht behinderte Menschen flutscht, als dass ich mir auch um SEO, Barrierefreiheit Gedanken machen kann.
Ich finde, ich sollte erst Mal das eine hinkriegen und wenn ich mich im Netz so umsehe, dann wundere ich mich regelmäßig, wie sog. Profis für den Schrott, den Sie anderen im Netz zumuten auch noch Geld verlangen.
UND HEY!!! Mir macht es Spaß und dass finde ich ist doch die Hauptsache 😀
@@KallePeng
Alles zu seiner Zeit
Ich nehme mir die Freiheit meine Prioritäten zu setzen.
Barrierefreiheit hat an der Stelle einen Wert für mich, an der es auf meiner Seite, soweit für nicht behinderte Menschen flutscht, als dass ich mir auch um SEO, Barrierefreiheit Gedanken machen kann.
Barrierefreiheit hinterher machen? Funktioniert selten. Weil ziemlich aufwendig. Der Aufwand wird dann meist nicht aufgebracht und es wird gar nicht gemacht.
Wenn man Barrierefreiheit gleich von Anfang an mit bedenkt, kostet es kaum Aufwand. (Außer, wie gesagt, sich das nötige Wissen anzueignen. Aber davon kann man ja bei nachfolgenden Projekten weiterhin zehren.)
“Accessibility is like a blueberry muffin—you can’t push the berries in there afterward.”
—Cordelia McGee-Tubb
wenn ich mich im Netz so umsehe, dann wundere ich mich regelmäßig, wie sog. Profis für den Schrott, den Sie anderen im Netz zumuten auch noch Geld verlangen.
Da rennst du bei mir offene Türen ein.
UND HEY!!! Mir macht es Spaß und dass finde ich ist doch die Hauptsache 😀
Wenn du Webseiten für dich selbst machst, ja. Wenn du sie machst, damit andere sie benutzen, ist die Hauptsache, dass sie denen Spaß machen – oder zumindest nicht keinen Spaß machen.
🖖 Живіть довго і процвітайте
Hallo,
Barrierefreiheit hinterher machen? Funktioniert selten. Weil ziemlich aufwendig. Der Aufwand wird dann meist nicht aufgebracht und es wird gar nicht gemacht.
das ist so ziemlich dasselbe wie bei der Elektronik-Entwicklung. Eine Schaltung so zu entwerfen, dass sie zunächst mal funktioniert (sozusagen unter Laborbedingungen), ist verhältnismäßig einfach. Sie dann im Nachgang so zu ergänzen und zu ändern, dass sie auch robust und unempfindlich gegen Störungen ist, ist dann meist ein sehr großer Aufwand.
Denkt man aber von Anfang an auch an solche Störeinflüsse und lässt die dagegen nötigen Maßnahmen gleich mit einfließen, kostet das in Summe sehr viel weniger Arbeit und Nerven.
“Accessibility is like a blueberry muffin—you can’t push the berries in there afterward.”
—Cordelia McGee-Tubb
Sehr anschaulich, das gefällt mir!
Einen schönen Tag noch
Martin
MudGuard