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

Mehrere Möglichkeiten zum Kapseln von Breadcrumb-Funktionskomponenten in Vue3

Inhaltsverzeichnis Vorwort 1. Warum brauchen wir ...

Detailliertes Tutorial zum Ersetzen von mysql8.0.17 in Windows 10

In diesem Artikel werden die spezifischen Schritt...

So ändern Sie die Ubuntu-Quellliste (Quellliste) - detaillierte Erklärung

Einführung Die Standardquelle von Ubuntu ist kein...

Eine Minute, um die Laufruhe von HTML+Vue+Element-UI zu erleben

Technik-Fan html-Webseite, müssen Sie wissen Von ...

Mysql-Optimierung Zabbix-Partitionsoptimierung

Der größte Engpass bei der Verwendung von Zabbix ...

W3C Tutorial (7): W3C XSL Aktivitäten

Ein Stylesheet beschreibt, wie ein Dokument angez...

So implementieren Sie adaptive Container mit gleichem Seitenverhältnis mit CSS

Als ich kürzlich eine mobile Seite entwickelte, s...

Über 40 schöne Beispiele für Webformular-Designs

Webformulare sind der primäre Kommunikationskanal...

Vue3+TypeScript kapselt Axios und implementiert Anforderungsaufrufe

Auf keinen Fall. Es stellt sich heraus, dass es L...