Question

我想知道是否可以更改内联文本的高度，而不会拉伸字体，也不会更改css中的行高。

当我有一个具有悬停效果的多行链接时出现问题：当在线条上移动时，由于线条高度增加，效果会闪烁：Example

还有其他办法吗？

Answer 1

您可以使用以下css

增加字体高度

transform:scale(2,3); /* W3C */
-webkit-transform:scale(2,3); /* Safari and Chrome */
-moz-transform:scale(2,3); /* Firefox */
-ms-transform:scale(2,3); /* IE 9 */
-o-transform:scale(2,3); /* Opera */

<强> JSFIDDLE

Answer 2

您将无法单独更改字体的高度，但您可以调整font-size以使用您设置的行高。

Answer 3

你也可以尝试减少letter-spacing。使类型更紧凑可能会使其看起来更宽。

Answer 4

http://www.css3.com/css-font-stretch/

此命令将帮助您解决问题

这会对你有所帮助！

Answer 5

您可以使用transform属性增加文本的高度和宽度。例如：transform：scale（0.7,1.0）;

scale属性中的第一个值会更改字母/文本的宽度。
第二个值会更改字母/文字的高度。

 **h1 {
    font-size: 60px;
    transform: scale(0.7, 1.0);
    margin-left: -90px 
}**

我使用边距来对齐文字的

注意：使用供应商前缀

-webkit-（Chrome，Safari，Opera的新版本。）
-moz-（Firefox）
-o-（旧版Opera）
-ms-（Internet Explorer）

示例： - webkit-transform：scale（0.7,1.0）;

Answer 6

您无法使用CSS更改字体高度，但您可以通过

使其看起来更高

减少letter-spacing（注意：如果需要，可以使用否定letter-spacing。）
减少font-weight
并增加font-size

Answer 7

还有一个尚未被提及的属性可以帮助改变字体的高度......唯一的问题是它有极大的支持。

我引用的属性是font-size-adjust CSS属性。

MDN has this to say：

font-size-adjust CSS属性指定应根据小写字母的高度而不是大写字母的高度来选择字体大小。这很有用，因为字体的易读性，尤其是小字体，更多地取决于小写字母的大小而不是大写字母的大小。

正如我提到的support is horrible。截至本文，Firefox是唯一支持它的浏览器。从v43开始，它可以在实验性Web平台功能标志下启用。

Answer 8

您可以使用transform：scale（3,5）增加高度高度取决于transform的第二个参数：scale

<div>
<span>Text</span>  
</div>

div {
text-align:center;
 }

span
{    
display:inline-block;
transform:scale(3,5); 
-webkit-transform:scale(3,1); 
}

http://codepen.io/smarty_tech/pen/ZWvWav

是否可以更改内联文本高度，而不仅仅是行高？

8 个答案: