Verbessern Sie die Web -Typografie mit der Anpassung der CSS -Schriftgröße

css font-size-adjust Attribute: Ein leistungsstarkes Tool zur Verbesserung der Lesbarkeit von Webseiten -Typeting

Mit

font-size-adjust CSS -Attribut können Entwickler Schriftgrößen angeben, basierend auf der Höhe der Kleinbuchstaben und nicht der Höhe der Großbuchstaben, wodurch die Lesbarkeit des Webtextes erheblich verbessert wird, insbesondere bei Verwendung alternativer Schriftarten.

In diesem Artikel wird die Bedeutung von font-size-adjust Attributen und deren korrekte Verwendung in Projekten eingehend untersucht.

Die Bedeutung von

font-size-adjust Die meisten Websites bestehen hauptsächlich aus Text. Da Text auf einer Website von entscheidender Bedeutung ist, ist es besonders notwendig, den verwendeten Schriftarten besondere Aufmerksamkeit zu schenken. Durch die Auswahl der richtigen Schriftart kann ein angenehmes Leseerlebnis mitbringen, da die Website sonst das Lesen erschwert. Nach der Ermittlung der Schriftart müssen Sie normalerweise die entsprechende Schriftgröße auswählen.

Eigenschaften setzen die Schriftgröße aller Schriftarten auf der Website. Es wird jedoch häufig für die bevorzugte Schriftfamilie ausgewählt. Das Problem tritt auf, wenn die bevorzugte Schriftart aus irgendeinem Grund nicht verfügbar ist, der Browser verwendet eine der im CSS -Dokument aufgeführten alternativen Schriftarten, um den Text zu rendern.

font-size beispielsweise angesichts der folgenden CSS -Regeln:

Wenn der Browser "Lato" von Google Fonts nicht herunterladen kann, wird stattdessen die nächste alternative Schriftart, Verdana, verwendet. Der Wert

<code class="language-css">body {
  font-family: 'Lato', Verdana, sans-serif;
}</code>

wird jedoch höchstwahrscheinlich unter Berücksichtigung von "Lato" als von Verdana ausgewählt.

font-size

Seitenverhältnis von Web -Schriftarten

Für konstante Schriftgrößenwerte kann die visuelle Größe der Schriftart und ihre Lesbarkeit stark variieren. Dies gilt insbesondere für Texte wie Latein, die fallsempfindlich sind. In diesem Fall ist das Verhältnis der Höhe von Kleinbuchstaben zu seiner Höhe für Großbuchstaben ein wichtiger Faktor bei der Bestimmung der Lesbarkeit der Schriftart. Dieses Verhältnis wird oft als Seitenverhältnis der Schrift bezeichnet.

Wie bereits erwähnt, bleibt der Wert

, sobald er eingestellt ist, für alle Schriftfamilien gleich. Wenn sich das Seitenverhältnis der alternativen Schriftart jedoch zu der bevorzugten Schriftart zu unterschiedlich unterscheidet, kann dies die Lesbarkeit der alternativen Schriftart beeinflussen.

Die font-size

Eigenschaft ist in diesem Fall sehr wichtig, da Sie die X -Höhe aller Schriftarten auf denselben Wert einstellen können, wodurch die Lesbarkeit verbessert wird.

font-size-adjust

Wählen Sie den entsprechenden

Wert font-size-adjust aus Jetzt, da Sie verstehen, wie wichtig es ist, das Attribut

zu verwenden, lernen Sie, wie Sie es auf Ihrer Website verwenden. Diese Eigenschaft hat die folgende Syntax:

font-size-adjust Der Anfangswert von

<code class="language-css">font-size-adjust: none | <number></number></code>

ist

. Der Wert font-size-adjust bedeutet, dass der none -Werwert verschiedener Schriftreihen nicht angepasst wird. none

Sie können auch den Wert des font-size-adjust -attributs auf eine Zahl festlegen. Diese Zahl wird verwendet, um die x -Höhe aller Schriftarten auf einer Webseite auf denselben Wert zu berechnen. x Höhe entspricht der angegebenen Zahl multipliziert mit der Schriftgröße. Dies kann die Lesbarkeit kleiner Größe erheblich verbessern. Hier ist ein Beispiel für die Verwendung des font-size-adjust -attributs:

