在 CSS 中调整字距

Adjusting Kerning in CSS

提问by Jeffrey Lo

Is it possible with CSS to adjust kerning in CSS? I'd like to be able to kern a block of text such that it will actually look like a block of text (both left and right edges are aligned).

是否可以使用 CSS 调整 CSS 中的字距调整？我希望能够对文本块进行字距调整，使其实际上看起来像一个文本块（左右边缘都对齐）。

EDIT: Using http://letteringjs.com/in conjunction with http://www.kernjs.com/makes for pretty good kerning. As for the original problem, http://fittextjs.com/solves this nicely.

编辑：将http://letteringjs.com/与http://www.kernjs.com/结合使用可以实现非常好的字距调整。至于最初的问题，http://fittextjs.com/ 很好地解决了这个问题。

回答by Peter Krauss

As user Typeoneerror answered, letter-spacingdoes notinfluence kerning. See the kerning conceptat Wikipedia.

由于用户Typeoneerror回答，letter-spacing并没有影响字距。见字距概念在维基百科。

Kerning is not controlled by letter-spacing, and there are no font-kerningfor CSS1 or CSS2. The new specification, CSS3, has not been approved as a standard (W3C Recommendation), but there are a property proposed for font-kerning, see 2012 draft,

字距调整不受字母间距控制，并且CSS1 或 CSS2没有字体字距调整。新规范 CSS3 尚未被批准为标准（W3C 推荐标准），但已提议用于 的属性font-kerning，请参阅 2012 草案，

https://www.w3.org/TR/css-fonts-3/#font-kerning-prop

https://www.w3.org/TR/css-fonts-3/#font-kerning-prop

Only specific fonts, like OpenFonts, have this property.

只有特定的字体，如OpenFonts，才有这个属性。

CSS not"controls kerning", but if using non-zero letter-spacing the "human kerning perception" can be lost. Example: enhance kerning with letter-spacing:-0.1emand lost with letter-spacing:0.5em.

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

With CSS1 letter-spacingproperty you can lostor enhancekerning perception, and into a "letter-spaced text" you can simulate kerning:

使用 CSS1letter-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>

See the above example here.

在此处查看上面的示例。

---

---

EDIT 2014: I not changed the original text above today, I am opening the answer for your changes (Wiki mode), for proofreadingand updates. At the moment this is the most voted answer (21 vs 10) and HTML5 will be a recommendation... Please, help to improve this text (and/or the Wikipedia's linked text!).

编辑2014 年：我今天没有更改上面的原文，我正在为您的更改（Wiki 模式）打开答案，以进行校对和更新。目前，这是投票最多的答案（21 对 10），HTML5 将成为推荐……请帮助改进此文本（和/或维基百科的链接文本！）。

回答by Frédéric Hamidi

Some control on kerning can be achieved in CSS using the letter-spacing attribute.

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

However, if all you need is to get "both left and right edges aligned", you might want to try using text-align: justify.

但是，如果您只需要让“左右边缘对齐”，您可能想尝试使用text-align: justify.

EDIT:CSS3 defines a font-kerningproperty that can be used to enable or disable kerning for specific elements.

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

回答by typeoneerror

Typographic alignment both left and right is called justification. Kerning is more about the adjustment of spaces between letters, and doesn't have much to do with alignment (because justifying text is more adjustment of spaces between words than characters). Anyway, you want to set the text-alignproperty to justify:

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

回答by dav_i

Check out my project Jerning.com[see below] for kerning text.

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

Usage is very simple and is based of pairs of characters, for example:

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

<h1>Hello World</h1>

The Wand owill look weird without kerning.

如果没有字距调整，Wando会看起来很奇怪。

Simply do:

简单地做：

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

which will apply kerning between all upper case Ws and lower case os in h1tags.

这将在标签中的所有大写Ws 和小写os之间应用字距调整h1。

---

---

I retired the Jerning project but please find the minified source code below for inclusion in your project if you wish:

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

Unfortunately I don't have the non-minified version any more; the above comes with no guarantees of all cases working!

不幸的是，我没有非缩小版了；以上不保证所有情况都能正常工作！

回答by jpostdesign

Kerning, letter-spacing (aka tracking) and justify blocks are three different typography properties.

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

The newest link I found about kerning is from TypeKit, with directions on how to enable the embedded kerning data with their webfonts. http://blog.typekit.com/2014/02/05/kerning-on-the-web/#comment-19916

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

Manual kerning - adjusting the space between each single letter in a word - will always be a matter of taste and preference. And can be achieved thru kern.js or kerning.js

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

What makes the TypeKit solution stand out to me, is it enables kerning for all body text automatically by utilizing the meta data in OpenType fonts. I just found it, and am pretty excited to use it in my next project!

TypeKit 解决方案对我来说脱颖而出的原因是它通过利用 OpenType 字体中的元数据自动启用所有正文文本的字距调整。我刚刚找到它，很高兴能在我的下一个项目中使用它！

For easy reference, the new css properties discussed in the link are:

为了便于参考，链接中讨论的新 css 属性是：

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

With prefixes for font-feature-settingsincluding:

带有前缀，font-feature-settings包括：

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

回答by dd_1138

What seems to be required is dynamic kerning, because what the Thread Opener and also I am/is in need is this: justify does block alignment, as good as possible, by adding space between the words, which leaves "holes" in the text block. Now take instead the line with left align (so no added space), calculate it's physical width, compare with block width available, divide the diffrence trough the number of letters in that line, then use this value as the letterspace addition. This will look more like a newspaper layout than only a text-align:justify. I have to say tho, I am not sure whether the lines in a textblock can be accessed "by line number" in a dynamic page layout, can it? edit: I tried that yesterday. I use innerHTML to read the content of a text block, then I split and copy it to an array of which each entry/line gets its own DIV tag and id. Then I ajust letterspacing accordingly. Only few of the newest browsers support subpixel-letterspacing, so it works only with medium to big sized fonts. The problem I run into is: due to no Subpixelsupport it works only to some degree, although nice looking, so I tried to additionally justify the result with the text-align attribute, but it's not working after I altered letterspacing.. Left and right alignement works, but not "justify", this one works only before the addition of letterspacing. Could be an opera problem. If I can fix this then I'll post the code.

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

edit 2. it works now but for some reason I cannot post code here. that is from webkit 10.3.3.13 on mobile. Send me a message if you're interested in the code.

编辑 2. 它现在可以工作，但由于某种原因我不能在这里发布代码。那是来自移动设备上的 webkit 10.3.3.13。如果您对代码感兴趣，请给我留言。