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!