otf - ¿Es posible ajustar la escala vertical de una fuente usando CSS?

fonts googleapis css

Question

Estoy usando una fuente incrustada para los principales elementos de navegación en un sitio Helvetica65 y en 16px es el ANCHO perfecto, pero necesito que sea aproximadamente el 90% de su altura actual.

En Photoshop, la solución es simple: ajuste la escala vertical.

¿Hay alguna manera de hacer esencialmente lo mismo usando CSS? Y si es así, ¿qué tan bien es compatible?

Aquí hay un jsFiddle de la codificación de navegación básica.

Answer 1

transform propiedad de transform se puede usar para escalar texto:

.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 */
}