I am looking for a way to condense relatively small areas of text on a page in an effort to mimic a graphic button that was done with a non-standard font. Ideally, just the letters would get squished or made thinner, leaving the space between words more or less the same. I know there are some CSS attributes that do things like this, but they are more focused on spacing between the letters and not so much on the widths of the letters themselves. These CSS methods are also not very cross-browser friendly. The majority of the user base is using IE6, so that puts a large restriction on CSS-based methods out of the blocks.
我正在寻找一种方法来压缩页面上相对较小的文本区域,以模仿使用非标准字体完成的图形按钮。理想情况下,只是字母会被压扁或变薄,使字词之间的空格大致相同。我知道有一些CSS属性可以做这样的事情,但是它们更侧重于字母之间的间距而不是字母宽度本身。这些CSS方法也不是非常跨浏览器友好。大多数用户群都使用IE6,因此对基于CSS的方法提出了很大的限制。
So, is there any way to control the character width/spacing that is cross-browser friendly? I know jQuery works across browsers quite well, so could this perhaps be done with jQuery by manipulating the location of the letters and possibly their widths? These are small bits of text, 5 words at a time, or so, so speed is something that can be dealt with later.
那么,有没有办法控制跨浏览器友好的字符宽度/间距?我知道jQuery可以在浏览器中很好地工作,所以这可能通过操纵字母的位置和可能的宽度来完成jQuery吗?这些是一小段文本,一次5个单词,所以速度是可以在以后处理的东西。
EDIT: Ok, so, the CSS letter-spacing property, as well as the word-spacing property will allow me to control the space between letters/words. However, this makes things look squished. If this truly is the only option, then I'll have to make it work, but what I am really looking for is a way to squish the letters themselves, to make the characters thinner.
编辑:好的,所以,CSS字母间距属性,以及字间距属性将允许我控制字母/单词之间的空格。但是,这会让事情变得模糊不清。如果这真的是唯一的选择,那么我必须让它工作,但我真正想要的是一种方法来压缩字母本身,使字符更薄。
9 个解决方案
#1
Short answer: I don't think there is a working cross-browser example that meets your requirements.
简短回答:我认为没有符合您要求的跨浏览器示例。
The CSS3 specification includes a font-stretch property, but sadly enough, CSS3 is barely (if at all) supported at this time.
CSS3规范包含font-stretch属性,但遗憾的是,CSS3目前几乎不支持(如果有的话)。
Some possible ways that could emulate this behaviour that I can think of:
一些可以模仿我可以想到的行为的方法:
- Use a flash-based approach like sIFR
- Use a javascript / canvas based approach like Typeface.js. There's a font-stretch example included on the example page
- Use condensed fonts (icky-approach, since this means you are relying on the font being available for the client), like Arial Narrow.
- Use a server-side script that generates an image from text parameters
使用基于闪存的方法,如sIFR
使用类似于Typeface.js的基于javascript / canvas的方法。示例页面上包含一个font-stretch示例
使用压缩字体(icky-approach,因为这意味着您依赖于客户端可用的字体),如Arial Narrow。
使用从文本参数生成图像的服务器端脚本
In short, there is no simple and elegant solution to this problem because text and image manipulation is generally something you'd do in a graphics editor.
简而言之,这个问题没有简单而优雅的解决方案,因为文本和图像处理通常是您在图形编辑器中所做的事情。
If this is not possible, I'd definately recommend looking into Typeface and sIFR.
如果这是不可能的,我肯定会建议查看Typeface和sIFR。
#3
I think this sort of thing should probably be done in a graphics editor and output to a lightweight image (png or similar). I think this is the only simple and reliable way to control the visual output of the text to this extent.
我认为这种事情应该在图形编辑器中完成并输出到轻量级图像(png或类似的)。我认为这是控制文本视觉输出的唯一简单可靠的方法。
Make sure you repeat the text in the alt attribute on the img tag for accessibility.
确保重复img标记上alt属性中的文本以获取辅助功能。
This approach has issues with localization - in that you need a version for each locale - but this is still doable.
这种方法存在本地化问题 - 因为您需要每种语言环境的版本 - 但这仍然是可行的。
There are also going to be issues if you wanted to keep this text in-line with some other text - e.g. in the middle of a paragraph. But if that's what is being done, it sounds like "squished up text" may not really be a good UI.
如果您希望将此文本与其他文本保持一致,也会出现问题 - 例如在段落的中间。但如果这就是正在做的事情,听起来像“压扁文本”可能并不是一个好的用户界面。
#4
So, you want to squish it without squishing it?
所以,你想要挤压它而不会压扁它?
Try adjusting the font-size then. Or some combination of letter-spacing, word-spacing and font-size. (All of which work just fine in IE6).
然后尝试调整字体大小。或者字母间距,字间距和字体大小的某种组合。 (所有这些在IE6中都可以正常工作)。
.nav {font-size: 80%;
letter-spacing: -.05em;
word-spacing: .05em; }
#5
It sounds like a nightmare.
这听起来像是一场噩梦。
You can fudge the whole thing by putting each word if a floated DIV and fiddling with the width each DIV.
你可以通过放置每个单词(如果浮动的DIV并且摆弄每个DIV的宽度)来捏造整个事物。
#6
Are you sure you're specifying your doctypes properly? Perhaps your browsers are interpreting your CSS in quirks mode, resulting in the unpredictable behavior.
您确定要正确指定您的文档类型吗?也许您的浏览器在怪异模式下解释您的CSS,导致不可预测的行为。
I don't think jQuery will be of much help to you if letter-spacing isn't working properly. You can't alter the positions of individual letters unless every letter is inside its own element, such as a span, which just seems messy.
如果字母间距不正常,我认为jQuery对你没什么帮助。你不能改变单个字母的位置,除非每个字母都在它自己的元素内,例如跨度,这看起来很麻烦。
EDIT: If you want to shrink the horizontal width of the characters themselves, that would theoretically be done with font-stretch: narrower, for example. But it seems the major browser don't support it properly or at all. Apparently it was in CSS2, but then dropped in CSS2.1 and is now planned for CSS3.
编辑:如果你想缩小字符本身的水平宽度,理论上可以使用font-stretch:narrower。但似乎主浏览器不能正确支持它或根本不支持它。显然它是在CSS2中,但随后在CSS2.1中被删除,现在计划用于CSS3。
#7
I'd have to question the wisdom of even trying to do this in the first place. Just replace the darn graphic with something readable; or something you can duplicate with your text.
我不得不质疑甚至首先尝试这样做的智慧。只需用可读的东西替换darn图形;或者你可以用你的文字复制的东西。
What you want to do is change the text's font. I think your best bet is looking through a bunch of different fonts that come preinstalled for your userbase and trying for the best font+size combo.
你想要做的是改变文本的字体。我认为您最好的选择是查看为您的用户群预装的一系列不同的字体,并尝试使用最佳的字体+大小组合。
#9
Approaching ten years later, font-stretch is still virtually unsupported. But transform:scaleX(); will do. Here.
十年后,font-stretch几乎不受支持。但是变换:scaleX();会做。这里。
#1
Short answer: I don't think there is a working cross-browser example that meets your requirements.
简短回答:我认为没有符合您要求的跨浏览器示例。
The CSS3 specification includes a font-stretch property, but sadly enough, CSS3 is barely (if at all) supported at this time.
CSS3规范包含font-stretch属性,但遗憾的是,CSS3目前几乎不支持(如果有的话)。
Some possible ways that could emulate this behaviour that I can think of:
一些可以模仿我可以想到的行为的方法:
- Use a flash-based approach like sIFR
- Use a javascript / canvas based approach like Typeface.js. There's a font-stretch example included on the example page
- Use condensed fonts (icky-approach, since this means you are relying on the font being available for the client), like Arial Narrow.
- Use a server-side script that generates an image from text parameters
使用基于闪存的方法,如sIFR
使用类似于Typeface.js的基于javascript / canvas的方法。示例页面上包含一个font-stretch示例
使用压缩字体(icky-approach,因为这意味着您依赖于客户端可用的字体),如Arial Narrow。
使用从文本参数生成图像的服务器端脚本
In short, there is no simple and elegant solution to this problem because text and image manipulation is generally something you'd do in a graphics editor.
简而言之,这个问题没有简单而优雅的解决方案,因为文本和图像处理通常是您在图形编辑器中所做的事情。
If this is not possible, I'd definately recommend looking into Typeface and sIFR.
如果这是不可能的,我肯定会建议查看Typeface和sIFR。
#2
#3
I think this sort of thing should probably be done in a graphics editor and output to a lightweight image (png or similar). I think this is the only simple and reliable way to control the visual output of the text to this extent.
我认为这种事情应该在图形编辑器中完成并输出到轻量级图像(png或类似的)。我认为这是控制文本视觉输出的唯一简单可靠的方法。
Make sure you repeat the text in the alt attribute on the img tag for accessibility.
确保重复img标记上alt属性中的文本以获取辅助功能。
This approach has issues with localization - in that you need a version for each locale - but this is still doable.
这种方法存在本地化问题 - 因为您需要每种语言环境的版本 - 但这仍然是可行的。
There are also going to be issues if you wanted to keep this text in-line with some other text - e.g. in the middle of a paragraph. But if that's what is being done, it sounds like "squished up text" may not really be a good UI.
如果您希望将此文本与其他文本保持一致,也会出现问题 - 例如在段落的中间。但如果这就是正在做的事情,听起来像“压扁文本”可能并不是一个好的用户界面。
#4
So, you want to squish it without squishing it?
所以,你想要挤压它而不会压扁它?
Try adjusting the font-size then. Or some combination of letter-spacing, word-spacing and font-size. (All of which work just fine in IE6).
然后尝试调整字体大小。或者字母间距,字间距和字体大小的某种组合。 (所有这些在IE6中都可以正常工作)。
.nav {font-size: 80%;
letter-spacing: -.05em;
word-spacing: .05em; }
#5
It sounds like a nightmare.
这听起来像是一场噩梦。
You can fudge the whole thing by putting each word if a floated DIV and fiddling with the width each DIV.
你可以通过放置每个单词(如果浮动的DIV并且摆弄每个DIV的宽度)来捏造整个事物。
#6
Are you sure you're specifying your doctypes properly? Perhaps your browsers are interpreting your CSS in quirks mode, resulting in the unpredictable behavior.
您确定要正确指定您的文档类型吗?也许您的浏览器在怪异模式下解释您的CSS,导致不可预测的行为。
I don't think jQuery will be of much help to you if letter-spacing isn't working properly. You can't alter the positions of individual letters unless every letter is inside its own element, such as a span, which just seems messy.
如果字母间距不正常,我认为jQuery对你没什么帮助。你不能改变单个字母的位置,除非每个字母都在它自己的元素内,例如跨度,这看起来很麻烦。
EDIT: If you want to shrink the horizontal width of the characters themselves, that would theoretically be done with font-stretch: narrower, for example. But it seems the major browser don't support it properly or at all. Apparently it was in CSS2, but then dropped in CSS2.1 and is now planned for CSS3.
编辑:如果你想缩小字符本身的水平宽度,理论上可以使用font-stretch:narrower。但似乎主浏览器不能正确支持它或根本不支持它。显然它是在CSS2中,但随后在CSS2.1中被删除,现在计划用于CSS3。
#7
I'd have to question the wisdom of even trying to do this in the first place. Just replace the darn graphic with something readable; or something you can duplicate with your text.
我不得不质疑甚至首先尝试这样做的智慧。只需用可读的东西替换darn图形;或者你可以用你的文字复制的东西。
What you want to do is change the text's font. I think your best bet is looking through a bunch of different fonts that come preinstalled for your userbase and trying for the best font+size combo.
你想要做的是改变文本的字体。我认为您最好的选择是查看为您的用户群预装的一系列不同的字体,并尝试使用最佳的字体+大小组合。
#8
You may be able to track down the original font with WhatTheFont
您可以使用WhatTheFont追踪原始字体
#9
Approaching ten years later, font-stretch is still virtually unsupported. But transform:scaleX(); will do. Here.
十年后,font-stretch几乎不受支持。但是变换:scaleX();会做。这里。