web-dev-qa-db-fra.com

Augmentez la taille du texte pour l'adapter au conteneur

En utilisant CSS, et en particulier sans javascript onload, serait-il possible de faire ceci:

Vous avez une cellule de 150 px de large et 100 px de hauteur. Il contient un texte, par exemple: 20,00 $ ou toute variante de cela.

Vous souhaitez qu'il s'adapte parfaitement à la taille du conteneur.

Je pourrais le faire avec javascript, redimensionner le texte jusqu'à ce qu'un conteneur sans rembourrage/marge atteigne la largeur et/ou la hauteur de la cellule. Ou contenez-le dans quelque chose qui a un débordement réglé sur auto et voyez quand il déborde ou quelque chose.

Peut-on le faire avec du CSS pur?

Tenez compte du fait que la police n'est pas non plus une police à taille fixe. Utilisez Arial si vous le souhaitez.

cssfontsscale
20
MHD

Une chose que j'ai faite qui n'est pas parfaite mais qui peut faire le travail dans certains cas est d'utiliser une règle @media pour des tailles d'écran plus petites que X pixels, définissez une taille de police plus petite ou plus grande.

h2{
  font-size:25px
}

@media screen and (max-width: 850px){/* for screens smaller then 850px, set the font size smaller */
   h2{
     font-size:19px;
   }
}

Bien sûr, cela ne fonctionnerait qu'en supposant que la taille du conteneur de textes est basée sur la taille de la fenêtre d'une manière ou d'une autre.

6
Tyler

Vérifiez ceci: http://css-tricks.com/viewport-sized-typography/

Malheureusement, cela ne fonctionne que dans Chrome 20+ & IE 10+ donc pour l'instant vous devrez vous en tenir à ne solution js ....

13
Miss A