在CSS中调整字距

Question

是否可以使用CSS调整CSS中的字距调整？我希望能够克服一个文本块,使其实际上看起来像一个文本块(左右边缘都对齐).

编辑:使用http://letteringjs.com/与http://www.kernjs.com/一起使用非常好的字距.至于原来的问题,http: //fittextjs.com/很好地解决了这个问题.

Answer 1

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

字距不受字符间距控制,并且CSS1或CSS2 没有字体字距.新规范CSS3尚未被批准作为标准(W3C推荐标准),但有一个属性被提议font-kerning,参见2012年草案,

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

只有特定字体(如OpenFonts)才具有此属性.

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>

请参阅上面的示例.

编辑2014:我今天没有更改上面的原始文本,我正在为您的更改(Wiki模式)打开答案,用于校对和更新.目前这是最多投票的答案(21对10),HTML5将是一个推荐 ...请帮助改进这个文本(和/或维基百科的链接文本!).

Answer 2

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

但是,如果您只需要"左右两边对齐",则可能需要尝试使用text-align: justify.

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

Answer 3

左右的版式对齐称为对齐。字距调整更多地是关于字母之间的间距的调整，与对齐没有太大关系（因为证明文本的合理性是单词之间的间距比字符更多的调整）。无论如何，您要将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>