我正在为网站上的顶部导航元素使用嵌入式字体,
Helvetica65
它16px
是完美的宽度,但我需要它大约90%
是它的当前高度。
在 Photoshop 中,解决方案很简单 - 调整垂直缩放。
有没有办法使用 CSS 做本质上相同的事情?如果是这样,它的支持程度如何?
这是基本导航编码的jsFiddle。
我正在为网站上的顶部导航元素使用嵌入式字体,
Helvetica65
它16px
是完美的宽度,但我需要它大约90%
是它的当前高度。
在 Photoshop 中,解决方案很简单 - 调整垂直缩放。
有没有办法使用 CSS 做本质上相同的事情?如果是这样,它的支持程度如何?
这是基本导航编码的jsFiddle。
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 */
}