CSS-Schriftgröße: Ein definitiver Schriftführer

CSS -Schriftgrößeneinstellung scheint einfach zu sein, aber es ist schwierig, tatsächlich zu operieren. Viele Entwickler verlassen sich auf wiederholte Anpassungen an den font-size -attributen, um visuelle Effekte zu erzielen, jedoch feststellen, dass die Rendering -Ergebnisse verschiedener Browser inkonsistent sind. Ein tiefes Verständnis der Einstellungen der CSS -Schriftgröße führt zum doppelten Ergebnis mit der halben Anstrengung.

Schlüsselpunkte

• CSS font-size Eigenschaften akzeptieren eine Vielzahl von Parametern, einschließlich absoluter, relativer und Längenwerte. Sofern nicht explizit überschrieben, erben Elemente die Schriftgröße des übergeordneten Elements, was für die Angabe der relativen Größe von entscheidender Bedeutung ist.
• Während Schlüsselwörter für die absolute Schriftgröße verwendet werden können, kann ihre genaue Größe zwischen den Browsern stark variieren, sodass Entwickler diesen groben Ansatz normalerweise vermeiden. Die Schlüsselwörter der relativen Schriftgröße passen die Schriftgröße entsprechend der Größe der übergeordneten Elemente an. Sie können die Schriftgröße mit absoluten Längenwerten festlegen, aber auch einige Probleme stoßen, und trotz potenzieller Probleme mit Zugänglichkeit sind Pixelwerte immer noch am besten geeignet.
• Entwickler glauben im Allgemeinen, dass in den meisten Fällen em oder % Einheiten die beste Lösung für den Umgang mit Web -Schriftarten sind, da sie genau miteinander skalieren und Browsertext -Größenänderungen unterstützen. Es wird empfohlen, die prozentuale Schriftgröße für die -Tags zu verwenden, um die Änderung der Textänderung in älteren Browsern zu verbessern.

font-size Eigenschaften

Das Attribut

font-size kann für ein HTML -Tag verwendet werden (auch wenn es normalerweise keinen Textinhalt wie <br> enthält). Es kann verschiedene absolute, relative oder Längenwertparameter zuweisen. Das Element wird das font-size des übergeordneten Elements erben, es sei denn, Sie überschreiben es. Dies ist besonders wichtig, wenn Sie eine relative Größe angeben.

Absolute Schriftgröße Schlüsselwörter

können mehrere Schlüsselwörter für die absolute Schriftgröße verwendet werden. Die Schriftgröße wird durch die Voreinstellungen des Browsers bestimmt, und das Element erbt nicht die Größe des übergeordneten Elements.

• font-size: xx-small;
• font-size: x-small;
• font-size: small;
• font-size: medium;
• font-size: large;
• font-size: x-large;
• font-size: xx-large;

Obwohl die meisten Browser diese Schlüsselwörter unterstützen, variiert die genaue Größe. Sie sind eine ziemlich grobe Art, Schriftgrößen festzulegen, die die meisten Entwickler im Allgemeinen vermeiden werden.

Schlüsselwörter der relativen Schriftgröße

Es können zwei Keywords der relativen Schriftgröße verwendet werden. Die Schriftgröße wird basierend auf der Größe der übergeordneten Elemente bestimmt:

• font-size: smaller;
• font-size: larger;

Wenn beispielsweise die Schriftgröße des übergeordneten Elements "mittel" ist, setzt der "größere" Wert das Element auf "groß". Andere Schriftgeräte werden normalerweise auf einen Koeffizienten von etwa 1,2 angepasst, aber auch hier gibt es keinen Standard und die Browserergebnisse sind unterschiedlich.

Absolute Länge

font-size Attribute können die absolute Länge zuweisen:

• mm: mm, zum Beispiel 10mm.
• cm: cm, z. 1cm
• : Zoll, zum Beispiel in (~ = 10 mm). 0.39in
• : Pfund, 1PT wird normalerweise als 1/72 Zoll angenommen, z. pt 12pt
: Die Karte ist 12pt für 1PC.
• pc
: Pixel, zum Beispiel
• . px 14px
im Allgemeinen gibt es Probleme mit all diesen Messeinheiten. Millimeter, Zentimeter und Zoll sind für Bildschirm-basierte Medien ungenau. Pfund und Poker sind unzuverlässig, da das System unterschiedliche DPI -Einstellungen verwenden kann. Pixel scheinen am meisten zu passen, kann jedoch zu Barrierefreiheitsproblemen führen, da die Text nicht in IE geändert werden kann.

