Die Webinhalte -Richtlinien (WCAG) -Richtlinien (WCAG) schreibt keine minimale Schriftgr??e für Webinhalte vor. Die Lesbarkeit ist jedoch entscheidend. In diesem Artikel werden Best Practices für zug?ngliche Schriftgr??en untersucht, wobei der Schwerpunkt auf WCAG -Anforderungen und Nutzung von Browser -Standardeinstellungen liegt.

Lesbarkeit: Kontrast und Charaktervielfalt

WCAG priorisiert den Kontrast gegenüber einer festen Gr??e . Der Text muss ein Kontrastverh?ltnis von mindestens 4,5: 1 (3: 1 für gro?en Text) erfüllen. Tools wie den Kontrastprüfer von Webaim k?nnen helfen. Die Komplexit?t verschiedener Alphabete (rund 300 global) bedeutet, dass eine einzige Mindestgr??e nicht allgemein anwendbar ist. WCAG definiert "gro?en Text" basierend auf sprachspezifischen Mindestdruckgr??en, gemessen in Punkten (nicht Pixel). Für den r?mischen Text werden 18 Punkte (die je nach Bildschirmdichte 24px gleichsetzen k?nnen) als "gro?".

Im Wesentlichen gibt WCAG Kontrast an, keine pr?zise Schriftgr??e .

Glücklicherweise sind Browser -Standardstile von Natur aus zug?nglich. Nutzen wir sie.

Proportionen, keine festen Gr??en

Browser -Standardstile (User Agent Stylesheets) gehen den Autorenstilen und Benutzerstilen voraus. Viele Benutzer passen ihre Standard -Browser -Schriftgr??en an. Aufgrund von Faktoren wie übersetzung, Schriftladungsfehlern oder benutzerdefizierten Schriftarten (wie OpendySlexic) fehlt uns auch die vollst?ndige Kontrolle über Schriftfamilien.

Konzentrieren Sie sich daher auf Proportionen , nicht auf absolute Gr??en. Verwenden Sie CSS -Relativeinheiten (WCAG empfiehlt em -Einheiten), um die Inhaltskalen für die Umgebung des Benutzers angemessen sicherzustellen. Erw?gen Sie, rem und em -Einheiten konsequent zu verwenden (mit Ausnahme von Grenzen, bei denen Pixel h?ufig vorzuziehen sind).

Vermeiden Sie es, eine Basis -Schriftgr??e festzulegen

Vermeiden Sie es im Allgemeinen, font-size auf der :root festzulegen, , oder<code> Elemente. Lassen Sie die Standardgr??e des Browsers als Grundlinie dienen. Der WCAG 2.2 Working Draft legt nahe, dass die Standard -Schriftgr??e, die von gro?en Browsern für nicht spezifizierten Text verwendet wird, eine angemessene Grundlinie liefert.

Ausnahmen existieren. Ausführliche, dünne oder kurze X-Hirg-Schriftarten erfordern m?glicherweise eine etwas gr??ere Basis-Schriftgr??e, um einen ausreichenden Kontrast zu erreichen. Denken Sie daran: Kontrast, nicht Gr??e, ist die wichtigste WCAG -Metrik. Ungew?hnliche Schriftarten erfordern m?glicherweise gr??ere Gr??en, um die Lesbarkeit aufrechtzuerhalten, insbesondere bei niedrigeren Kontrastniveaus. Benutzer k?nnen die Basis -Schriftgr??e weiterhin an ihre Pr?ferenz einstellen.

Proportionen beibehalten: Definieren Sie die relativen Gr??enanpassungen (z. .small ,. .large ) basierend auf dem Standardeinsatz des Browsers.

 :Wurzel {
  / * Stellen Sie hier keine Schriftgr??e ein */
}
.klein {
  Schriftgr??e: .8rem;
}
.gro? {
  Schriftgr??e: 2Rem;
}

überschriften

Halten Sie die übergangsreihenfolge (H1, H2, H3 usw.) für den Bildschirmleser -Zug?nglichkeit. Das Zurücksetzen der Schriftgr??en in 1rem kann das visuelle Styling von semantischer Bedeutung entkoppeln.

Arbeiten mit Pixeln

Um pixelbasierte Designs in relative Einheiten zu übersetzen:

Methode 1: Die 62,5% -Regel

font-size: 62.5%; Auf der :root macht 1REM gleich 10px und vereinfacht die Pixel-REM-Konvertierung.

Methode 2: Verwendung calc()

Verwenden Sie calc() , um die REM -Werte dynamisch basierend auf dem angenommenen 16px -Browser -Standard zu berechnen.

Methode 3: Pixel-zu-REM-Funktion

Verwenden Sie Pr?prozessorfunktionen (Sass Mixins, Styled-Komponenten-Politur) oder erstellen Sie sogar eine benutzerdefinierte CSS-Funktion für die Pixel-zu-REM-Konvertierung.

Abschluss

Priorisieren Sie die proportionale Gr??e mithilfe von rem -Einheiten, nutzen Sie die Browser -Standardeinstellungen und vermeiden Sie Annahmen zu den Benutzereinstellungen. Dieser Ansatz gew?hrleistet die Zug?nglichkeit für verschiedene Browser, Ger?te und Benutzerpr?ferenzen. Vielen Dank an Franco Correa für seine Hilfe.

Das obige ist der detaillierte Inhalt vonZug?ngliche Schriftgr??e, erkl?rt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!