KallePeng: Frage zum Wiki-Artikel „Schriftformatierung“ betrifft Datenvolumen

problematische Seite

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.

  • Erstens: Ich habe z.B. eine .css-Datei, mit vordefinierten 14 Schriftschnitten.
  • Zweitens Ich binde diese wie o.g. ein.
  • Drittens: Ich nutze in meiner Seite aber nur 4 von 14 Schriftschnitten.
  • Frage: Werden die modernen Browser alle 14 Schriftschnitte vorladen, auch wenn aus dem Seitenaufbau hervor geht, das nur 4 von 14 definitiv genutz werden?
  • 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. Z.B. habe ich auf einem etwas langsameren Rechner beobachten können, dass der Edge-Browser z.B. bei Bildern ohne deklaration von loading:lazy bereits Bilder erst lädt, wenn sie in den Viewport gescrollt werden.
  1. 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

  2. problematische Seite

    @@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.

    🖖 Живіть довго і процвітайте

    --
    „Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“
    — @Grantscheam auf Twitter
    1. problematische Seite

      @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…

      1. problematische Seite

        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

        --
        Falls ihr euch wundert, warum ihr zur Zeit so schlecht aus der Wohnung kommt:
        Weihnachten steht vor der Tür. 🎄 🎄 🎄
        1. problematische Seite

          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

          1. problematische Seite

            Hallo MudGuard,

            hassu recht, hab mal ein paar Linefeeds ergänzt.

            Korrekter Mark/Kramdown-Satz ist nicht immer intuitiv...

            Rolf

            --
            sumpsi - posui - obstruxi
            1. problematische Seite

              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

              --
              Falls ihr euch wundert, warum ihr zur Zeit so schlecht aus der Wohnung kommt:
              Weihnachten steht vor der Tür. 🎄 🎄 🎄
      2. problematische Seite

        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

        --
        sumpsi - posui - obstruxi
        1. problematische Seite

          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:

          1. Veterinäramt
          2. Bauamt Landkreis
          3. Bauamt Gemeinde
          4. Finanzamt
          5. Ordnungsamt
          6. Berufsgenossenschaft
          7. Architekten
          8. Handwerker
          9. Chemie
          10. Lebensmittelgesetz
          11. Pflanzenzucht
          12. Kellerei
          13. Design (Verpackungen)
          14. Druckerei
          15. Zertifizierungs Institute
          16. Lebensmittel kontrollen
          17. Marktplätze
          18. Vertrieb
          19. Aquisition
          20. HTML
          21. CSS
          22. PHP
          23. JS
          24. SVG
          25. Fotografie / Video 25.a. responsives Design
          26. Familie
          27. Urlaub
          28. SEO
          29. Onlineshop
          30. Taste F12
          31. Barrierefreiheit

          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

          Bild meiner Netzwerkanalyse, will ja zeigen, dass ich es wenigstens versucht habe LOL

          1. problematische Seite

            es sollte https://feinkost-zoellner.de heissen. Kleiner aber relevanter Fehler.

        2. problematische Seite

          @@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.

          🖖 Живіть довго і процвітайте

          --
          „Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“
          — @Grantscheam auf Twitter
          1. problematische Seite

            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 😀

            1. problematische Seite

              @@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.

              🖖 Живіть довго і процвітайте

              --
              „Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“
              — @Grantscheam auf Twitter
              1. problematische Seite

                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

                --
                Falls ihr euch wundert, warum ihr zur Zeit so schlecht aus der Wohnung kommt:
                Weihnachten steht vor der Tür. 🎄 🎄 🎄