relative Länge

Attribute können Einheiten relativ zu ihrem übergeordneten Element -Schriftgröße zuweisen:

font-size

: 1EM entspricht der aktuellen Schriftgröße, so dass 2EM doppelt so groß ist.
• em
: 100% entsprechen der aktuellen Schriftgröße, so dass 200% doppelt so groß sind.
• %
: 1ex entspricht der Höhe des Buchstabens "x" in der aktuellen Schriftart.
• ex
Nur wenige Entwickler verwenden "Ex", aber es kann in einigen Fällen nützlich sein, in denen feinkörnige Schriftgrößen erforderlich sind, z. B. 1 EX anstelle von 0,525EM. Prozentsatz und

Größe sind äquivalent, wie 50% = 0,5Em, 100% = 1EM, 120% = 1,2EM usw. Einige Browser zeigen subtile Unterschiede, aber dies ist selten ein wichtiges Problem. Wenn Sie jedes Byte speichern möchten, können Sie die kürzeste Definition auswählen, d. H. 50% kürzer als 0,5 EM und 1Em kürzer als 100% kürzer.

em

Textgröße und Seitenzoom

Hier kommt die zusätzliche Komplexität. Die meisten Browser erlauben Benutzern:

Erhöhen oder verringern Sie die grundlegende Textgröße (Bildgröße bleibt unverändert)

1. Zoom in oder aus der Seite, damit sich alle Text und Grafiken entsprechend ändern oder
2. Ermöglichen Sie auch Textänderung und Seitenskalierung.

Um die Dinge weiter zu komplizieren, erlaubt Internet Explorer keine Elemente von Textgrößen, deren Schriftart in Pixel (PX) definiert ist.

Wenn Sie ein Entwickler sind, der von einem typografischen Hintergrund zum Webdesign gewechselt ist, ist es beunruhigend, den Benutzern so viel Strom zu bieten. Ihr Design kann durch die Benutzervergrößerung um 200% unterbrochen werden, reduzieren die Textgröße jedoch auf 50%. Und - nein - Sie können es nicht aufhalten. Sie sollten es auch nicht aufhalten.

CSS -Schriftgröße Empfehlungen

Es wird allgemein angenommen, dass in den meisten Fällen

oder

die beste Lösung ist. Web -Schriftarten können miteinander genau skaliert werden und unterstützen den Browsertext -Grenzwert. Ich empfehle auch, die prozentuale Schriftgröße auf dem em -Tag zu verwenden. Bei der Entwicklung einer Website empfehle ich auch, die folgenden Vorschläge zu machen: %

1. Schriftgröße und Seitenskalierung auf Standardwerte in allen Browsern vor dem Testen zurücksetzen (es hat mich mehrmals unvorbereitet!)
2. Versuchen Sie, in verschiedenen Browsern eine angemessene Textgröße und Seitenskalierungskombinationen zu verwenden, um sicherzustellen, dass der Text lesbar bleibt.

Haben Sie die Schriftgröße jemals zu Problemen verursacht? Hast du noch andere Tipps?

CSS Schriftgröße FAQs (FAQs)

Was ist der Unterschied zwischen der absoluten Schriftgröße und der relativen Schriftgröße in CSS?

In CSS kann die Schriftgröße unter Verwendung von absoluten oder relativen Werten festgelegt werden. Der absolute Wert ist festgelegt und ändert sich nicht gemäß der Größe des übergeordneten Elements. Sie sind in Einheiten wie Pixel (PX), Pfund (PT) oder Zentimetern (CM) definiert. Andererseits sind die relativen Werte dynamisch und ändern sich entsprechend der Größe des übergeordneten Elements. Sie werden mit Einheiten wie EM, REM oder Prozent (%) definiert. Die Auswahl der absoluten Schriftgröße und der relativen Schriftgröße hängt von den Entwurfsanforderungen und der Reaktionsfähigkeit der Webseite ab.

Wie funktionieren Em -Einheiten in der CSS -Schriftgröße?

