Gunnar Bittersmann: Unverständnis von CSS-Eigenschaften; Hintergrund der aktiven Navigationsauswahl ändern

Beitrag lesen

problematische Seite

@@HTML_go

Ich war am "Bearbeiten" des Beitrags, weil ich merkte, dass ich schlecht gefragt / formuliert habe. Beim dritten Bearbeiten (wenn ich richtig gezählt habe), wurden die Änderungen aber nicht übernommen, mit der Meldung (so ähnlich), dass ich keine Zugriffsrechte für die Seite habe ...

Vermutlich war dein Zeitfenster, in welchem du deine Beiträge noch editieren kannst, inzwischen zu.

Ich bin zu dem Schluss gekommen, dass sans-serif (serifenlose Schriftarten) für einen Webauftritt doch eher besser geeignet sind. Oder gibt es da andere Meinungen?

Ja, gibt es. Auf hochauflösenden Displays sind Serifenschriften genausogut lesbar wie serifenlose. Oder besser, weil die Serifen dem Auge zusätzlichen Halt geben. Heißt: für die Lesbarkeit einer Schrift sind andere Dinge (wie bspw. große x-Höhe, weit offene Punzen) maßgeblich, nicht ob Serifen oder nicht.

Wenn der Charakter einer Serifenschrift besser zum Inhalt deiner Seite passt, dann nimm eine Serifenschrift. Wenn der Charakter einer Serifenlosen besser zum Inhalt deiner Seite passt, dann nimm eine Serifenlose.

(Man könnte auch per media query auf niedrigauflösenden Displays serifenlose Schrift darstellen und auf hochauflösenden Displays Serifenschrift: Beispiel.)

Also wäre mein Code, den ich oben gezeigt habe, nicht sehr sinnvoll, denn "Georgia" ist ja eine Serifenschriftart (mit "Schnörkeln"); die liebe ich zwar mehr, aber das tut ja nichts zur Sache.

Ich mag Georgia auch, insb. die Kursive davon. Allerdings ist Georgia schon ziemlich alt und kommt deshalb ohne OpenType-Features daher. Und da stören mich dann:

  1. Mediävalziffern. Ich mag Versalziffern einfach lieber.
  2. Es werden keine automatischen Ligaturen gesetzt.

Dein Code font-family: Georgia, Verdana, Helvetica, Arial, sans-serif; ist aber aus anderem Grund nicht sehr sinnvoll: i.d.R. will man im font stack ähnliche Schriften haben. Wenn bspw. Abril Text auf einem System nicht installiert ist, dann nimm Georgia; wenn Georgia auch nicht verfügbar ist, dann nimm die Standard-Serifenschrift dieses Systems.

Oder man entscheidet sich für serifenlose Schriften. Aber für eine Angabe von wild gemischten serifenlosen und Serifenschriften sollte man schon einen guten Grund haben – oder es nicht tun.

das hier gefunden (ohne lang zu kucken): https://www.lukas-rudrof.de/blog/15-besten-open-source-schriftarten.

Huch, Abril Fatface soll open source sein? Ich bin ganz sicher, dass die Schriftschnitte Abril Text und Abril Display es nicht sind.

Und bei Fira Sans ist als Designer nicht Erik Spiekermann angegeben? Tss.

Ändere ich nun den CSS-Code so um,

html {
  line-height: 1.5;
  font-family: Arvo, Helvetica, sans-serif;
}

um die openSource-Schriftart "Arvo" zu nutzen, sehe ich (lokal) keinerlei Änderung im Schriftbild.

Hast du denn die Arvo lokal auf deinem System installiert? Wenn nicht, kein Wunder, dass du keine Änderung siehst. Wenn der Browser den Font nicht findet, kann er den Text nicht in dieser Schrift darstellen und nimmt sich halt die nächste Schrift aus dem font stack.

Wenn du den Text in Arvo gesetzt sehen willst, installiere die Schriftart auf deinem System. Wenn alle (naja, fast alle) Besucher deiner Seite den Text in Arvo gesetzt sehen sollen, packe die Fontdateien auf deinen Webserver und binde Arvo als Webfont ein (@font-face-Regeln).

Und mich wundert auch, warum auf dieser Seite https://www.winkelb.com/css-font-family hier im CSS nicht "html", sondern "body" verwendet wird:

Solange du nicht Inhalte des head-Elements anzeigen willst, sollte es ziemlich egal sein, ob man die Brotschrift für html oder für body angibt.

body {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12px;
}

Abgesehen davon, dass hier auch noch "px" als Größenangabe verwendet werden ("em" ist doch sinnvoller?)

Ja, ist es. Und vor allem: eine lesbare Schriftgröße. 12px ist Unsinn. Ich nenne das: graue Linie.

Und der font stack ist auch Quatsch. Auf Systemen, wo sowohl Arial (bäh!) als auch Helvetica (weniger bäh) installiert ist, soll Arial verwendet werden anstatt Helvetica? Ernsthaft? Wirklich? Helvetica gehört vor Arial (wenn Arial da überhaupt reingehört).

kann es sein, dass die Seite nicht auf dem neuesten Stand ist?

Ja, die Verwendung von Verdana deutet darauf hin.

Kwakoni Yiquan

--
Ad astra per aspera
0 117

Unverständnis von CSS-Eigenschaften; Hintergrund der aktiven Navigationsauswahl ändern

