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

    设置或检索对象中的文本字体样式

    示例

    font-style: normal;
    font-style: italic;
    font-style: oblique;
    font-style: oblique 10deg;
    
    /* global values */
    font-style: inherit;
    font-style: initial;
    font-style: unset;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    浏览器都支持font-style

    语法:

    font-style:normal| italic| oblique| inherit

    设置或检索对象中的文本字体样式。

    默认值normal
    适用于所有元素
    继承性
    动画性
    计算值指定值

    取值:

    • normal:指定文本字体样式为正常的字体
    • italic:指定文本字体样式为斜体。对于没有设计斜体的特殊字体,如果要使用斜体外观将应用oblique
    • oblique:指定文本字体样式为倾斜的字体。人为的使文字倾斜,而不是去选取字体中的斜体字
    • inherit:规定应该从父元素继承字体样式

    font-styleCSS 属性允许你选择font-family字体下的italicoblique样式。

    italic与oblique区别

    • italic 样式一般是指书写体,相比无样式的字体,通常会占用较少的高度,而 oblique 字形一般只是常规字形的倾斜版本。斜体(italic)和倾斜体(oblique)都是通过人工倾斜常规字体的字形来模拟的(使用 font-synthesis 对此进行控制)。
    • 斜体在本质上通常是草书,通常比未样式的对等体使用更少的水平空间,而斜体通常只是常规面的倾斜版本。如果指定的样式不可用,则通过人为地倾斜常规面部的字形(用于font-synthesis控制此行为)来模拟斜体和斜面部。

    font-synthesis

    font-synthesis CSS 属性控制浏览器可以合成(synthesize)哪些缺失的字体,粗体或斜体。

    font-synthesis: weight style;
    font-synthesis: none;
    font-synthesis: weight;
    font-synthesis: style;
    

    大多数标准西方字体包含斜体和粗体变体,但许多新颖(novelty)的字体不包括这些。用于中文、日文、韩文和其他语标文字(logographic script)的字体往往不含这些变体,同时,从默认字体中生成、合成这些变体可能会妨碍文本的易读性。在这些情况下,可能最好关闭浏览器默认的 font-synthesis 字体合成特性。

    可变字体

    可变字体(Variable font)可以精确控制 oblique 字体的倾斜程度。你可以选择使用angle属性(角度)来设置。对于TrueType或OpenType可变字体,"slnt"变体用于实现倾斜的倾斜角度,而"ital"值1 的变体用于实现斜体值。请参阅font-variation-settings。为了使以下示例正常工作,您需要一个支持CSS Fonts Level 4语法的浏览器,该语法font-style: oblique可以接受angle

    实例

    //html
    <header>
        <input type="range" id="slant" name="slant" min="-90" max="90" />
        <label for="slant">slant</label>
    </header>
    <div class="container">
        <p class="sample">...it would not be wonderful to meet a megalosaurus, forty feet long or so, waddling like an elephantine lizard up holborn hill.</p>
    </div>
    
    //CSS
    /*amstelvaralpha-vf 由 david berlow 制作:https://github.com/typenetwork/amstelvar
    在此使用时,遵循此开源协议:https://github.com/typenetwork/amstelvar/blob/master/ofl.txt
    */
    
    @font-face {
      src: url('https://mdn.mozillademos.org/files/16044/amstelvaralpha-vf.ttf');
      font-family:'amstelvaralpha';
      font-style: normal;
    }
    
    label {
      font: 1rem monospace;
    }
    
    .container {
      max-height: 150px;
      overflow: scroll;
    }
    
    .sample {
      font: 2rem 'amstelvaralpha', sans-serif;
    }
    
    
    html, body {
      max-height: 100vh;
      max-width: 100vw;
      overflow: hidden;
    }
    
    body {
      display: flex;
      flex-direction: column;
    }
    
    header {
      margin-bottom: 1.5rem;
    }
    
    .container {
      flex-grow: 1;
    }
    
    .container > p {
      margin-top: 0;
      margin-bottom: 0;
    }
    

    JavaScript

    let slantlabel = document.queryselector('label[for="slant"]');
    let slantinput = document.queryselector('#slant');
    let sampletext = document.queryselector('.sample');
    
    function update() {
      let slant = `oblique ${slantinput.value}deg`;
      slantlabel.textcontent = `font-style: ${slant};`;
      sampletext.style.fontstyle = slant;
    }
    
    slantinput.addeventlistener('input', update);
    
    update();
    
    <p class="normal">this paragraph is normal.</p>
    <p class="italic">this paragraph is italic.</p>
    <p class="oblique">this paragraph is oblique.</p>
    
    //CSS
    .normal {font-style: normal;}
    .italic { font-style: italic;}
    .oblique { font-style: oblique;}
    

    请注意,不是所有的字体都有确切的obliqueitalic字形,即便如此,浏览器也会通过使用现有的字形来模拟所缺少的字形。下面是一个使用这两种字形渲染字体的示例:

    上篇:font

    下篇:font-kerning