EM -Einheiten sind skalierbare Einheiten, die für die Schriftgröße in CSS verwendet werden. Es hat die Schriftgröße in Bezug auf sein nächstgelegenes übergeordnetes Element. Wenn beispielsweise die Schriftgröße des übergeordneten Elements 20px beträgt, entspricht "1EM" 20px für das untergeordnete Element dieses Elements. Wenn die Schriftgröße nicht definiert ist, beträgt der Standardwert normalerweise 16px, so dass "1EM" 16px beträgt.

Wie kann man REM -Einheiten verwenden, um die Schriftgröße festzulegen?

REM -Einheit repräsentiert "root em". Es ist eher zum Stammelement (HTML) als zum übergeordneten Element. Dies bedeutet, dass 1REM gleich der Schriftgröße des Wurzelelements ist. Wenn die Schriftgröße des Stammelements 16px beträgt (die Standardgröße für die meisten Browser), entspricht 1REM 16px.

Was sind die VW -Einheiten in der CSS -Schriftgröße?

VW -Einheiten repräsentieren die Ansichtsfensterbreite. Es ist relativ zur Breite des Ansichtsfensters, wobei 1 VW 1% der Ansichtsfensterbreite entspricht. Mit dieser Einheit kann die Schriftgröße entsprechend der Bildschirmbreite eingestellt werden, was es zu einem hervorragenden Werkzeug für reaktionsschnelles Design macht.

Wie kann meine Schriftgröße mit CSS reagieren?

Um Ihre Schriftgröße ansprechend zu machen, können Sie relative Einheiten wie EM, REM oder VW verwenden. Diese Einheiten passen die Schriftgröße nach der Größe des übergeordneten Elements, der Größe des Stammelements oder der Ansichtsfensterbreite an. Auf diese Weise kann sich die Schriftgröße basierend auf der Bildschirmgröße oder der Größe des übergeordneten Elements dynamisch ändern.

Wie funktioniert die

in der CSS -Schriftgröße? calc() Mit der

-Funktion in

in CSS können Sie Berechnungen durchführen, um die Schriftgröße zu bestimmen. Es kann mit verschiedenen Einheiten verwendet werden, was es zu einem leistungsstarken Werkzeug zum Erstellen von reaktionsschnellen Designs macht. Sie können beispielsweise eine Schriftgröße mit calc() einstellen, eine Mischung aus festen Pixelwerten und relativen Ansichtsfensterwerten. calc() Welche Auswirkungen haben das

-attribut in

in CSS? font-size-adjust Mit dem

-attribut in

in CSS können Sie die X-Höhe der Schrift (die Höhe der Kleinbuchstaben) einstellen. Dies ist nützlich, wenn Sie alternative Schriftarten verwenden, da sie sicherstellt, dass die X -Höhe beibehalten wird und dass die Lesbarkeit konsistent ist, unabhängig davon, welche Schriftart verwendet wird. font-size-adjust

Wie verwendet ich CH -Einheiten in der CSS -Schriftgröße?

Die Breite der CH -Einheit in CSS relativ zur Schriftart "0" (Null) Breite der verwendeten Schriftart. Diese Einheit ist nützlich, wenn Sie die Breite eines Elements basierend auf den darin enthaltenen Zeichen festlegen möchten, z. B. die Breite einer Schaltfläche basierend auf der Länge des internen Textes festlegen.

Was ist die LH -Einheit in der CSS -Schriftgröße?

lh Einheit repräsentiert "Fahrhöhe". Seine Zeilenhöhe relativ zum Element. Diese Einheit ist nützlich, wenn Sie die Höhe eines Elements basierend auf der Zeilenhöhe festlegen möchten, z. B. das Erstellen eines vertikalen Rhythmus in Ihrem Design.

Wie kann ich Ex -Einheiten in der CSS -Schriftgröße verwenden?

Die Ex -Einheit in CSS relativ zur x Höhe der Stromschrift. x Höhe ist normalerweise die Höhe von Kleinbuchstaben (z. B. "x"). Diese Einheit ist nützlich, wenn Sie die Höhe eines Elements basierend auf X -Höhe einstellen möchten, z.

Das obige ist der detaillierte Inhalt vonCSS-Schriftgröße: Ein definitiver Schriftführer. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!