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

Vier Lösungen für die Verwendung von setTimeout in JS for-Schleifen

Inhaltsverzeichnis Überblick Lösung 1: Verschlüss...

Zusammenfassung der Wissenspunkte zum CSS-Frontend (unbedingt lesen)

1. Das Konzept von CSS: (Cascading Style Sheet) V...

So starten/stoppen Sie den Tomcat-Server in Java

1. Projektstruktur 2. Rufen Sie Tomcat.java auf P...

So schreiben Sie asynchrone Aufgaben in modernem JavaScript

Vorwort In diesem Artikel untersuchen wir die Ent...

vue_drf implementiert SMS-Bestätigungscode

Inhaltsverzeichnis 1. Nachfrage 1. Nachfrage 2. S...

5 Möglichkeiten, um festzustellen, ob ein Objekt in JS ein leeres Objekt ist

1. Konvertieren Sie das JSON-Objekt in eine JSON-...

Beispielanalyse der MySQL-Benutzerrechteverwaltung

Dieser Artikel beschreibt das Beispiel der MySQL-...

17 hervorragende Webdesigns, sorgfältig von Startups entwickelt

Startups überraschen uns oft mit ihren unkonventi...

Javascript zum Umschalten durch Klicken auf das Bild

Durch Klicken Bilder zu wechseln, ist im Leben ei...

Detaillierte Erklärung der binären und varbinären Datentypen in MySQL

Vorwort BINARY und VARBINARY ähneln in gewisser W...

Starten Sie alle gestoppten Docker-Container mit einem Befehl neu

Starten Sie alle gestoppten Docker-Container mit ...