web-dev-qa-db-de.com

Ist es möglich, die vertikale Skalierung einer Schrift mit CSS anzupassen?

Ich verwende eine eingebettete Schriftart für die obersten Navigationselemente auf einer Site Helvetica65 Und bei 16px Ist sie die perfekte BREITE, aber ich brauche sie, um ungefähr 90% Ihrer aktuellen Höhe zu sein .

In Photoshop ist die Lösung einfach: Passen Sie die vertikale Skalierung an.

Gibt es eine Möglichkeit, mit CSS im Wesentlichen dasselbe zu tun? Und wenn ja, wie gut wird es unterstützt?

Hier ist ein jsFiddle der grundlegenden Navi-Codierung.

50
Cynthia

Die Eigenschaft transform kann zum Skalieren von Text verwendet werden:

.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