使用css拉伸字体最实用的方法

Question

我想伸展Helvetica字体，使文字高20％，我环顾四周，看到没有任何浏览器支持，没有使用某种JS或黑客。

使用（最好）只使用CSS最实用的方法是什么？我最初的想法是找到一个类似的更高的字体并使用它。

Answer 1

有点黑客，不是非常跨浏览器，可能不适用于您的情况，但尽管您可以使用transform: scale(1,1.5);。

.tallhelvetica{
    font:20px Helvetica;
    transform: scale(1,1.5);
}

除此之外，您还需要查找或创建另一种字体。

请参阅此演示：JSFiddle。

Answer 2

无法在CSS中垂直拉伸字体。 @SuperScript的答案演示了以算法方式垂直拉伸任何内容。这意味着水平笔划变得更加厚重，结果在印刷上更差。

font-stretch属性带有一个误导性的名称：它意味着根据其在水平方向上的设计选择字体（字体系列中的特定字体） - 它不会拉伸字体但选择“拉伸” “或”浓缩“字体。网页上常用的大多数字体都没有这样的字体。在任何情况下，无论如何都不会与垂直拉伸有任何关系。

结论确实是您应该找到不同的字体 - 或者重新考虑使您认为需要更高字体的决定。