Spezifische Analyse der Schriftgrößeneinheiten px, em, pt in HTML

黄舟
Freigeben: 2017-07-21 09:21:16
Original
3759 Leute haben es durchsucht

Es gibt drei gängige Einheiten zum Definieren der Schriftgröße auf Webseiten: px, em, pt

px

px ist die Abkürzung für Pixel, eine auf Pixel basierende Einheit Beim Surfen im Internet ändern sich der Text und die Bilder auf dem Bildschirm mit der Auflösung des Bildschirms. Ein Bild mit einer Breite von 100 Pixel nimmt bei einer Auflösung von 800 x 600 jedoch 1/8 der Bildschirmbreite ein Bei einer Auflösung von 1024×768 nimmt es nur 1/8 der Bildschirmbreite ein. Wenn daher bei der Definition der Schriftgröße px als Einheit verwendet wird, wird der tatsächlich vom Benutzer angezeigte Text „kleiner“ (natürliche Längeneinheit) und möglicherweise sogar unklar, sobald der Benutzer die Anzeigeauflösung von 800 auf 1024 ändert , was sich auf Durchsuchen auswirkt.

em

em: % ist eine relative Einheit und eine relative Längeneinheit. Es bezieht sich ursprünglich auf die Breite des Buchstabens M, daher der Name em. Jetzt bezieht es sich auf das Vielfache der Zeichenbreite und seine Verwendung ähnelt einem Prozentsatz, wie zum Beispiel: 0,8em, 1,2em, 2em usw. Normalerweise 1em=16px. , eine universelle Einheit, die im Allgemeinen zur Messung der Länge verwendet wird (z. B. die Ränder und der Abstand von Elementen). Bei der Angabe von Schriftgrößen bezieht sich die Einheit em auf die Schriftgröße des übergeordneten Elements.

Angesichts der Schriftgröße eines übergeordneten Elements auf einer Seite können Sie die Größe aller Elemente proportional ändern, indem Sie ein Element anpassen. Es kann frei skaliert werden, um beispielsweise skalierbare Stylesheets zu erstellen.

pt

PT ist die Abkürzung für Punkt (Pfund), eine Maßeinheit mit fester Länge und einer Größe von 1/72 Zoll. Wenn Sie pt als Texteinheit im Web verwenden, ist die Schriftgröße auf verschiedenen Bildschirmen gleich (gleiche Auflösung), was sich möglicherweise auf den Schriftsatz auswirkt, aber es ist sehr praktisch, pt in Word zu verwenden. Denn der Hauptzweck der Verwendung von Word ist nicht das Durchsuchen auf dem Bildschirm, sondern das Ausgeben und Drucken. Beim Drucken in eine Entität ist pt als natürliche Längeneinheit praktisch und praktisch: Beispielsweise verwenden normale Dokumente in Word „Song-Schriftart 9pt“, Titel verwenden „Helvetica 16pt“ usw. Ganz gleich, wie der Computer eingestellt ist, das wird der Fall sein immer so groß sein, wenn es gedruckt wird.

Konvertierung

Die Standardschrifthöhe des Browsers beträgt 16px, sodass der nicht angepasste Browser 1em=16px anzeigt, was 1px=0,0625em bedeutet. Um die Konvertierung der Schriftgröße zu vereinfachen, können Sie im Textkörper in CSS global die Schriftgröße = 62,5 % deklarieren. Dies bedeutet, dass die Standardschriftgröße als 16 Pixel * 0,625 = 10 Pixel definiert ist. Das untergeordnete Element erbt die Schriftgröße des übergeordneten Elements. Also 1em=10px, also 12px=1,2em. Die Konvertierung zwischen px und em kann über 10 erfolgen. Die Definition von „font-size=0.625em“ oder die direkte Definition von „12px“ hat jedoch keine Auswirkung. Außerdem muss bei der Verarbeitung chinesischer Zeichen durch den IE Folgendes beachtet werden: Die durch die obige Methode erhaltenen 12px (1,2em) chinesischen Zeichen entsprechen nicht der direkt durch 12px im IE definierten Schriftgröße, sind jedoch etwas größer. Ersetzen Sie einfach 62,5 % durch 63 %.


Die Umrechnungsformel zwischen pt und px ist ebenfalls relativ einfach, pt=px mal 3/4.

Das obige ist der detaillierte Inhalt vonSpezifische Analyse der Schriftgrößeneinheiten px, em, pt in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage