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

Is it possible to change inline text height, not just the line-height?

提问by Kuba Holuj

I am wondering if it's possible to change the height of inline text, without stretching the font, and without changing the line height in css.

我想知道是否可以在不拉伸字体和不更改 css 中的行高的情况下更改内联文本的高度。

An issue comes up when I have multi-line links with a hover effect: when moused over the lines the effect flickers on and off because of the increased line height: Example

当我有带有悬停效果的多行链接时会出现一个问题：当鼠标悬停在线条上时，由于行高增加，效果闪烁： 示例

Is there another way to do this?

有没有另一种方法可以做到这一点？

采纳答案by Andrew Hare

You won't be able to change the height of the font alone but you can adjust the font-sizeto work with the line height you have set.

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

回答by Prashant Tapase

You can increase height of font using below css

您可以使用下面的 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

JSFIDDLE

回答by Evan Meagher

You could also try decreasing the letter-spacing. Making the type a bit tighter might make it seem taller in relation to its width.

您也可以尝试减小letter-spacing。使字体更紧一些可能会使其相对于其宽度看起来更高。

回答by Sarin Suriyakoon

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

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

This command will help you to solve problem

此命令将帮助您解决问题

This will help you!

这会帮助你！

回答by Gnanasekar S

You can increase the height, width of a text using transform property. For instance: transform: scale(0.7, 1.0);

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

1. The first value inside the scale property changes widthof the letter/text.
2. And the second value changes the heightof the letter/text.

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

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

I used margin to align the text's

我使用边距来对齐文本

Note: Its always a best practice to use Vendor Prefixes

注意：使用供应商前缀始终是最佳实践

• -webkit- (Chrome, Safari, newer versions of Opera.)
• -moz- (Firefox)
• -o- (Old versions of Opera)
• -ms- (Internet Explorer)

• -webkit-（Chrome、Safari、较新版本的 Opera。）
• -moz-（火狐）
• -o-（旧版本的 Opera）
• -ms- (Internet Explorer)

Example: -webkit-transform: scale(0.7, 1.0);

示例：-webkit-transform: scale(0.7, 1.0);

回答by L84

There is one property that hasn't been mentioned yet that can help change the height of a font...the only problem is it is has abysmal support.

有一个尚未提及的属性可以帮助更改字体的高度……唯一的问题是它的支持非常糟糕。

The property I refer to is the font-size-adjustCSS Property.

我所指的属性是font-size-adjustCSS 属性。

MDN has this to say:

MDN 有这样的说法：

The font-size-adjustCSS property specifies that font size should be chosen based on the height of lowercase letters rather than the height of capital letters. This is useful since the legibility of fonts, especially at small sizes, is determined more by the size of lowercase letters than by the size of capital letters.

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

As I mentioned support is horrible. As of this post, Firefox is the only browser that supports it. As of v43 of Chrome it can be enabled under the experimental Web Platform features flag.

正如我提到的，支持是可怕的。在这篇文章中，Firefox 是唯一支持它的浏览器。从 Chrome v43 开始，它可以在实验性 Web 平台功能标志下启用。

回答by Kaleem Sajid

You cannot change font height using CSS but what you can do is to make it look taller by

您无法使用 CSS 更改字体高度，但您可以通过以下方式使其看起来更高

• reducing letter-spacing(Note: you can use negative letter-spacingif you need.)
• reducing font-weight
• and by increasing font-size

• 减少letter-spacing（注意：letter-spacing如果需要，您可以使用负数。）
• 减少 font-weight
• 并通过增加 font-size

回答by Bhawna Malhotra

You can increase the height using transform:scale(3,5) The height depends upon the second parameter of transform:scale

您可以使用 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

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