web-dev-qa-db-fra.com

Est-il possible d'ajuster la mise à l'échelle verticale d'une police à l'aide de CSS?

J'utilise une police intégrée pour les principaux éléments de navigation d'un site Helvetica65 et à 16px c'est la LARGEUR parfaite mais j'ai besoin qu'elle soit à peu près 90% de sa hauteur actuelle.

Dans Photoshop, la solution est simple: ajustez l'échelle verticale.

Existe-t-il un moyen de faire essentiellement la même chose en utilisant CSS? Et si oui, dans quelle mesure est-il pris en charge?

Voici un jsFiddle du codage nav de base.

cssfontsscalingembedded-fonts
50
Cynthia

La propriété transform peut être utilisée pour mettre le texte à l'échelle:

.menu li a {
  color: #ffffff;
  text-transform: uppercase;
  text-decoration: none;
  font-family: "HelveticaNeue-Medium", sans-serif;
  font-size: 14px;
  display: inline-block;
  transform: scale(1, 1.5);
  -webkit-transform: scale(1, 1.5); /* Safari and Chrome */
  -moz-transform: scale(1, 1.5); /* Firefox */
  -ms-transform: scale(1, 1.5); /* IE 9+ */
  -o-transform: scale(1, 1.5); /* Opera */
}
86
way2vin