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

问题描述

我正在为网站上的顶部导航元素使用嵌入字体Helvetica65 和 16px 这是完美的宽度，但我需要它大约 90% 的当前高度.

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

在 Photoshop 中，解决方案很简单 - 调整垂直缩放.

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

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

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

这是基本导航编码的jsFiddle.

推荐答案

transform 属性可用于缩放文本:

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

这篇关于是否可以使用 CSS 调整字体的垂直缩放?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！