• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • letter-spacing

    CSS 的 letter-spacing 属性用于设置文本字符的间距表现。

    示例

    /* Keyword value */
    letter-spacing: normal;
    
    /*  values */
    letter-spacing: 0.3em;
    letter-spacing: 3px;
    letter-spacing: .3px;
    
    /* Global values */
    letter-spacing: inherit;
    letter-spacing: initial;
    letter-spacing: unset;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    浏览器都支持letter-spacing

    语法:

    letter-spacing:normal| <length>

    取值

    • normal:此间距是按照当前字体的正常间距确定的。和0不同的是,用户代理根据此属性来确定文字的默认对齐方式。
    • <length>:指定文字间的间距以替代默认间距。可以是负值,但有可能会出现 implementation 限制。用户代理不会在此基础上进一步增加或缩减间距来对齐文字。

    说明:

    检索或设置对象中的字符之间的最小,最大和最佳间隙。

    • 该属性将指定的间隔添加到每个文字(包括单词内的每个字母)之后;
    • <length>不能被应用于一行的开始和结束;
    • 对应的脚本特性为letterSpacing
    默认值normal
    适用于所有元素
    继承性
    动画性非normal值时
    计算值指定值

    可解决的问题

    一个很大的正或负的letter-spacing值会将应用这个样式的单词变为不可读的。给文本letter-spacing属性应用了一个很大的正值,字母之间的距离会很远,以至于文本中的单词将显示为一系列单独的,无有任何关联的字母。给文本letter-spacing属性应用了一个很大的负值,字母将会互相重叠到一个点,在这个点上单词可能无法识别了。

    最佳的易辨认的字母间距(letter-spacing)必须根据具体情况来确定,因为不同的字体系列具有不同的字符宽度。没有任何一个值可以确保所有字体系列自动保持它们的可读性。

    可访问性考量

    较大的正值或负值letter-spacing将使应用样式的单词不可读。对于具有非常大的正值样式的文本,字母之间的距离会太远,以至于单词将看起来像一系列单独的,未连接的字母。对于具有非常大的负值样式的文本,字母将相互重叠,直到单词可能无法识别的地步。

    由于不同的字体系列具有不同的字符宽度,因此必须根据具体情况确定清晰的字母间距。没有任何一种值可以确保所有字体系列自动保持其可读性。

    例子

    //HTML
    <p class="normal">letter spacing</p>
    <p class="em-wide">letter spacing</p>
    <p class="em-wider">letter spacing</p>
    <p class="em-tight">letter spacing</p>
    <p class="px-wide">letter spacing</p>
    
    //CSS
    .normal   { letter-spacing: normal; }
    .em-wide  { letter-spacing: 0.4em; }
    .em-wider { letter-spacing: 1em; }
    .em-tight { letter-spacing: -0.05em; }
    .px-wide  { letter-spacing: 6px; }
    
    h1{letter-spacing:2px}
    h2{letter-spacing:-3px}
    

    上篇:word-spacing

    下篇:text-overflow