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

Vollständige Analyse der MySQL-Datentypen

Datentyp: Die grundlegenden Regeln, die definiere...

Einige weniger bekannte Sortiermethoden in MySQL

Vorwort ORDER BY 字段名升序/降序. Ich glaube, jeder hier...

Anwendung von CSS3-Animationseffekten in Aktivitätsseiten

Hintergrund Ehe wir uns versehen, neigt sich ein ...

Docker-Container vom Einstieg bis zur Obsession (empfohlen)

1. Was ist Docker? Jeder kennt virtuelle Maschine...

Eine kurze Analyse des HTML-Space-Codes

Wie gut kennen Sie sich mit HTML aus? Wenn Sie jet...

Detaillierte Erklärung zu Padding und Abkürzungen im CSS-Boxmodell

Wie oben gezeigt, sind Füllwerte zusammengesetzte...

CSS3-Filtercode zum Erreichen des Grau- oder Schwarzmodus auf Webseiten

Frontend css3.filter kann nicht nur den Graueffek...

Lösung für den internen Serverfehler Nginx 500

Als ich heute Nginx verwendete, trat ein 500-Fehl...

Beispiel für ein WeChat-Applet zum Erzielen des rotierenden Laterneneffekts

Vorwort In der täglichen Entwicklung stoßen wir h...

Installations- und Konfigurationstutorial von MySQL 8.0.16 unter Win10

1. Entpacken Sie MySQL 8.0.16 Der Ordner dada und...

So rufen Sie die Browser-Sharing-Funktion in Vue auf

Vorwort Vue (ausgesprochen /vjuː/, ähnlich wie vi...

Lösung für die verstümmelte Anzeige von Linux SecureCRT

Sehen wir uns die Situation an, in der SecureCRT ...