• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • font-variant

    font-variant 属性设置文本字母的字体显示为小型尺寸的大写字母,这意味着所有的小写字母均会被转换为大写,但是与其余文本相比,其字体尺寸更小。

    示例

    p.small{font-variant:small-caps; }
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    浏览器都支持font-variant
    任何版本的IE浏览器都不支持其font-variant属性的inherit

    语法:

    font-variant:normal
    font-variant: small-caps;
    font-variant: common-ligatures small-caps;
    
    /* Global values */
    font-variant: inherit;
    font-variant: initial;
    font-variant: unset;
    

    设置或检索对象中的文本是否为小型的大写字母

    font-variant 属性是font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures, font-variant-east-asian等属性的简写。你也可以使用简写 font 设定font-variant在CSS Level 2(Revision 1)中的值(即normal 或 small-caps)

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

    取值:

    • normal:指定文本字体样式为正常的字体。规定一个常规(normal)字型;每个非简写的属性的初始值都是normal。属于 font-variant 的非简写属性有:font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures 和 font-variant-east-asian。
    • none:将font-variant-ligatures设定为 none ,将其他非简写属性的值设定为初始值normal。
    • small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, titling-caps:指定文本字体样式小型的大写字母字体
    • inherit:继承父元素的属性值。注:IE不支持此值。

    实例

    //html
    <p class="normal">Firefox rocks!</p>
    <p class="small">Firefox rocks!</p>
    
    //CSS
    p.normal {font-variant: normal;}
    p.small {font-variant: small-caps;}
    

    Firefox rocks!

    Firefox rocks!

    上篇:font-style

    下篇:font-weight