Phil: CSS Text mit runden Kanten

Hallo Zusamen,

Ich habe ein kleines Problem.

Folgender CSS Text benutze ich, um einen Countdown auf meiner Website relativ gross darzustellen.

.stil4 {
font-size: 50px;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight:100;
}

Leider wirkt die Schrift in dieser Grösse nicht mehr besonders abgerundet, man kann deutlich die Abstufungen an runden Kanten erkennen.

Wie kann ich die Schrift-Qualität verbessern? Gibt es eine Art Anti Aliasing (Kantenglättung) für CSS?

Danke und Gruss Phil

  1. Leider wirkt die Schrift in dieser Grösse nicht mehr besonders abgerundet, man kann deutlich die Abstufungen an runden Kanten erkennen.

    Wie kann ich die Schrift-Qualität verbessern? Gibt es eine Art Anti Aliasing (Kantenglättung) für CSS?

    Leider gibt es kein AA für CSS. Du musst also entweder versuchen auf eine andere Schriftart auszuweichen oder Grafiken (inkl. Fallback) einzubinden, die dann schön abgerundet sind.

    1. Grüßi Gott,

      Leider gibt es kein AA für CSS. Du musst also entweder versuchen auf eine andere Schriftart auszuweichen oder Grafiken (inkl. Fallback) einzubinden, die dann schön abgerundet sind.

      Falsch, ganz falsch!

      1. der Browser udn das Betriebssystem sind für die Darstellung der Schrift zuständig. Die verwendete Schriftart hat damit nichts zu tun.

      2. Text ist Text und bleibt Text. Man verndet keine Bildedateien um Texte aus rein optischen Gründen zu ersetzen.

      3. Bei unnötigem Firlefanz wie einem Counter kann man über Punkt 2. hinwegsehen.
      ;)

      1. Hi,

        Leider gibt es kein AA für CSS. Du musst also entweder versuchen auf eine andere Schriftart auszuweichen oder Grafiken (inkl. Fallback) einzubinden, die dann schön abgerundet sind.

        Falsch, ganz falsch!

        1. der Browser udn das Betriebssystem sind für die Darstellung der Schrift zuständig. Die verwendete Schriftart hat damit nichts zu tun.

        das stimmt zwar, aber falsch ist die Aussage dennoch nicht. Es gibt durchaus Schriftarten, die in extremer Größe, bei der ohne anti-aliasing jedes Pixel als Block dargestellt wird, noch ansprechend aussehen.

        freundliche Grüße
        Ingo

        1. Hi,

          Leider gibt es kein AA für CSS. Du musst also entweder versuchen auf eine andere Schriftart auszuweichen oder Grafiken (inkl. Fallback) einzubinden, die dann schön abgerundet sind.

          Falsch, ganz falsch!

          1. der Browser udn das Betriebssystem sind für die Darstellung der Schrift zuständig. Die verwendete Schriftart hat damit nichts zu tun.
            das stimmt zwar, aber falsch ist die Aussage dennoch nicht. Es gibt durchaus Schriftarten, die in extremer Größe, bei der ohne anti-aliasing jedes Pixel als Block dargestellt wird, noch ansprechend aussehen.

          Danke, genau das meinte ich.

      2. Hallo

        ... Du musst also entweder versuchen auf eine andere Schriftart auszuweichen oder Grafiken (inkl. Fallback) einzubinden, die dann schön abgerundet sind.

        Falsch, ganz falsch!

        1. der Browser udn das Betriebssystem sind für die Darstellung der Schrift zuständig. Die verwendete Schriftart hat damit nichts zu tun.

        Grundsätzlich richtig. Aber was nutzt das dem Besucher der Seite, dessen OS und Browser das grundsätzlich oder auch bei einigen Schriften eben nicht bzw. nicht gut genug beherrschen? Klar, ist sein Ding, aber wenn ich als Anbieter einer Website diesem Szenario entgehen will, sollte man dies wirklich mit dem Verweis auf die Nichtzuständigkeit verweigern?

        1. Text ist Text und bleibt Text. Man verndet keine Bildedateien um Texte aus rein optischen Gründen zu ersetzen.

        Warum nicht? Wenn ich, gerade für Überschriften bestimmte graphische Effekte haben will, benutze ich eine Graphik. Wird sie nicht angezeigt, kommt halt der Alternativtext zum Einsatz, dazu ist er da. In qualifizierten Browsern übrigens mit den für eine textuelle Überschrift vorgesehenen Styles.

        Tschö, Auge

        --
        Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
        (Victor Hugo)
        Veranstaltungsdatenbank Vdb 0.2
        1. Hallo Auge,

          Warum nicht? Wenn ich, gerade für Überschriften bestimmte graphische Effekte haben will, benutze ich eine Graphik. Wird sie nicht angezeigt, kommt halt der Alternativtext zum Einsatz, dazu ist er da. In qualifizierten Browsern übrigens mit den für eine textuelle Überschrift vorgesehenen Styles.

          Für überschriften oder logotexte ist es gerade so vertretbar (natürlich mit alternativtext). Sonst überwiegen die Nachteile, wie nicht markierbarer Text, viel zu große Datenmengen, fehlende Skalierung, fehlende Suche, nicht betriebssystem-konforme darstellung usw.

          Aber auch bei Überschriften sollte man Bilder vermeiden. Schon alleine weil beim Drucken die Schriftaufösung dann so niedrig ist. Das kann man zwar auch evtl. mit Druckerstylesheets usw. lösen, aber das ganze wird dann unnötig komplex und fehleranfällig.

          Jonathan

          1. Hallo

            Wenn ich, gerade für Überschriften bestimmte graphische Effekte haben will, benutze ich eine Graphik.

            Für überschriften oder logotexte ist es gerade so vertretbar (natürlich mit alternativtext). Sonst überwiegen die Nachteile, wie nicht markierbarer Text, viel zu große Datenmengen, fehlende Skalierung, fehlende Suche, nicht betriebssystem-konforme darstellung usw.

            Eine in Zierschrift ausgeführte Überschrift betriebssystemkonform? Nee, mal ehrlich, es ist schon klar, dass das die Ausnahme sein sollte. Nach meinem Verständnis käme das nur in den auch von dir gutierten Fällen in Frage.

            Aber auch bei Überschriften sollte man Bilder vermeiden. Schon alleine weil beim Drucken die Schriftaufösung dann so niedrig ist. Das kann man zwar auch evtl. mit Druckerstylesheets usw. lösen, aber das ganze wird dann unnötig komplex und fehleranfällig.

            Ja, der Ausdruck ist ein bestechendes Argument. Da fällt mir ein, dass es irgendwo in den Weiten des Netzes einen Artikel gibt (finde jetzt leider den Link nicht), der beschreibt, wie man eine Überschrift mit einem Hintergrundbild in einem <span> versieht und dieses <span> vor dem Text platziert um diesen zu verbergen. Als Hintergrundbild wird es aber (im Normalfall) im Gegensatz zum darunter liegenden Text nicht mit ausgedruckt.

            Tschö, Auge

            --
            Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
            (Victor Hugo)
            Veranstaltungsdatenbank Vdb 0.2
      3. Grüßi Gott,

        Leider gibt es kein AA für CSS. Du musst also entweder versuchen auf eine andere Schriftart auszuweichen oder Grafiken (inkl. Fallback) einzubinden, die dann schön abgerundet sind.

        Falsch, ganz falsch!

        1. der Browser udn das Betriebssystem sind für die Darstellung der Schrift zuständig. Die verwendete Schriftart hat damit nichts zu tun.

        Ich schrieb auch nicht, dass die Schriftart etwas mit dem Antialiasing zu tun hat. Dennoch gibt es Schriftarten, die ohne AA besser aussehen als andere.

        1. Text ist Text und bleibt Text. Man verndet keine Bildedateien um Texte aus rein optischen Gründen zu ersetzen.

        2. Bei unnötigem Firlefanz wie einem Counter kann man über Punkt 2. hinwegsehen.
          ;)

        Ja, warum schreibst du denn Punkt 2, wenn du genau in Punkt 3 das ganze für (im Falle eines Counters) unwichtig hälst?

        1. Hallo Glory,

          Ich schrieb auch nicht, dass die Schriftart etwas mit dem Antialiasing zu tun hat. Dennoch gibt es Schriftarten, die ohne AA besser aussehen als andere.

          Es gibt vor allem Schriften, die ohne AA schlechter aussehen als andere Schriften ohne AA. Mit AA sehen eigentlich alle Schriften gut aus. Ohne AA hängts vom Betriebbsystem ab und wie gut Hinting, Kerning usw. funktioniert. Auf Linux sehen fast alle Schriften ohne AA sehr schlecht aus, während man unter Windows mit Arial, MS Sans Serif, Tahoma, Verdana und anderen Standardschriften durchaus noch leben kann. Wenn die Schrift größer dargestellt wird, werden abe auch da die Kanten pixeliger aussehen. Deswegen hat Windows ja auch standardmäßig Kantenglättung bei großen und sehr kleinen Schriftgrößen aktiviert.

          Jonathan

  2. Hallo Zusamen,

    Hallo,

    Wie kann ich die Schrift-Qualität verbessern? Gibt es eine Art Anti Aliasing (Kantenglättung) für CSS?

    Um die Darstellung der Schrift brauchst du dich nicht kümmern, das macht (zumindest bei MacOS und Windows) das Betriebssystem des Anwenders, wenn er es den will.
    Wie es bei Linux aussieht, weiß ich spontan nicht, aber ich denke mal da ist es ähnlich.

    Gruß, Volker

    --
    „I conclude that there are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies."
    - Tony Hoare
    1. Hi,

      Wie es bei Linux aussieht, weiß ich spontan nicht, aber ich denke mal da ist es ähnlich.

      Ähnlich. Hier kümmert sich nicht das Betriebssystem sondern der Windowmanager und der Fontrenderer darum. Da beide beliebig austauschbar sind, kann man auch nicht leicht von einer bestimmten Konstellation ausgehen.