CSS 字符间距letter-spacing属性

letter-spacing属性用来增加或减少字符或汉字之间的距离，默认值为0。该属性接受一个的正长度值或负的长度值；设置一个正的长度值时，字符之间的间隔会增加；设置一个负的长度值时，字符之间的间隔会减少，让字符挤得更紧，甚至出现重叠。

对于字数较少，却又要突出表现的内容，如诗词等，可以根据需要，增加适当的字符间距，让内容稍微稀疏一点，会比较美观。如，对于下面这首古诗：

<h1>静夜思</h1>
<h2>唐•李白</h2>
<p>床前明月光，疑是地上霜。</p>
<p>举头望明月，低头思故乡。</p>

希望 h1 标题和正文的内容稀疏明朗，就可以使用 letter-spacing属性来实现。CSS代码如下：

h1 {
letter-spacing: 10px;
}
p {
letter-spacing: 3px;
}

上述代码的运行结果如图 3‑18 所示：

图3-18 letter-spacing属性效果

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。

CSS 字符间距letter-spacing属性相关推荐

css中字体之间的距离是什么意思,css字符间距(css文字间距怎么设置)
怎么样控制字和字之间的间距,而不是行间距. 在需要设置的CSS标签下加入一下代码即可.word-spacing:8px;letter-spacing: 1px; line-height:25px是绝对 ...
c语言如何字符间距,css 字间距、CSS字体间距、css 字符间距设置
「CSS」文本编排相关的CSS属性设置 1.font-family:设置字体族. 格式为font-family:字体1,字体2,--,通用字体族|inherit. 通用字体族,是指一类相似的字体.W3 ...
2016/8/2 CSS学习笔记 css 字间距、CSS字体间距、css 字符间距
1.text-indent设置抬头距离css缩进即对,对应div设置css样式text-indent : 20px; 缩进了20px 2.letter-spacing来设置字与字间距_字符间距离,字 ...
css 字间距离_css 字体字符间距设置
使用到的css样式属性单词text-indent抬头距离,letter-spacing字与字间距. Css字间距.div css字符间距样式实例 1.text-indent设置抬头距离css缩进 im ...
CSS行间距line-height和字间距、字体间距、字符间距详解
行间距line-height 行高line-height的值可以为百分比数字 | 由浮点数字和单位标识符组成的长度值,允许为负值.其百分比取值是基于字体的高度尺寸. 在文章中,要实现调节设置每行文字字 ...
css 字体字符间距设置
css 字间距,使用css来控制字与字之间距离,也叫css字间距方法. 使用到的css样式属性单词text-indent抬头距离,letter-spacing字与字间距. Css字间距.div css ...
html怎样调整文字边距,css字间距怎么调？
在CSS中,调整字与字之间的间距的属性是letter-spacing,你通过更改标签的letter-spacing属性值来设置标签内字与字之间的间距. 使用letter-spacing属性设置字间距示 ...
html如何设置字段间距,css字间距怎么设置？
css文字与文字之间的间距怎么调整?相信有很多小伙伴都会有这样的疑问.本章就给大家介绍css设置文字间距的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. css word-sp ...
CSS的letter-spacing属性字符间距设置
letter-spacing: 3em; h1 {letter-spacing:2px;} h2 {letter-spacing:-3px;}<h1>This is heading 1&l ...

CSS 字符间距letter-spacing属性

CSS 字符间距letter-spacing属性相关推荐

最新文章

热门文章