web-dev-qa-db-ja.com

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

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

Photoshopでは、ソリューションは簡単です-垂直スケーリングを調整します。

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

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

cssfontsscalingembedded-fonts
50
Cynthia

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 */
}
86
way2vin