字体变体font-variation-*

作者：大漠 日期：2018-01-11 点击：4376
font-variation
font
CSS3
会员专栏

特别声明：如果您喜欢小站的内容，可以点击年卡¥199.00元(原价: ¥598元)、季卡¥78.00元(原价: ¥168元)、月卡¥28.00元(原价: ¥68元)进行全站阅读。如果您对付费阅读有任何建议或想法，欢迎发送邮件至: airenliao@gmail.com!或添加QQ：874472854(^_^)

今天在Twitter看到Codepen上的一个示例，感觉很神奇。刚开始以为是用了什么黑科技，但仔细一看是纯CSS实现的一个效果。示例中最关键的是使用了font-variation-settings属性。那么这个属性有什么神奇之处呢？容当后述。

在详细介绍font-variation-settings属性之前，先把Demo效果给大家看看：

如果要用一个词来描述的话，可以把其称为字体变体（Font variants），对应的CSS属性就是font-variation-*属性，其包括连接（ligatures）、大写（caps）、数字（numerals）和替代字形（alternate glyphs）。这些属性可以让我们在Web上创建更精准、更漂亮的排版（文本）效果。

事实上，Web上的排版总是要落后于它在它印刷中的效果。但这是可以理解的，因为打印在页面上的字体已经经过几个世纪的发展，可以说发展到一个复杂的程度。而在浏览器要达到这样的一个层次，还是很难的。

但是，由于Web字体中OpenType功有的增加，以及CSS特性的完善与能力的提高，Web上排版和印刷上排版之间的差距在逐渐拉小。

那么今天这篇文章，借助前面的示例，我们来看看如何使用CSS控制OpenType特性，但请记住，你所使用的任何Web字体需要支持这些特性。

font-variant-*属性

在CSS中可以通过font-variant-*属性来控制大多数OpenType特性。也可以使用font-feature-settings用来支持低版本浏览器。然而，只要可能，你应该使用更现代的font-variant-*属性。在实际使用的时候，可以使用@supports规则来对font-variant-*做降级处理，对于支持的浏览器使用该属性，不支持的浏览器使用font-feature-settings。

body {
    font-feature-settings: "liga" 1;
}

@supports (font-variant-ligatures: common-ligatures) {
    body {
        font-feature-settings: normal;
        font-variant-ligatures: common-ligatures;
    }
}

可能到现在为止，你和我一样，都还不太明白上面的代码究竟起了什么作用。别担心，继续往后阅读，你会整明白的。

font-variant-*主要包括：

  • font-variant-ligatures
  • font-variant-caps
  • font-variant-numeric
  • font-variant-alternates
  • font-variant-east-asian

后面的内容简单的来看看这些属性。

font-variant-ligatures

连接是由两个或两个以上的字答组成的单个字形。它们通常能防止难看或尴尬的字母碰撞。主要是功能是有助于辨认。

font-variant-ligatures可以用以下关键词做为其属性值：

/* Keyword values */
font-variant-ligatures: normal;
font-variant-ligatures: none;
font-variant-ligatures: common-ligatures;           /* <common-lig-values> */
font-variant-ligatures: no-common-ligatures;        /* <common-lig-values> */
font-variant-ligatures: discretionary-ligatures;    /* <discretionary-lig-values> */
font-variant-ligatures: no-discretionary-ligatures; /* <discretionary-lig-values> */
font-variant-ligatures: historical-ligatures;       /* <historical-lig-values> */
font-variant-ligatures: no-historical-ligatures;    /* <historical-lig-values> */
font-variant-ligatures: contextual;                 /* <contextual-alt-values> */
font-variant-ligatures: no-contextual;              /* <contextual-alt-values> */
font-variant-ligatures: contextual;                 /* <no-historical-ligatures> <common-ligatures> */

/* Global values */
font-variant-ligatures: inherit;
font-variant-ligatures: initial;
font-variant-ligatures: unset;

common-ligatures

这些连接是设计者决定在正常情况下使用的连接。在大多数情况下，应该使用这些，因为大数浏览器都默认启用它们。

最常见的连接值是fi、ffi、th或者类似的。它们对应的OpenType值为liga和clig。两个值都是有可能的：

  • common-ligatures：激活连接
  • no-common-ligatures：禁用连接

比如：

font-variant-ligatures: common-ligatures; /* 开启 */
font-variant-ligatures: no-common-ligatures; /* 禁用 */

font-feature-settings: 'liga' 1; /* 低版本浏览器 开启 */
font-feature-settings: 'liga' 0; /* 低版本浏览器 禁用 */
剩余80%内容付费后可查看

如需转载，烦请注明出处：https://www.w3cplus.com/css3/font-variants.html

如果文章中有不对之处，烦请各位大神拍正。如果你觉得这篇文章对你有所帮助，打个赏，让我有更大的动力去创作。(^_^)。看完了？还不过瘾？点击向作者提问！

赏杯咖啡，鼓励他创作更多优质内容！
返回顶部