微信小程序界面设计入门课程-样式wxss中使用css课程-文本-letter-spacing字母间隔

样式wxss中使用css课程-文本-letter-spacing字母间隔

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：https://edu.csdn.net/topic/huangjuhua

基础语法
letter-spacing 属性与 word-spacing 的区别在于，字母间隔修改的是字符或字母之间的间隔。
注释：允许使用负值，这会让字母之间挤得更紧。
与 word-spacing 属性一样，letter-spacing 属性的可取值包括所有长度。默认关键字是 normal（这与 letter-spacing:0 相同）。输入的长度值会使字母之间的间隔增加或减少指定的量：

h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}

<h1>This is header 1</h1>
<h4>This is header 4</h4>

可能的值
值 描述
normal 默认。规定字符间没有额外的空间。
length 定义字符间的固定空间（允许使用负值）。
inherit 规定应该从父元素继承 letter-spacing 属性的值。

小程序应用

Wxml代码

<view>
This is some text。 这里是一些文本。
</view>
<view class='da'>
This is some text。 这里是一些文本。
</view>
<view class='xiao'>
This is some text。 这里是一些文本。
</view>

Wxss代码

.da{
 letter-spacing: 5px;/*增加字符间之空间*/
}
.xiao{
 letter-spacing: -0.3em;/*减少字符间之空间*/
}

效果如下图

欢迎大家收看我的视频教程：微信小程序样式入门到精通(wxss,css)（微信小程序界面设计必备技能）