Question

CSS可以在CSS中调整字距调整吗？我希望能够克服一个文本块，使其看起来像一个文本块（左右边缘都对齐）。

编辑：将http://letteringjs.com/与http://www.kernjs.com/结合使用可以很好地进行字距调整。至于原始问题，http://fittextjs.com/很好地解决了这个问题。

Answer 1

当用户Typeoneerror回答时，letter-spacing会不影响字距调整。请参阅Wikipedia上的字距调整概念。

字距不受字符间距控制，CSS1或CSS2没有 font-kerning 。新规范CSS3尚未被批准为标准（W3C推荐标准），但有font-kerning的建议属性，见2012草案，

http://www.w3.org/TR/css3-fonts/#font-kerning-prop

仅限特定字体，例如OpenFonts, have this property。

CSS 不“控制字距调整”，但如果使用非零字母间距，“人类字距调整感知”可能会丢失。示例：使用letter-spacing:-0.1em增强字距调整并使用letter-spacing:0.5em丢失。

使用CSS1 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 will be a recommendation ...请帮助改进此文本（和/或维基百科的链接文本！）。

Answer 2

使用the letter-spacing attribute可以在CSS中实现对字距调整的一些控制。

但是，如果你只需要“左右两边对齐”，你可能想尝试使用text-align: justify。

编辑： CSS3定义了一个font-kerning属性，可用于启用或禁用特定元素的字距调整。

Answer 3

左右两侧的排版对齐称为对齐。 Kerning更多的是调整字母之间的空格，与对齐没有太大关系（因为对齐文本更多地调整单词之间的空格而不是字符）。无论如何，您要将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>

Answer 4

查看我的项目 ~~Jerning.com~~ [见下文]了解字距。

用法很简单，基于字符对，例如：

<h1>Hello World</h1>

W和o在没有字距的情况下会显得很奇怪。

简单地说：

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

将在W标记中的所有大写o和小写h1之间应用字距调整。

我退出了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);

不幸的是我不再拥有非缩小版本了;以上并不保证所有案件都有效！

Answer 5

字距，字母间距（又称跟踪）和对齐块是三种不同的排版属性。

我发现关于字距调整的最新链接来自TypeKit，其中包含如何使用其webfonts启用嵌入字距调整数据的说明。 http://blog.typekit.com/2014/02/05/kerning-on-the-web/#comment-19916

手动字距调整 - 调整单词中每个单个字母之间的空格 - 始终是品味和偏好的问题。并且可以通过kern.js或kerning.js来实现

TypeKit解决方案的独特之处在于它能够通过利用OpenType字体中的元数据自动对所有正文文本进行字距调整。我刚刚发现它，我很高兴在我的下一个项目中使用它！

为便于参考，链接中讨论的新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";

Answer 6

似乎需要的是动态字距调整，因为Thread Opener以及我/需要的是：通过在单词之间添加空格来尽可能地阻止对齐，从而留下“漏洞”在文本块中。现在改为使用左对齐线（因此没有添加空格），计算它的物理宽度，与可用的块宽度进行比较，将差异除以该行中的字母数，然后将此值用作字母空间加法。这看起来更像是报纸布局，而不仅仅是文本对齐：对齐。我不得不说，我不确定文本块中的行是否可以在动态页面布局中“按行号”访问，可以吗？编辑：昨天我试过了。我使用innerHTML来读取文本块的内容，然后我将其拆分并复制到一个数组中，每个条目/行都有自己的DIV标记和id。然后我相应地调整了字母间距。只有少数最新的浏览器支持subpixel-letterspacing，因此它只适用于中型到大型字体。我遇到的问题是：由于没有Subpixelsupport它只能在某种程度上起作用，虽然外观漂亮，所以我试图用text-align属性另外证明结果，但是在我改变了字母间距之后它没有用。左右alignement工作，但不“合理”，这个只在添加letterspacing之前工作。可能是一个歌剧问题。如果我能解决这个问题，那么我将发布代码。

编辑2.它现在有效但由于某种原因我不能在这里发布代码。这是来自手机上的webkit 10.3.3.13。如果您对代码感兴趣，请给我发消息。

在CSS中调整字距

6 个答案: