使用 CSS 水平缩放文本

Posted 2023-03-06

【中文标题】使用 CSS 水平缩放文本

【英文标题】：Horizontal scaling of text using CSS

【发布时间】：2012-01-30 12:26:45

【问题描述】：

对于我们的网站，我们选择了由日内瓦（Mac 字体）和 Tahoma（Win 字体）组成的字体堆栈，并以 Arial 和 Helvetica 作为备份。理想情况下，我们希望 Geneva（最宽）、Tahoma、Helvetica 和 Arial 都占据每 x 个单词的相似空间（通过调整水平间距）。说 110% 的 Tahoma 就像 100% 的日内瓦。

Font stack- Geneva > Tahoma > Helvetica> Arial > sans

有没有更好的方法来做到这一点？这种类型的方法（例如浏览器支持）是否存在任何问题？如果是这样，那么如何在 CSS 中实现它？

基本上，我们已经在 Photoshop/Illustrator 中完成了这种水平缩放 - 希望为网站实现与文本相同的效果。我想这应该很常见，但是经过长时间的搜索 - 我无法找到任何解决问题的当前资源 - 2-3 岁的结果没有任何解决方案。作为网站新手 - 不允许发布 Photoshop 截图的图片 - 仍然在这里供参考：http://sunriseondarkhorizons.blogspot.com/2011/12/screenshot.html

PS Verdana 有点太宽了，无法考虑 - 尽管它更接近日内瓦空间。

谢谢

【问题讨论】：

为什么不用@font-face 包含你需要的字体呢？我认为这是拥有完全跨平台控制的唯一方法......

好建议@ptriek！你应该让你的评论成为一个真正的答案。

【参考方案1】：

您拥有的唯一工具是 letter-spacing CSS 属性，它可以增加或减少文本中字符之间的间距。

h1 letter-spacing:2px

AFAIK 跨浏览器兼容性没有问题。

但是在确定何时“激活”此属性时存在问题。由于您无法事先知道客户端将使用哪种字体，因此需要某种逻辑/选择器来决定是否应应用字母间距规则。

我不相信有 CSS 方法可以做到这一点。

你可能会使用 javascript 来计算是否应该扩大字母间距：创建一个

元素带有预设的单词，例如“test”。然后，您可以使用 JavaScript 对照预先计算的此类长度值列表检查元素的宽度

为您的不同字体。根据您添加或删除字母间距属性的结果。

这是一个棘手/棘手的解决方案，但这是我能想到的最好的解决方案。

啊！发现了一些东西：

Font Detector