16 Stimmen

Gibt es praktische Gründe für die Verwendung von "em" anstelle von "pt"-Schriftgrößeneinheiten?

Eine CSS-Regel, die ich gelernt habe, besagt, dass man die relative "em"-Schriftgrößeneinheit anstelle der absoluten "pt" verwenden sollte. Die allgemeine Idee ist, die Schriftgröße in Ihrem body-Tag auf z. B. "94%" zu setzen und dann alle anderen Elemente mit einer "em"-Größe wie dieser zu versehen. Der Grund dafür ist:

  • Sie können dann die relative Größe aller Schriftgrößen auf Ihrer Website ändern, indem Sie die Schriftgröße des Körpers an einer Stelle ändern
  • Die Benutzer können die Größe der Schriftarten selbst ändern, da sie in "em" definiert sind.

Wenn ich jedoch "em" anstelle von "pt" verwende, stoße ich immer wieder auf Probleme wie das folgende, bei dem ein Element mit Schriftgröße in ein anderes Element mit Schriftgröße eingebettet wird und dadurch winzig wird (im folgenden Fall ist ein Vokabelwort .8 von .8 und das andere .8 von 1,2).

<html>
<head>
    <style type="text/css">
        body {
            font-size: 94%;
        }
        p {
            font-size: .8em;
        }
        li {
            font-size: 1.2em;
        }
        .vocabulary {
            font-size: .8em;
        }
    </style>
</head>
<body>
    <p>This is an <span class="vocabulary">egregious</span> test.</p>
    <ul>
        <li>This is in a <span class="vocabulary">superb</span> list.</li>
    </ul>
</body>
</html>

In sehr einfachen, unkomplizierten HTML-Seiten ist das natürlich kein Problem, aber in der realen Welt mit importierten Stylesheets, die Sie vielleicht nicht einmal erstellt haben, und mit dynamischen Seiten, bei denen Steuerelemente in andere Steuerelemente eingebettet sind, die alle HTML mit vielleicht Inline-Styling ausgeben, finde ich, dass Websites mit "em"-Einheitsschriftgrößen manchmal unmöglich zu pflegen sind und dass der Weg, die Schriftgröße unter Kontrolle zu bekommen, darin besteht, alles in harte "px"-Größen zu konvertieren.

Außerdem habe ich gerade die vier wichtigsten Browser überprüft, und jeder von ihnen verfügt über Hotkeys, mit denen sich die Größe von "pt"-Schriften vergrößern und verkleinern lässt.

Hier sind also meine Fragen:

  • Gibt es irgendeinen realen Grund, warum ich "em" statt "pt" verwenden sollte?
  • gibt es einen Trick bei der Verwendung von "em" Größen, so dass ich nicht in die eingebettete Schriftgröße Problem oben laufen?

1voto

Samiksha Punkte 6042

Px : ändert sich mit der Bildschirmauflösung und anderen abhängigen Faktoren

em: Unabhängig von der Bildschirmauflösung ist sie für alle gleich.

0 Stimmen

Ich meinte natürlich "pt", nicht "px", sorry. Ursprünglichen Beitrag bearbeitet :-)

1voto

Brandon Rhodes Punkte 75647

Einige professionelle CSS-Entwickler, die ich kenne, verwenden "px", um die Schriftgrößen in ihrem Haupt-Stylesheet für moderne Browser zu definieren, und haben dann ein separates Stylesheet für IE6, das sie mit relativen Einheiten angibt. Auf diese Weise erreichen sie Benutzerfreundlichkeit und ermöglichen die Vergrößerung der Schrift in allen Browsern, ohne jedoch Kompromisse bei der Gestaltung in modernen Browsern eingehen zu müssen.

(Sie gehen sogar noch weiter: Ihr IE6-Stylesheet schaltet die meisten Blockformatierungen aus und verwendet nur ein allgemeines, mobiles Aussehen. Auf diese Weise können IE6-Benutzer ein einfaches Layout sehen, und alle anderen erhalten den professionellen Look, bei dem die Blöcke tatsächlich korrekt schweben).

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X