Inhaltsverzeichnis
px
em
pt
Konvertierung
Heim Web-Frontend HTML-Tutorial Spezifische Analyse der Schriftgrößeneinheiten px, em, pt in HTML

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

Jul 21, 2017 am 09:21 AM
html 单位 大小

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!

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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Tabellenrahmen in HTML Tabellenrahmen in HTML Sep 04, 2024 pm 04:49 PM

Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.

Verschachtelte Tabelle in HTML Verschachtelte Tabelle in HTML Sep 04, 2024 pm 04:49 PM

Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.

HTML-Rand links HTML-Rand links Sep 04, 2024 pm 04:48 PM

Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.

HTML-Tabellenlayout HTML-Tabellenlayout Sep 04, 2024 pm 04:54 PM

Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.

HTML-geordnete Liste HTML-geordnete Liste Sep 04, 2024 pm 04:43 PM

Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele

HTML-Eingabeplatzhalter HTML-Eingabeplatzhalter Sep 04, 2024 pm 04:54 PM

Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.

Text in HTML verschieben Text in HTML verschieben Sep 04, 2024 pm 04:45 PM

Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.

Wie analysiert und verarbeitet man HTML/XML in PHP? Wie analysiert und verarbeitet man HTML/XML in PHP? Feb 07, 2025 am 11:57 AM

Dieses Tutorial zeigt, wie XML -Dokumente mit PHP effizient verarbeitet werden. XML (Extensible Markup-Sprache) ist eine vielseitige textbasierte Markup-Sprache, die sowohl für die Lesbarkeit des Menschen als auch für die Analyse von Maschinen entwickelt wurde. Es wird üblicherweise für die Datenspeicherung ein verwendet und wird häufig verwendet

See all articles