调整CSS中的字距微调

gdrx4gfi  于 2023-01-22  发布在  其他
关注(0)|答案(6)|浏览(141)

有没有可能用CSS来调整CSS中的字距?我希望能够调整一个文本块的字距,使它实际上看起来像一个文本块(左边缘和右边缘都对齐)。
编辑:将http://letteringjs.com/http://www.kernjs.com/结合使用可以获得非常好的字距调整效果。至于最初的问题,http://fittextjs.com/很好地解决了这个问题。

qrjkbowd

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属性,您可以 * 丢失 * 或 * 增强
字距调整感知,并且在“字母间距文本”中,您可以 * 模拟字距调整 *:

<div style="font-size:20pt;background-color:#bcd">

  VAST   <small>(normal)</small> 
  <br/>

  <span style="letter-spacing:-0.1em">VAST</span>  
  <small>(enhance perception)</small>
  <br/>

  <span style="letter-spacing:0.5em">VAST</span> 
  <small>(lost perception)</small>
  <br/>

  <!-- SIMULATE KERNING AT SPACED TEXT -->
  <div style="letter-spacing:6pt">
     SIMULATE: <span style="letter-spacing:4pt">VA</span>ST TEXT
  </div>

</div>

参见above example here
编辑2014年:我今天没有修改上面的原文,* 我正在打开proofreading和更新的答案(Wiki模式)*。目前这是投票最多的答案(21比10),HTML5将是一个推荐...请帮助改进这段文字(和/或维基百科的链接文本!)

y0u0uwnf

y0u0uwnf2#

**更新:**CSS3定义了一个font-kerning属性,可用于启用或禁用特定元素的字距调整。
**旧答案:**在CSS中使用the letter-spacing attribute可以实现对字距微调的一些控制。

但是,如果您所需要的只是得到“左右边缘都对齐”,那么您可能想尝试使用text-align: justify

k75qkfdt

k75qkfdt3#

左右对齐被称为对齐。字距调整更多的是调整字母之间的空格,与对齐没有太大关系(因为对齐文本更多的是调整单词之间的空格,而不是字符)。无论如何,您需要将text-align属性设置为justify

<p style="text-align: justify">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vestibulum tincidunt ante mollis ornare. Nulla id
    nulla justo. Mauris quis sapien ac orci consequat accumsan. Quisque iaculis ipsum ac nulla venenatis sagittis. Aliquam
    hendrerit mi a turpis malesuada nec dictum est vehicula. Curabitur quis dolor eu metus malesuada dictum adipiscing et
    risus. Aliquam erat volutpat. Aenean pharetra aliquam magna, fringilla tempus erat iaculis eu. Suspendisse potenti.
    Sed fringilla lobortis viverra.
</p>
wgx48brx

wgx48brx4#

字距调整、字母间距(又名字距调整)和对齐块是三种不同的排版属性。
我找到的关于字距调整的最新链接来自TypeKit,其中提供了关于如何启用嵌入式字距调整数据及其Web字体的说明。http://blog.typekit.com/2014/02/05/kerning-on-the-web/#comment-19916
手动字距调整--调整单词中每个字母之间的间距--将永远是一个品味和偏好的问题,可以通过kern.js或kerning.js实现
TypeKit解决方案对我来说最突出的地方是它能够利用OpenType字体中的 meta数据自动对所有正文文本进行字距调整。我刚刚找到了它,很高兴能在我的下一个项目中使用它!
为便于参考,链接中讨论的新CSS属性如下:

text-rendering: optimizeLegibility;
font-feature-settings: "kern";
font-kerning: normal;

font-feature-settings的前缀包括:

-webkit-font-feature-settings: "kern";
  -moz-font-feature-settings: "kern";
  -moz-font-feature-settings: "kern=1";
6rvt4ljy

6rvt4ljy5#

看看我的项目Jerning.com [见下文]的字距文本。
用法非常简单,以字符对为基础,例如:

<h1>Hello World</h1>

Wo在没有字距调整的情况下看起来会很奇怪。
只需:

$('h1').jerning("Wo", -0.1);

这将在X1 M4 N1 X标签中的所有大写X1 M2 N1 X和小写X1 M3 N1 X之间应用字距调整。
我退休的Jerning项目,但请找到下面的缩小源代码包含在您的项目,如果你愿意:

(function(b){function e(a,c){var d;if(b.isPlainObject(a))d=a;else try{d=b.parseJSON(a)}catch(f){d=b.parseJSON('{"'+a+'":'+c+"}")}return d}function h(a,c){var d="";b(a).replaceWith(b.map(a.nodeValue.split("").reverse(),function(a,e){var g=a;b.each(c,function(c,e){d==c[1]&&a==c[0]&&(g=b.fn.wrapCharacter(a,e))});d=a;return g}).reverse().join(""))}b.fn.wrapCharacter=function(a,b){return'<span style="letter-spacing:'+b+'em">'+a+"</span>"};b.fn.jerning=function(a,c){var d=e(a,c),f=this.contents();b.each(f,
function(a,c){1==c.nodeType&&b(c).jerning(d);3==c.nodeType&&h(c,d)});return this}})(jQuery);

不幸的是,我没有非缩小版了;以上所述并不保证所有的情况下工作!

mrwjdhj3

mrwjdhj36#

什么似乎是需要的是动态字距调整,因为什么线程开放器,也我是/是在需要的是:justify通过在单词之间添加空格来尽可能好地对齐文本块,这会在文本块中留下“洞”。现在,改为左对齐行(因此没有增加空格),计算其物理宽度,与可用块宽度比较,将差值除以该行中的字母数,然后使用这个值作为增加的字母间隔。这看起来更像一个报纸布局而不仅仅是一个text-align:justify。我不得不说,我不确定在一个动态页面布局中,文本块中的行是否可以“通过行号”访问,可以吗?编辑:我昨天试过了。我使用innerHTML读取文本块的内容,然后将其拆分并复制到一个数组中,其中每个条目/行都有自己的DIV标签和ID。然后我相应地调整字母间距。只有少数最新的浏览器支持子像素字母间距,所以它只能用于中等大小到大尺寸的字体。我遇到的问题是:由于没有亚像素支持,它只能在某种程度上工作,虽然看起来不错,所以我尝试额外的调整结果与文本对齐属性,但它不工作后,我改变了字母间距。左和右对齐工作,但不“调整”,这一个工作,只有在增加字母间距。可能是一个歌剧的问题。如果我能修复这个问题,然后我会张贴的代码。
编辑2.它的作品现在,但由于某种原因,我不能在这里发布代码.这是从webkit10.3.3.13在移动的.给我一个消息,如果你有兴趣的代码.

相关问题