font-variant-alternates属性(CSS设置)
font-variant-alternates属性(CSS设置)
如果要用一个词来描述的话,能够把其称为字体变体(Fontvariants),对应的CSS特点就是font-variation-*特点,其包含衔接(ligatures)、大写(caps)、数字(numerals)和替代字形(alternateglyphs)。这些特点能够让咱们在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能够用以下关键词做为其特点值:
/*Keywordvalues*/
font-variant-ligatures:normal;
font-variant-ligatures:none;
font-variant-ligatures:common-ligatures;/**/
font-variant-ligatures:no-common-ligatures;/**/
font-variant-ligatures:discretionary-ligatures;/**/
font-variant-ligatures:no-discretionary-ligatures;/**/
font-variant-ligatures:historical-ligatures;/**/
font-variant-ligatures:no-historical-ligatures;/**/
font-variant-ligatures:contextual;/**/
font-variant-ligatures:no-contextual;/**/
font-variant-ligatures:contextual;/**/
/*Globalvalues*/
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;/*低版本浏览器禁用*/
作用如下:
上一行敞开衔接,下一行禁用衔接的作用
discretionary-ligatures
这些能够用于印刷方面的衔接,能够到达特殊作用。这些默许是禁用的。也能够理解为,这些值能够用来操控特定的衔接,指定的字体并由OpenType规划器来定义。它们对应的是OpenType值dig。它也有两个或许的值:
discretionary-ligatures:激活衔接
no-discretionary-ligatures:禁用衔接
如果你的代码中设置了:
font-variant-ligatures:discretionary-ligatures;/*激活*/font-variant-ligatures:no-discretionary-ligatures;/*禁用*/font-feature-settings:'dlig'1;/*低版本浏览器激活*/font-feature-settings:'dlig'0;/*低版本浏览器禁用*/
作用如下:
第一行敞开衔接,第二行禁用衔接
contextual
这些值操控字母是否习惯它们的上下文。也就是说,它们是否习惯周围的字母。这些值对应于OpenType中的calt。同样的contextual表明启用;no-contextual表明禁用。
font-variant-ligatures:contextual;/*enable*/font-variant-ligatures:no-contextual;/*disable*/font-feature-settings:'calt'1;/*low-levelenable*/font-feature-settings:'calt'0;/*low-leveldisable*/historical-ligatures
运用这些值,看上去就像德文中的tz显现成?。它对应的OpenType值是hlig。historical-ligatures环敞开,而no-historical-ligatures禁用。
font-variant-ligatures:historical-ligatures;/*enable*/font-variant-ligatures:no-historical-ligatures;/*disable*/font-feature-settings:'hlig'1;/*low-levelenable*/font-feature-settings:'hlig'0;/*low-leveldisable*/
font-variant-position
咱们常常运用了sub和sup元素的来改为字符在笔直方向的方位。默许状况下,浏览器会运用一个惯例的数字字符,使font-size更小,并运用vertical-align来进步或下降它。这些都不是真正的sub和sup,并且一般会显得很难看,更不用说它们会打乱line-height。
值得幸亏的是,现在有一种办法能够运用font-variant-position真正完成sub和sup这样的作用。不过现在该特点只在Firefox中得到支撑。
/*Keywordvalues*/font-variant-position:normal;
font-variant-position:sub;
font-variant-position:super;/*Globalvalues*/font-variant-position:inherit;
font-variant-position:initial;
font-variant-position:unset;
sub
完成类似于标签的下标字符作用:
font-variant-position:sub;/*enable*/font-variant-position:normal;/*disablebothvariants*/font-feature-settings:'subs'1;/*low-levelenable*/font-feature-settings:'subs'0;/*low-leveldisable*/
super
完成类似于标签的上标字符作用:
font-variant-position:super;/*enable*/font-variant-position:normal;/*disablebothvariants*/font-feature-settings:'sups'1;/*low-levelenable*/font-feature-settings:'sups'0;/*low-leveldisable*/
font-variant-caps
font-variant-caps特点用来操控字母大写。只不过这儿启用的是小型大写。
/*Keywordvalues*/font-variant-caps:normal;
font-variant-caps:small-caps;
font-variant-caps:all-small-caps;
font-variant-caps:petite-caps;
font-variant-caps:all-petite-caps;
font-variant-caps:unicase;
font-variant-caps:titling-caps;/*Globalvalues*/font-variant-caps:inherit;
font-variant-caps:initial;
font-variant-caps:unset;
small-caps
小型大写字母的规划与小写字母相同,用于在运转文本中大写字母。它们使段落更具内聚力和可读性。
font-variant-caps:small-caps;/*enable*/font-variant-caps:normal;/*disableallvariants*/font-feature-settings:'smcp'1;/*low-levelenable*/font-feature-settings:'smcp'0;/*low-leveldisable*/
all-small-caps
small-caps仅仅替换了小写字母为大写字母。要是想将一切字母都变成小的大写字母,需求运用all-small-caps。
font-variant-caps:all-small-caps;/*enable*/font-variant-caps:normal;/*disableallvariants*/font-feature-settings:'smcp'1,'c2sc'1;/*low-levelenable*/font-feature-settings:'smcp'1,'c2sc'0;/*low-leveldisable*/
petite-caps
标准的小型大写字母一般会比字体的x高度略大一些。一些字体有额外的小型大写,与x高度匹配。这些被称为petite-caps。
font-variant-caps:petite-caps;/*enable*/font-variant-caps:normal;/*disableallvariants*/font-feature-settings:'pcap'1;/*low-levelenable*/font-feature-settings:'pcap'0;/*low-leveldisable*/
all-petite-caps
与all-small-caps类似,它将一切字母包含小写字母和大写字母,都转换成小型大写字母,并且和字体的x字母高度相匹配。
font-variant-caps:all-petite-caps;/*enable*/font-variant-caps:normal;/*disableallvariants*/font-feature-settings:'pcap'1,'c2pc'1;/*low-levelenable*/font-feature-settings:'pcap'1,'c2pc'0;/*low-leveldisable*/
unicase
该功用将大写和小写字母映射到混合的小写字母和小写的大型字母,创立一个单一case的字母表。有时这些小写字母是实践的小型大写字母,有时它们是特别规划的unicase形式。这个特性的完成从字体到字体各不相同。
font-variant-caps:unicase;/*enable*/font-variant-caps:normal;/*disableallvariants*/font-feature-settings:'unic'1;/*low-levelenable*/font-feature-settings:'unic'0;/*low-leveldisable*/
titling-caps
标准的大写字母规划是用来与小写字母一起运用的,当它们被用在一切大写字母的字符串时,它们会显得过于大一点。有些字体还特别合适这种状况。
font-variant-caps:titling-caps;/*enable*/font-variant-caps:normal;/*disableallvariants*/font-feature-settings:'titl'1;/*low-levelenable*/font-feature-settings:'titl'0;/*low-leveldisable*/
font-variant-numeric
font-variant-numeric特点用来操控对数字、分数和序号标记的处理。数字的正确显现取决于上下文的不同,以下是一些一般性的规矩:
运转于文本正文中的数字,运用比例的是旧式数字
运转在标题中的数字,运用的比例是内联数字
在数字表格中的数字,运用的比例是表格内联数字
常用的特点:
font-variant-numeric:normal;font-variant-numeric:ordinal;font-variant-numeric:slashed-zero;font-variant-numeric:lining-nums;/**/font-variant-numeric:oldstyle-nums;/**/font-variant-numeric:proportional-nums;/**/font-variant-numeric:tabular-nums;/**/font-variant-numeric:diagonal-fractions;/**/font-variant-numeric:stacked-fractions;/**/font-variant-numeric:oldstyle-numsstacked-fractions;/*Globalvalues*/font-variant-numeric:inherit;
font-variant-numeric:initial;
font-variant-numeric:unset;
lining-nums
lining-nums里的数字近似大写字母,高度一致。它们应该用于标题或表格中的数字。一般状况下,数字是默许的。
font-variant-numeric:lining-nums;/*enable*/font-variant-numeric:normal;/*disableallvariants*/font-feature-settings:'lnum'1;/*low-levelenable*/font-feature-settings:'lnum'0;/*low-leveldisable*/
oldstyle-nums
旧式数字(Old-style)有不同的高度和对齐方式,因而更类似于小写字母。它们应该用于正文文本中。
font-variant-numeric:oldstyle-nums;/*enable*/font-variant-numeric:normal;/*disableallvariants*/font-feature-settings:'onum'1;/*low-levelenable*/font-feature-settings:'onum'0;/*low-leveldisable*/
proportional-nums
比例(Proportional)数字具有可变的间距,并与水平文底细交融。它们应该在大多数状况下运用,除了数据表格中。其中笔直对齐很重要。一般数字在默许状况下是比例数字。
font-variant-numeric:proportional-nums;/*enable*/font-variant-numeric:normal;/*disableallvariants*/font-feature-settings:'pnum'1;/*low-levelenable*/font-feature-settings:'pnum'0;/*low-leveldisable*/
tabular-nums
表格数字具有相同的宽度,应该在数据表格中运用,以答应数字笔直对齐。
font-variant-numeric:tabular-nums;/*enable*/font-variant-numeric:normal;/*disableallvariants*/font-feature-settings:'tnum'1;/*low-levelenable*/font-feature-settings:'tnum'0;/*low-leveldisable*/
diagonal-fractions
默许状况下,分数将以小写字母的形式显现。适当的分数将被格式化,以匹配一个面料图形的高度,能够是对象线或堆叠。
font-variant-numeric:diagonal-fractions;/*enable*/font-variant-numeric:normal;/*disableallvariants*/font-feature-settings:'frac'1;/*low-levelenable*/font-feature-settings:'frac'0;/*low-leveldisable*/
stacked-fractions
在大多数Web字体中,堆叠分数并不像对角线分数那样遍及,但它应该被证明是有用的。这在许多的科学或数学中用得多。
font-variant-numeric:stacked-fractions;/*enable*/font-variant-numeric:normal;/*disableallvariants*/font-feature-settings:'afrc'1;/*low-levelenable*/font-feature-settings:'afrc'0;/*low-leveldisable*/
ordinal
Ordinal像st、nd、rd和th这样的序号默许显现为标准小写字母。但是,抱负状况下,这些数字会跟着数字的添加而添加。序数值支撑这一点。
font-variant-numeric:ordinal;/*enable*/font-variant-numeric:normal;/*disableallvariants*/font-feature-settings:'ordn'1;/*low-levelenable*/font-feature-settings:'ordn'0;/*low-leveldisable*/
slashed-zero
能够运用斜线来替换零字符。
font-variant-numeric:slashed-zero;/*enable*/font-variant-numeric:normal;/*disableallvariants*/font-feature-settings:'zero'1;/*low-levelenable*/font-feature-settings:'zero'0;/*low-leveldisable*/
font-variant-alternates
字体能够为任何字符供给多种替换。font-variant-alternates特点供给了许多操控字符替换的办法。
/*Keywordvalues*/font-variant-alternates:normal;
font-variant-alternates:historical-forms;/*Functionalnotationvalues*/font-variant-alternates:stylistic(user-defined-ident);
font-variant-alternates:styleset(user-defined-ident);font-variant-alternates:character-variant(user-defined-ident);
font-variant-alternates:swash(user-defined-ident);
font-variant-alternates:ornaments(user-defined-ident);
font-variant-alternates:annotation(user-defined-ident);
font-variant-alternates:swash(ident1)annotation(ident2);/*Globalvalues*/font-variant-alternates:initial;
font-variant-alternates:inherit;
font-variant-alternates:unset;
historical-forms
被运用于周期表。请注意这与衔接中的作用仍是有不同之处。
font-variant-numeric:historical-forms;/*enable*/font-variant-numeric:normal;/*disableallvariants*/font-feature-settings:'hist'1;/*low-levelenable*/font-feature-settings:'hist'0;/*low-leveldisable*/
除此之外,根据不同的场景挑选不同的特点值。
font-variation-settings
font-variation-settings特点首要用于指定需求更改的特性,其首要有由个字母和它们的变化值组成。该特点供给了对OpenType或TrueType字体变体的在低浏览器的操控。
/*Usethedefaultsettings*/font-variation-settings:normal;/*SetvaluesforOpenTypeaxisnames*/font-variation-settings:"XHGT"0.7;/*Globalvalues*/font-variation-settings:inherit;
font-variation-settings:initial;
font-variation-settings:unset;
这就是在咱们文章的开头的示例中看到的font-variation-settings:'INLN'0;和font-variation-settings:'INLN'1000,'SWRM'1000;等。每个值都有4个ASCII字符和一个表明axis值的数字组成。如果有更多或更少的字符或包含U+20至U+7E的codepoint规模之外的字符,那么整个特点都是无效的。而能够是分数,也能够是负数。
总结
撸了一圈font-variation-*相关的特点,总算是了解了这个Demo的完成原理了。但要完全把握这些常识,仍是需求一定的时刻的。必竟有许多常识点都和字体以及排版相关的。这需求具备一些印刷相关的常识,或许能帮助咱们更好的把握这些特点的特性,以及运用的场景。
作品标签: CSS
优秀作品:
评论列表(共289人参与)参与讨论或分享设计作品获得视觉癖积分奖励
言语是一门注册会员
2021-08-26 19:20:0
二十世纪八十年代,为了防止各开发厂商用的C言语语法发生差异,由美国国家规范局为C言语订定了一套完整的国际规范语法,称为ANSI C,作为C言语最初的规范。 v> 任何绘画都离不开根底常识的解说。根底的操练必定不能偷闲。不管是素描,速写,色彩,绘画技
回复详解,H注册会员
2021-08-26 9:29:20
1.曾有数游客
2021-08-26 17:42:23
游客13884:font-variant-al驱家中田中鬼邪,以保人畜安全。 传说二 体现彝族的国画著作-作者狄少英体现彝族的国画著作-作者狄少英 13.一身诗意千寻瀑,万古人世四月天 14.星光
回复棒棒,万注册会员
2021-08-26 15:52:27
b上的排版总是要落后于它在它印刷中的作用。但这是能够理解的,因为打印在页面上的字体现已经过几个世纪的yle.fontFamily=arial,sans-serif 使用某种特定的字体系列(Geneva)
回复