有没有可能用CSS来调整CSS中的字距?我希望能够调整一个文本块的字距,使它实际上看起来像一个文本块(左边缘和右边缘都对齐)。
编辑:将http://letteringjs.com/与http://www.kernjs.com/结合使用可以获得非常好的字距调整效果。至于最初的问题,http://fittextjs.com/很好地解决了这个问题。
有没有可能用CSS来调整CSS中的字距?我希望能够调整一个文本块的字距,使它实际上看起来像一个文本块(左边缘和右边缘都对齐)。
编辑:将http://letteringjs.com/与http://www.kernjs.com/结合使用可以获得非常好的字距调整效果。至于最初的问题,http://fittextjs.com/很好地解决了这个问题。
6条答案
按热度按时间qrjkbowd1#
用户回答Typeoneerror时,
letter-spacing
不影响字距调整。请参阅Wikipedia中的 * 字距调整概念 。字距调整不受字母间距控制,CSS 1或CSS 2没有 font-kerning。新规范CSS3尚未被批准为标准(W3C建议),但为
font-kerning
建议了一个属性,请参见2012年草案,https://www.w3.org/TR/css-fonts-3/#font-kerning-prop
只有特定字体(如OpenFonts)才具有此属性。
CSS不是“控制字距调整”,但如果使用非零字母间距,则可能会丢失“ 人类字距调整感知 ”。例如:使用
letter-spacing:-0.1em
增强字距微调,使用letter-spacing:0.5em
丢失字距微调。使用CSS 1
letter-spacing
属性,您可以 * 丢失 * 或 * 增强字距调整感知,并且在“字母间距文本”中,您可以 * 模拟字距调整 *:参见above example here。
编辑2014年:我今天没有修改上面的原文,* 我正在打开proofreading和更新的答案(Wiki模式)*。目前这是投票最多的答案(21比10),HTML5将是一个推荐...请帮助改进这段文字(和/或维基百科的链接文本!)
y0u0uwnf2#
**更新:**CSS3定义了一个font-kerning属性,可用于启用或禁用特定元素的字距调整。
**旧答案:**在CSS中使用the letter-spacing attribute可以实现对字距微调的一些控制。
但是,如果您所需要的只是得到“左右边缘都对齐”,那么您可能想尝试使用
text-align: justify
。k75qkfdt3#
左右对齐被称为对齐。字距调整更多的是调整字母之间的空格,与对齐没有太大关系(因为对齐文本更多的是调整单词之间的空格,而不是字符)。无论如何,您需要将
text-align
属性设置为justify
:wgx48brx4#
字距调整、字母间距(又名字距调整)和对齐块是三种不同的排版属性。
我找到的关于字距调整的最新链接来自TypeKit,其中提供了关于如何启用嵌入式字距调整数据及其Web字体的说明。http://blog.typekit.com/2014/02/05/kerning-on-the-web/#comment-19916
手动字距调整--调整单词中每个字母之间的间距--将永远是一个品味和偏好的问题,可以通过kern.js或kerning.js实现
TypeKit解决方案对我来说最突出的地方是它能够利用OpenType字体中的 meta数据自动对所有正文文本进行字距调整。我刚刚找到了它,很高兴能在我的下一个项目中使用它!
为便于参考,链接中讨论的新CSS属性如下:
font-feature-settings
的前缀包括:6rvt4ljy5#
看看我的项目Jerning.com [见下文]的字距文本。
用法非常简单,以字符对为基础,例如:
W
和o
在没有字距调整的情况下看起来会很奇怪。只需:
这将在X1 M4 N1 X标签中的所有大写X1 M2 N1 X和小写X1 M3 N1 X之间应用字距调整。
我退休的Jerning项目,但请找到下面的缩小源代码包含在您的项目,如果你愿意:
不幸的是,我没有非缩小版了;以上所述并不保证所有的情况下工作!
mrwjdhj36#
什么似乎是需要的是动态字距调整,因为什么线程开放器,也我是/是在需要的是:justify通过在单词之间添加空格来尽可能好地对齐文本块,这会在文本块中留下“洞”。现在,改为左对齐行(因此没有增加空格),计算其物理宽度,与可用块宽度比较,将差值除以该行中的字母数,然后使用这个值作为增加的字母间隔。这看起来更像一个报纸布局而不仅仅是一个text-align:justify。我不得不说,我不确定在一个动态页面布局中,文本块中的行是否可以“通过行号”访问,可以吗?编辑:我昨天试过了。我使用innerHTML读取文本块的内容,然后将其拆分并复制到一个数组中,其中每个条目/行都有自己的DIV标签和ID。然后我相应地调整字母间距。只有少数最新的浏览器支持子像素字母间距,所以它只能用于中等大小到大尺寸的字体。我遇到的问题是:由于没有亚像素支持,它只能在某种程度上工作,虽然看起来不错,所以我尝试额外的调整结果与文本对齐属性,但它不工作后,我改变了字母间距。左和右对齐工作,但不“调整”,这一个工作,只有在增加字母间距。可能是一个歌剧的问题。如果我能修复这个问题,然后我会张贴的代码。
编辑2.它的作品现在,但由于某种原因,我不能在这里发布代码.这是从webkit10.3.3.13在移动的.给我一个消息,如果你有兴趣的代码.