<code class="language-css">body {
  font-family: 'Lato', Verdana, sans-serif;
}</code>

Die x Höhe aller Schriftarten beträgt jetzt 20px * 0,6 = 12px. Die tatsächliche Größe einer bestimmten Schrift kann jetzt geändert werden, um sicherzustellen, dass die X -Höhe jederzeit bei 12 Pen verbleibt. Die neue angepasste Schriftgröße für eine bestimmte Schriftart kann unter Verwendung der folgenden Formel berechnet werden:

c = (a / a ') s.

Hier ist C die angepasste Schriftgröße, s ist der angegebene Schriftgrößenwert, A ist das Seitenverhältnis, das durch das font-size-adjust Attribut angegeben ist, und A 'ist das Seitenverhältnis der Schriftart, die sein muss angepasst.

Sie können font-size-adjust nicht auf einen negativen Wert setzen. Ein Wert von 0 bewirkt, dass der Text keine Höhe hat. Mit anderen Worten, der Text wird tatsächlich versteckt sein. Bei älteren Browsern wie Firefox 40 entspricht ein Wert von 0 der Einstellung font-size-adjust nach none.

In den meisten Fällen versuchen Entwickler normalerweise mehrere Schriftgrößenwerte, um festzustellen, welcher Wert für eine bestimmte Schriftart am besten ist. Dies bedeutet, dass sie idealerweise möchten, dass die X -Höhe aller Schriftarten gleich der x -Höhe ihrer bevorzugten Schriftart entspricht. Mit anderen Worten, der am besten geeignete Wert für das Attribut font-size-adjust ist das Seitenverhältnis der bevorzugten Schriftart.

Wie kann das Seitenverhältnis einer Schrift

bestimmen

Um das korrekte Seitenverhältnis einer Schriftart zu bestimmen, können Sie sich darauf verlassen, dass die Größe der Größe der Größe der Größe der Größe der von Ihnen angegebenen ursprünglichen Schriftgröße übereinstimmt. Dies bedeutet, dass in der vorhergehenden Gleichung a gleich 'gleich' sein sollte.

Der erste Schritt zur Berechnung des Seitenverhältnisses besteht darin, zwei Elemente zu erstellen. Beide Elemente enthalten einen einzelnen Buchstaben und seine umgebende Grenze (die beiden Buchstaben müssen gleich sein, da wir zwischen diesen beiden Elementen vergleichen müssen). Zusätzlich sind die font-size -attributwerte für beide Elemente gleich, aber nur eines von ihnen verwendet auch das Attribut font-size-adjust. Wenn der Wert von font-size-adjust gleich dem Seitenverhältnis einer bestimmten Schriftart entspricht, ist die Größe der beiden Buchstaben in jedem Element gleich.

Nutzung auf der Website font-size-adjust

Browser -Unterstützung: Derzeit unterstützt nur Firefox font-size-adjust standardmäßig. Beginnend mit den Versionen 43 und 30 unterstützen Chrome und Opera diese Eigenschaft nach dem FAD für experimentelle Webplattform (aktiviert in Chrome: // Flags). Edge und Safari unterstützen das font-size-adjust -attribut überhaupt nicht.

Wenn Sie sich für die Verwendung dieser Eigenschaft entscheiden, sollte der untere Browserunterstützung überhaupt kein Problem sein. Diese Eigenschaft ist unter Berücksichtigung der Rückwärtskompatibilität ausgelegt. Browser, die diese Eigenschaft nicht unterstützen, zeigt den Text normal an, während Browser, die diese Eigenschaft unterstützen, die Schriftgröße entsprechend dem Wert der font-size-adjust Eigenschaft anpasst.

Schlussfolgerung

Nachdem Sie dieses Tutorial gelesen haben, kennen Sie jetzt die Rolle der font-size-adjust -attribute, ihrer Bedeutung und der Berechnung der Seitenverhältnisse verschiedener Schriftarten.

Da font-size-adjust in älteren Browsern anmutig herabgestuft werden kann, können Sie es sofort verwenden, um die Lesbarkeit von Text auf Ihrer Produktionswebsite zu verbessern.

(Das Bild am Ende des Artikels entspricht dem Beginn des Artikels)

Das obige ist der detaillierte Inhalt vonVerbessern Sie die Web -Typografie mit der Anpassung der CSS -Schriftgröße. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!