CSS3:有没有办法改变字体高度?
我希望在我当前正在构建的网站上通过字体替换技术保持我的标题可供选择。问题是,我设计网站时使用的字体在垂直方向上比原始字体短了 20%。
我知道我可以缩小行高以缩短上方和下方的间距,并且我知道我可以调整字母间距以使字体“看起来”更短 - 但这并不理想。
我一直在研究 Stackoverflow 上的问题,发现 CSS 2.1 不支持任何开发人员与字体显示高度的交互。
我想知道是否有任何即将推出的 CSS3 模块,甚至 jQuery 脚本等可能有助于手动缩短字体的高度?
或者是否有任何字体替换技术允许它?例如,有什么方法可以缩短 Cufon 标题吗?
提前致谢。
I'm looking to keep my headings selectable via font-replacement technology on a site I'm currently building out. The problem is, the font I've designed the site with is vertically 20% shorter than the original font.
I know I can shrink line-height to shorten spacing above and below, and I know I can play with letter-spacing to make the font "seem" shorter - but thats not really ideal.
I've been digging through the questions here on Stackoverflow and I've discovered CSS 2.1 doesn't support any developer interaction with a font's display height.
What I was wondering is if there are any upcoming CSS3 modules, or even jQuery scripts etc that might help manually shorten a font's height?
Or are there any font-replacement technologies that allow it? For instance is there any way to shorten Cufon headings?
Thanks in advance.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
如果您使用字体替换,有一种方法可以产生 Canvas 替换,就像您提到的 Cufon 一样。
如果您这样做,您将能够利用 html canvas 属性,即如果您使用 CSS 更改画布的宽度/高度,画布将表现得像图像,因此您可以将每个元素设置为短 20%。尽管您必须在其上运行 javascript,就好像您希望它保持相同的宽度一样,但您必须在应用较短的高度之前将宽度设置为完全相同的值。如果省略这一点,您将同时缩放画布的高度和宽度。
我相信理论上这同样适用于 flash 替代品 - 根据我的记忆,用 CSS 缩放 flash 会产生类似的结果 - 如果我错了,请纠正我。
不确定它是否不会产生任何闪烁或任何其他故障 - 你必须尝试一下。如果您想要缩短的页面上没有太多 Cufon 元素,并且在 Cufon 替换后立即执行此操作,应该可以解决问题。
祝你好运!忠于你的设计可能很麻烦,呵呵
There is a way if you will use font-replacement which produces Canvas replacement like Cufon you mentioned.
If you do you will be able to take the advantage of html canvas property which is that if you change the width/height of canvas with CSS the canvas will behave like an image so you could set every element to be 20% shorter. Though you'd have to run javascript on it as if you'd like it to stay same width you'd have to set the width to be exact same value before applying the shorter height. If you'd omit this bit you'd scale the canvas in both height and width.
I believe the same could theoretically apply to flash replacements - from what I remember scalling flash with CSS produced similar results - correct me if I'm wrong.
Not sure if it wouldn't produce any blinking or any other glitches - you'd have to give it a go. If there aren't to many Cufon elements on your page you want to shorten and you do it right after Cufon replace it should do the trick.
Good luck! Staying true to your design can be a bitch hehe
您可以对文本 div 应用 CSS 变换,并在 Y -webkit-transform 中将其缩放 0.8
:scaleY(0.8)
渲染可能有点难以预测。
You can apply a CSS transform to your text div and scale it by 0.8 in Y
-webkit-transform: scaleY(0.8)
rendering can be a little unpredictable though.