Is it possible to adjust a font's vertical scaling using CSS?

Question

I am using an embedded font for the top navigational elements on a site Helvetica65 and at 16px it is the perfect WIDTH but I need it to be about 90% of it's current height.

In Photoshop, the solution is simple - adjust the vertical scaling.

Is there a way to do essentially the same thing using CSS? And if so, how well is it supported?

Here is a jsFiddle of the basic nav coding.

Answer 1

transform property can be used to scale text:

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