什么是字母间距
字母间距(letter-spacing)是指一系列文字字符之间的水平间距。默认设置为0,字母间隙会占用字符宽度的一小部分。
对于那些需要强调个别字母的文本,如标题、按钮等,适当调整字母间距可以让这些文字看起来更加突出,这也是调整字母间距的主要应用场景。
如何设置字母间距
在 CSS 中,通过字母间距属性 letter-spacing 来设置字母间距,该属性定义了正文中的字符间隔。可取的值包括一个正的或负的长度值(如px、em、rem)或者正值和负值的百分比。
对于单个元素应用字母间距
我们可以对单独的html元素应用字母间距,如下:
p {
letter-spacing: 0.2em;
}
上面的代码将会为所有 <p> 元素应用 0.2em 的字母间距。
针对特定的文本应用字母间距
有时可能希望针对某些文本块应用单独的字母间距,而不是应用于所有文本块。在这种情况下,我们可以通过包裹特定文本的标签来实现。
h1 span {
letter-spacing: 0.05em;
}
上面的代码将会为所有在 <h1> 标签内使用 <span> 标签包裹的文本块应用 0.05em 的字母间距。
使用百分比值应用字母间距
要想使字母间距保持与文字大小的一致性,可以使用百分比值来应用字母间距。具体来说,我们可以通过在设置字母间距时,将百分比值应用于一个基准值来实现,该基准值通常是文本的字体大小。
h2 {
font-size: 36px;
letter-spacing: 5%;
}
上面的代码将会为所有 <h2> 元素应用与文本大小为36px时字母间距宽度相同的字母间距。
使用 em 值应用字母间距
如果您希望调整字母间距以反映其他文本属性(例如字体大小),则可以使用 em 值指定字母间距。由于 em 值相对于字体大小而言,因此它们在让文本元素相对于其父元素进行缩放时尤其有用。
h3 {
font-size: 18px;
letter-spacing: 0.5em;
}
上面的代码将会为所有 <h3> 元素应用 0.5em 的字母间距(即使您更改了文本元素的字体大小,字母间距也将会保持不变)。