能否使用CSS调整字体的垂直缩放？

Question

我在网站的顶部导航元素中使用了一种嵌入式字体，字体名称为Helvetica65，大小为16px时其宽度非常完美，但是我需要将其高度调整为当前高度的90%左右。

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

是否有一种方式可以使用CSS实现基本相同的效果呢？如果有的话，它的支持程度如何呢？

这里是基本导航代码的jsFiddle。

- Cynthia

---

你可以让我们看看你的代码吗？或者你能给我们设置一个 jsfiddle 吗？ - Mihai Matei

刚刚在我的原始帖子中进行了编辑并发布了它。 - Cynthia

Answer 1

transform 属性可用于缩放文本。
它用于块级元素，因此您还需要添加 display: inline-block，才能将其用于 HTML 元素，例如 <a>、<span>、<em>、<kbd> 等。

body {
  font-family: "HelveticaNeue-Medium", sans-serif;
  font-size: 12px;
}

a.vertical-scaling {
  display: inline-block;
  transform: scale(1, 1.5);
  /* Safari and Chrome */
  -webkit-transform: scale(1, 1.5);
  /* Firefox */
  -moz-transform: scale(1, 1.5);
  /* IE 9+ */
  -ms-transform: scale(1, 1.5);
  /* Opera */
  -o-transform: scale(1, 1.5);
}

<ul>
  <li><a class="vertical-scaling" href="/">HOME</a></li>
  <li><a href="/expert-witness">EXPERT WITNESS<a/></li>
</ul>

- way2vin

---

我已经对标题应用了比例变换，使其变得更宽而不是更高。这意味着文本现在从页面上其余文本的左侧开始。我已经在左侧添加了边距，将其推回到行内。有没有办法通过变换计算出这种差异？ - RouthMedia

@RouthMedia，您正在寻找“transform-origin”。可能是“transform-origin: top left;”。 - honk31

需要注意的是，该方法基于整个块进行缩放，因此不适用于 display: inline; - 元素必须类似块级元素（块级元素、表格、内联块级元素等）。 - jave.web