Die endgültige Lösung für Chromes Mindestschriftgrößenbeschränkung von 12px

Die endgültige Lösung für Chromes Mindestschriftgrößenbeschränkung von 12px

Ich glaube, dass viele Benutzer, die Websites erstellen, ein solches Problem haben werden. Die standardmäßige Mindestschriftgröße von Chrome beträgt 12 Pixel (die neueste englische Version hat auch dieses Problem). Dies wurde von Chrome so konzipiert, dass Chinesisch besser angezeigt werden kann. Dies führt jedoch dazu, dass einige hochgestellte und tiefgestellte Zeichen zu groß sind, was sich auf die Benutzererfahrung auswirkt. Dieses Problem bereitete mir auch Probleme, als ich die Hybid App entwickelte. Ich suchte lange nach Baidu und stellte fest, dass alle Lösungen im Internet überraschend ähnlich waren. Es gab nur zwei Lösungen:

1-Anpassung an Google Chrome mit Präfix

html{
  -webkit-Textgrößenanpassung: keine;
  }

Fügen Sie dem HTML-Tag das folgende Attribut hinzu. Als ich jedoch den Browser öffnete, stellte ich fest, dass es nutzlos war. Später stellte ich fest, dass dieses Attribut nach Chrome 27 aufgegeben wurde. Das ist wirklich ärgerlich!

2-Verwenden Sie die Transform-Eigenschaft von CSS3

<div class=""small-font>Dies ist ein Textabschnitt</div>
.mini-Schriftart{
  Schriftgröße: 12px;
  -webkit-transform-origin-x: 0;
  -webkit-transform: Maßstab (0,90);
}

Diese Methode verwendet die Skalierungseigenschaft von CSS3, d. h. sie reduziert die Gesamttextgröße auf das 0,9-fache der Originalgröße. Es gibt jedoch einen Fehler. Es reduziert nur die Größe des Textes, kann jedoch den vom Text belegten Bereich nicht reduzieren, d. h. es kann die Breite und Höhe des Elements nicht reduzieren, was sehr unangenehm ist.

3- Die endgültige Lösung! ! ! ! Beginnen Sie mit den Browsereinstellungen

Nachdem ich die ersten beiden Methoden ausprobiert hatte, stellte ich fest, dass sie nicht funktionierten. Ich hatte keine andere Wahl, als einen mobilen Emulator zum Debuggen zu verwenden und stellte fest, dass die Schriftart auf 10 Pixel oder kleiner eingestellt werden konnte. Daher fragte ich mich, ob Google Chrome selbst die Mindestschriftgröße begrenzt? ? ? Also öffnete ich den Browser und begann langsam zu suchen und fand schließlich ein Heilmittel.

1. Öffnen Sie den Browser und suchen Sie nach " Einstellungen "

2. Suche nach „ Schriftart

3. Klicken Sie auf " Schriftarten anpassen "

4. Ändern Sie die " Mindestschriftgröße " auf 10 Pixel oder kleiner (es wird empfohlen, nicht weniger als 8 Pixel zu verwenden, da dies das Lesen beeinträchtigt).

5. Dann war das Problem gelöst. Tatsächlich lag es daran, dass Google Chrome selbst eine Mindestgröße für die Schriftgröße festgelegt hatte. Als ich später mit IE und Firefox debuggte, konnte die Schrift auf 10px und 8px eingestellt werden. Dies ließ mich noch mehr vermuten, dass es ein Problem mit Google Chrome war und nicht mit dem CSS-Code.

Dies ist das Ende dieses Artikels über die endgültige Lösung für die Mindestschriftgröße von 12 Pixeln in Chrome. Weitere relevante Informationen zur Mindestschriftgröße in Chrome finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<:  Mein CSS-Architekturkonzept – es ist von Person zu Person unterschiedlich, es gibt kein Bestes, nur das Passende

>>:  Beispiel, wie nginx dynamische und statische Trennung implementiert

Artikel empfehlen

Einführung und Installation von MySQL Shell

Inhaltsverzeichnis 01 ReplicaSet-Architektur 02 E...

Win10 Docker-Toolsbox-Tutorial zum Erstellen einer PHP-Entwicklungsumgebung

Bild herunterladen Docker-Pull MySQL:5.7 docker p...

Zusammenfassung der MySQL-Verbundindizes

Inhaltsverzeichnis 1. Hintergrund 2. Zusammengese...

Einführung in berechnete Eigenschaften in Vue

Inhaltsverzeichnis 1. Was ist eine berechnete Eig...

JavaScript-Grundlagen dieser Verweisung

Inhaltsverzeichnis Das Verfahren Im Objekt Verste...

Detailliertes Beispiel zum Erstellen und Löschen von Tabellen in MySQL

Der Befehl zur Tabellenerstellung erfordert: Der...

MySQL-Transaktionsdetails

Inhaltsverzeichnis Einführung Vier Merkmale von T...

SQL-Implementierung von LeetCode (182. Doppelte Postfächer)

[LeetCode] 182.Doppelte E-Mails Schreiben Sie ein...

Lösung für das Problem des Sitzungsverlusts bei Nginx

Bei der Verwendung von Nginx als Reverse-Proxy fü...