• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • font-kerning

    版本:CSS3

    font-kerning CSS 属性设置是否使用字体中储存的字距信息。Kerning(字距)定义了字母的分布情况。对于良好地规定了字距的字体,字距特性使得字母分布更为统一,阅读体验更佳。

    示例

    /* Keyword values */
    font-kerning: auto;
    font-kerning: normal;
    font-kerning: none;
    
    /* Global values */
    font-kerning: inherit;
    font-kerning: initial;
    font-kerning: unset;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    IE不支持font-kerning。其余的浏览器都支持font-kerning

    语法

    font-kerning:auto| normal| none

    取值

    • auto:浏览器来决定是否使用字体字距。比如,一些浏览器会在小字体的情况下禁用字距,因为这会使得文本可读性下降。
    • normal:必须应用字体中的字距信息。
    • none:禁用字体中的字距信息。
    默认值auto
    适用于所有元素,也适用于::first-letter::first-line
    继承性
    动画性discrete
    计算值指定值

    实例

    <div id="kern"></div>
    <div id="nokern"></div>
    <textarea id="input">AV T. ij</textarea>
    
    //CSS
    div {
      font-size: 2rem;
      font-family: serif;
    }
    
    #nokern {
      font-kerning: none;
    }
    
    #kern {
      font-kerning: normal;
    }
    
    //JS
    var input  = document.getElementById('input'),
        kern   = document.getElementById('kern'),
        nokern = document.getElementById('nokern');
    
    input.addEventListener('keyup', function() {
      kern.textContent = input.value; /* Update content */
      nokern.textContent = input.value;
    });
    
    kern.textContent = input.value; /* Initialize content */
    nokern.textContent = input.value;