首页
关于视觉癖
设计服务
热门主题
投稿通道
设计师入驻
设计师招聘
在线留言
联系我们

热门主题

当前位置:视觉癖 > 热门主题 >

font-variant-alternates属性(CSS设置)

发布时间:2021-08-26 08:31 所属分类:热门主题 浏览次数:
  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;}}
  或许到现在为止,你和我相同,都还不太理解上面的代码究竟起了什么作用。别忧虑,持续往后阅读,你会整理解的。
CSS
  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

    > 03. 老板的话跟淘宝一样 打折打T得很凶哟 font-variant-alternates属性,咱们在拍照视频的时分,其实能够依据自己拍照的视频主题选择不。。。

      用户头像图片
        ,HTML注册会员
        2021-08-26 2:22:5

        @详解,H:font-variant-alte RoyalBlue是什么颜色 ~~~

    回复
用户头像图片
    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)

    回复