Maison >interface Web >Tutoriel H5 >Solution de traitement des petites polices Google Chrome, c'est-à-dire des compétences de didacticiel pour les polices inférieures à 12px_html5

Solution de traitement des petites polices Google Chrome, c'est-à-dire des compétences de didacticiel pour les polices inférieures à 12px_html5

WBOY
WBOYoriginal
2016-05-16 15:48:321678parcourir

Google Chrome ne prend pas en charge les petites polices inférieures à 12 px, peut-être en raison de l'expérience utilisateur.
Il y a aussi quelques articles sur Internet disant qu'il peut être utilisé :

Copiez le code
Le code est la suivante :

-webkit-text-size-adjust:none;

Cependant, depuis Chrome 27, la prise en charge de cet attribut a été supprimée.

Avons-nous d'autres moyens de résoudre ce problème ?

Google Chrome prend en charge la mise à l'échelle CSS, nous pouvons donc en faire toute une histoire :

Copier le code
Le code est le suivant :

-webkit-transform: scale(0.5);

Puisque le support minimum est de 12 px, alors mettez à l'échelle en fonction de 12 px,

En même temps, vous pouvez utiliser -webkit-transform-origin-x: 0; pour résoudre le problème de déplacement de la marge gauche après la mise à l'échelle :

Copier le code
Le code est le suivant :

.test_tag{
font-size:12px
-webkit-transform-origin- x: 0;
- webkit-transform: scale(0.5833333333333334);
}

La valeur de l'échelle est calculée comme suit : 7 / 12 = 0,5833333333333334.
Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn