是否可以使用 CSS 调整字体的垂直缩放?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11839655/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 04:43:49  来源:igfitidea点击:

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

cssfontsscalingembedded-fonts

提问by Cynthia

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

我正在为网站上的顶部导航元素使用嵌入字体 Helvetica6516px它是完美的宽度,但我需要它与90%当前高度有关。

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

在 Photoshop 中,解决方案很简单——调整垂直缩放。

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

有没有办法使用 CSS 做本质上相同的事情?如果是这样,它的支持情况如何?

Here is a jsFiddleof the basic nav coding.

这是基本导航编码的jsFiddle

回答by way2vin

transformproperty can be used to scale text:

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