css - CSS を使用してフォントの垂直スケーリングを調整することは可能ですか?

Question

サイトの上部のナビゲーション要素に埋め込みフォントを使用しています がHelvetica65、16pxそれは完璧な幅ですが、90%現在の高さである必要があります。

Photoshop での解決策は簡単です。垂直方向のスケーリングを調整します。

CSS を使用して本質的に同じことを行う方法はありますか? もしそうなら、それはどの程度うまくサポートされていますか?

これは、基本的な nav コーディングのjsFiddleです。

Answer 1

transformプロパティを使用してテキストをスケーリングできます。

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