前端从零开始(59)letter-spacing 字间距

letter-spacing 字间距

当我们需要扩大或者减少字符之间的距离时候,会用到这个属性。如果我们需要调整字符间的距离可以用到这个属性。

1. 官方定义

letter-spacing 属性增加或减少字符间的空白(字符间距)。

2. 解释

该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其他字符框要窄,指定长度值时,会调整字母之间通常的间隔。因此,normal 就相当于值为 0。

这个属性常用来修改文字之间的距离,它允许为负值,默认的字符间的距离为 0。如果数值小于 0 字符会紧凑,大于 0 时越大越松散。

3. 语法

.demo{
letter-spacing: value;
}

值说明

参数名称 参数类型
value ‘px’

通过上面图片,我们可以看到从左到右每个字符的右侧都增加了 10px。

4. 兼容性

IE Edge Firefox Chrome Safari Opera ios Android
all all all all all all all all

5. 实例

  1. 字符之间增加 5px 的间距。
.demo{
letter-spacing:5px;
}

效果图

前端从零开始(59)letter-spacing 字间距
图片描述

字符之间增加 5px 的间距效果图

  1. 设置字符之间距离为 -2px。
.demo{
letter-spacing:-2px;
}

效果图

前端从零开始(59)letter-spacing 字间距
图片描述

设置字符之间距离为 -2px 效果图

  1. 通过使用 letter-spacing 清除我们编辑 html 代码时候元素设定 inline-block 之后出现的空格。
<div class="demo">
<span>慕课网</span>
<span>学习</span>
</div>
.demo{
letter-spacing:-5px;
}
.demo>span{
display: inline-block;
width: 50px;
background: red;
letter-spacing:normal
}

效果图

前端从零开始(59)letter-spacing 字间距
图片描述

使用 letter-spacing 清除空格效果图

上图是 span 只设定了 display: inline-block;,下图我们通过 在父级元素上设置letter-spacing去除了span 之间空格的距离。而在span中又重置了letter-spacing让文字恢复了它们之间的距离,让其不在拥挤。不过我们不推荐这种方式,建议内联块级元素不要分行。

6. 经验分享

与 word-spacing 的区别:

word-spacing 这个属性只能作用英文,意思是两个英文单词之间的距离,这里要注意是‘英文单词’而不是‘字符’,而 letter-spacing 没有任何限制可以作用于‘任何字符’。

7. 小结

  1. 这个属性仅仅对字符起作用,不能作用于元素标签上面。

  2. 这个属性不可以是 % 这样的计量单位,因为它不是一个距离,没有相对点,浏览器不知道该如何解释。

微信公众号

扫码关注


版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由半码博客整理,本文链接:https://www.bmabk.com/index.php/post/18968.html

(0)

相关推荐

发表回复

登录后才能评论
半码博客——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!