css字符间距怎么设置


本文摘自PHP中文网,作者青灯夜游,侵删。

在css中,字符间距可以使用letter-spacing属性来设置,语法格式“letter-spacing:间距值;”。letter-spacing属性可以增加或减少字符间的空白,允许使用负值,这会让字符之间的间隔减少,让字符挤得更紧。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

在css中,可以使用letter-spacing属性来设置字符间距。

letter-spacing属性可以增加或减少字符间的空白(字符间距)。允许使用负值,这会让字母之间挤得更紧。

示例:

1

2

3

<p>这是正常的字符间距</p>

<p style="letter-spacing:10px;">这是加宽10px字符间距</p>

<p style="letter-spacing:-10px;">这是缩减3px字符间距</p>

1.png

说明:

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

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

1

2

3

4

<h1>静夜思</h1>

<h2>唐?李白</h2>

<p>床前明月光,疑是地上霜。</p>

<p>举头望明月,低头思故乡。</p>

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

1

2

3

4

5

6

h1 {

 letter-spacing: 10px;

}

p {

 letter-spacing: 3px;

}

(学习视频分享:css视频教程)

以上就是css字符间距怎么设置的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

css实现滚动阴影效果的小技巧(分享)

css如何设置超出部分隐藏

css中的display是什么意思

css超出显示滚动条的方法有哪些

css代表什么

css nav-up属性怎么用

css solid什么意思

css设置table圆角边框不起作用是什么原因

css怎么设置鼠标经过元素显示图片

css实现箭头和带缺口提示框

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...