HTML_go
  • javascript
  1. 0
    Rolf B
    1. 0
      HTML_go
  2. 0
    Auge
    • css
    • html
    1. 0
      Rolf B
      1. 0
        Auge
        1. 0
          Gunnar Bittersmann
          • html
      2. 0

        Navigations-Tutorial im SELF-Wiki

        Matthias Scharwies
        1. 0
          Gunnar Bittersmann
          • aria
          • html
          • ux
        2. 0
          HTML_go
          1. 0
            Auge
      3. 0
        Gunnar Bittersmann
        • begriff
        • html
    2. 0
      Gunnar Bittersmann
      • css
    3. 0
      HTML_go
      1. 0
        Auge
        1. 0
          Gunnar Bittersmann
          • html
  3. 0
    Gunnar Bittersmann
    • css
    • html
    1. 0
      HTML_go
      1. 0
        Gunnar Bittersmann
        1. 0
          Matthias Scharwies
        2. 0
          HTML_go
          1. 0
            Gunnar Bittersmann
            • grafik
            • suchmaschinen
            • typografie
            1. 0
              Rolf B
              1. 0
                Gunnar Bittersmann
                • grafik
            2. 0
              HTML_go
            3. 0
              HTML_go
              1. 0
                Gunnar Bittersmann
                • css
                • grafik
                • typografie
                1. 0
                  HTML_go
                  1. 0

                    Logo als SVG

                    Matthias Scharwies
                    1. 0
                      HTML_go
                      1. 0
                        HTML_go
                  2. 0
                    Gunnar Bittersmann
                    • grafik
                    1. 0
                      Rolf B
                      1. 0
                        HTML_go
                      2. 0
                        Gunnar Bittersmann
                        • menschelei
                        1. 0
                          MudGuard
                    2. 0
                      HTML_go
                      1. 0
                        Gunnar Bittersmann
                        1. 0
                          HTML_go
              2. 0
                HTML_go
                1. 0

                  ein Projekt nach Prioritäten sortieren

                  Matthias Scharwies
                  1. 0
                    HTML_go
                    1. 0
                      Auge
                      1. 0
                        HTML_go
                        1. 0
                          Auge
            4. 0
              HTML_go
              1. 0
                HTML_go
                1. 0
                  HTML_go
                  1. 0
                    Gunnar Bittersmann
                    • css
                    1. 0
                      HTML_go
                2. 0
                  Gunnar Bittersmann
                  • css
                  • font
                  • typografie
                  1. 0
                    HTML_go
                    1. 0
                      HTML_go
                      1. 0

                        Begriffe lokal, google-Fonts

                        Matthias Scharwies
                        1. 0
                          HTML_go
                          1. 0
                            Matthias Scharwies
                            1. 0
                              Rolf B
                              1. 0
                                Matthias Scharwies
                            2. 0
                              HTML_go
                        2. 0
                          Gunnar Bittersmann
                          • css
                          • font
                          1. 0
                            Gunnar Bittersmann
      2. 0
        Rolf B
      3. 0
        Auge
        1. 0
          HTML_go
          1. 0
            Auge
            1. 0
              Gunnar Bittersmann
              • css
            2. 0
              HTML_go
              1. 0
                Gunnar Bittersmann
                • css
                • font
                • html
                1. 0
                  HTML_go
  4. 0
    Rolf B
    1. 0
      HTML_go
      1. 0
        Gunnar Bittersmann
        • css
        1. 0
          HTML_go
        2. 0
          HTML_go
          • browser
          • css
    2. 1
      Gunnar Bittersmann
      • css
      1. 0
        Rolf B
        1. 0
          HTML_go
      2. 0
        Auge
      3. 0
        Gunnar Bittersmann
      4. 0
        HTML_go
        1. 0
          Auge
          • browser
          • css
          1. 0
            Gunnar Bittersmann
            1. 0
              Auge
              1. 0
                Gunnar Bittersmann
        2. 0
          Gunnar Bittersmann
          1. 0
            HTML_go
            1. 0
              Gunnar Bittersmann
              1. 0
                HTML_go
  5. 0
    Gunnar Bittersmann
    • barrierefreiheit
    • html
    • performance
    1. 0
      HTML_go
    2. 0
      HTML_go
      1. 0
        HTML_go
        1. 0
          Rolf B
          1. 0
            HTML_go
            1. 0
              Gunnar Bittersmann
              • markdown
              • zu diesem forum
              1. 0
                HTML_go
      2. 0
        HTML_go
      3. 0
        Gunnar Bittersmann
        • html
        • performance
        • typografie
        1. 0
          HTML_go
          1. 0
            Gunnar Bittersmann
            • css
            • html
            • typografie
            1. 0
              HTML_go
              1. 0
                Rolf B
                1. 0
                  HTML_go
                  1. 0
                    Rolf B
                    1. 0
                      Gunnar Bittersmann
                      • css
                  2. 0
                    Tabellenkalk
                    1. 0
                      Gunnar Bittersmann
                      • css
                      1. 0

                        Fehler im verlinkten Adventkalenderartikel

                        Auge
                        • adventskalender
                        • php
                        1. 0
                          Rolf B
                          1. 0
                            Matthias Scharwies
                            • adventskalender
                            • php
                            • sonstiges
                            1. 0
                              Rolf B
                              1. 0
                                Matthias Scharwies
                    2. 0
                      HTML_go
                2. 0
                  Gunnar Bittersmann
                  • inclusive design
                  1. 0
                    Gunnar Bittersmann
    3. 0
      Gunnar Bittersmann
      • star trek
      • typografie
      1. 0
        Gunnar Bittersmann