前端开发：font属性与font-variant如何使用？

https://v.qq.com/x/page/z3154dgo2ta.html

font样式值的顺序

一般使用font样式，样式值的顺序为：字体风格→字体粗细→字体大小→字体类型

其实除了这四个，还有其它的可选项。

示例：

    font: oblique 900 20px "Times";

少了font-size与font-family是不可以的。

必须包含以下值：

<font-size>

<font-family>

可以选择性包含以下值：

<font-style>

<font-variant>

<font-weight>

<line-height>

具体规则

1. font-style, font-variant 和 font-weight 必须在 font-size 之前
2. 在 CSS 2.1 中 font-variant 只可以是 normal 和 small-caps
3. line-height 必须跟在 font-size 后面，由 "/" 分隔，例如 "16px/30px"
4. font-family 必须最后指定

语法规则：

[ [ <'font-style'> || <font-variant> || <'font-weight'> || <'font-stretch'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ]

示例：

font: oblique small-caps 100 5em/30px "Times";

font-variant 变形

font-variant-caps 使您可以控制大写字母特殊字符的使用。

font-variant 属性是font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures, font-variant-east-asian等属性的简写。

示例：

font-variant-caps: small-caps;

除font-variant-caps外，其它并不常用。font-variant-caps可以实现大写的大写效果，例如：

如果代码是这样的：

font-variant-caps: all-small-caps;

这个效果没有首字母大写。

font-stretch

语法：

font-stretch : normal | narrower | wider | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded

这种不错，也有应用的场景，但是支持的浏览器目前并不多。

另一种字体拉伸效果的实现方式是：

transform: scale(2,1);

scale可以接受1个参数，也可以接受2个参数。当是一个参数时，x与y同时缩放，当是两个参数时，第一个控制x方向的缩放，第二个控制y方向的缩放。

如果发现样式不起作用，可以再加一个display:inline-block试试。