CSS Font Module Level 3(本文以下简称“ML3”)新增了字体特性(Font Feature)属性,用于扩展font-variant,以支持丰富OpenType字体特性,如连字。

我们知道,字体文件中包含着从Unicode码点到字形的映射。在给简单的拉丁文本应用字体时,就是根据字体文件中的映射表逐个把对应的字形找到并显示出来。而OpenType和AAT(Apple Advanced Typography)等字体标准支持更复杂的处理模式。比如,给定字符的字形不仅可以根据码点来选择和定位,也可以根据相邻字符或者语言、文字以及文本本身启用的特性来选择和定位。

风格性的字体特性分两类:影响与周围字符关系的和影响字形选择的。前者比如字距调整(kerning)和连字(ligature)相关的特性,后者比如小型大写字母(small-caps)、上/下标(superscript/subscript)及替代(alternate)特性。

为了支持这些字体特性,ML3扩展了font-variant,基于它增加了很多子属性用于控制相应的字体特性,比如font-variant-ligaturesfont-variant-postionfont-variant-capsfont-variant-numericfont-variant-east-asian。而font-variant则变成了一个涵盖所有这些属性的简写属性,类似font那样。不过,以上这些子属性只会影响字形选择与定位,不影响字体选择。

因为这些字体特性都与风格有关,所以字体特性的英文也叫stylistic font features。这个意义上,unstyled text就不是"未应用样式文本",而是"未启用风格化字体特性的文本"。

font-kerning

用于根据字体文件中的数据来调整字形间距。auto表示由UA决定,normal表示应用字体文件中的数据,none表示不应用。

对于不包含相关数据的字体,这个属性没有影响。OpenType标准建议默认启用间距调整,即应用OpenType的kern特性(对于垂直文本则是vkrn)。如果同时定义了letter-spacing属性,则字体内置的间距作为默认值,在此基础上再进行调整。

font-variant-ligatures

用于跟上下文构形(contextual form)一起组合字形以得到更和谐的文本呈现效果。

  • normal表示启用公共默认特性,对OpenType字体则意味着默认启用普通/标准(common)连字和上下文构形,禁用自由(discretionary)连字和传统(historical)连字。
  • none表示明确禁用任何形式的连字和上下文构形。
  • common-ligatures启用普通/标准连字(对应OpenType特性ligaclig)。对于OpenType字体,普通/标准连字默认是启用的。

  • no-common-ligtures禁用普通/标准连字。
  • discretionary-ligatures启用自由连字(对应OpenType特性dlig),这种连字是自由的或者说可选的,由字体设计者自行决定。至于哪些地方会连字,需要参考字体文档。

  • no-discretionary-ligatures禁用自由连字。
  • historical-ligatures启用传统连字(对应OpenType特性hlig)。

  • no-historical-ligatures禁用传统连字。
  • contextual启用上下文替代(contextual alternates,对应OpenType特性calt),虽然不是严格意义上连字特性,但这个特性常用于让字形与周围内容更和文谐。对于OpenFont字体,这个特性默认打开。

  • no-contextual禁用上下文替代。

为了正确渲染复杂文字而必需的连字(对应OpenType特性rlig),不受以上设置的影响,包括none

font-variant-position

用于在排版中使用上标和下标字形。这些字形是单独设计的,但它们的字框与默认字形是一样的。目的就是无需缩放或调整基线,就可以像使用默认字形一样直接使用它们。从下图可以看出下标字形(上)与合成下标(下)的区别:

  • normal不应用下面的特性。
  • sub显示下标变体(OpenType特性subs)。
  • super显示上标变体(OpenType特性sups)。

如果字体文件中没有相应的变体,UA需要基于正常字形缩小后合成。这两个值不支持嵌套应用(即不累积),另外对行内图片应用这两个值,效果如同应用normal

考虑到以前UA会通过给subsup元素设置相应的font-sizevertical-align属性来模拟下标和上标,样式表作者最好通过CSS3条件来应用font-variant-position属性,以实现向后兼容。

比如,UA通过对sub元素应用以下样式:

sub {
  vertical-align: sub;
  font-size: smaller;
  line-height: normal;
}

而这样使用font-varian-position则可以保证不支持用户代理也能正常显示下标:

@supports ( font-variant-position: sub ) {

  sub {
    vertical-align: baseline;
    font-size: 100%;
    line-height: inherit;
    font-variant-position: sub;
  }

}

font-varian-caps

这个属性用于从字体中选择专门设计的小型大写字母字形。

  • normal不应用下面的特性。
  • small-caps用小型大写字母显示小写字母(OpenType特性smcp)。小型大写字母是小写字母大小的大写字母,通常比x高度高30%,或者是大写字母高度的70%。

  • all-small-caps大写字母和小写字母都显示为小型大写字母(OpenType特性c2scsmcp)。

  • petite-caps用短身(petite)大写字母显示小写字母(OpenType特性pcap)。短身大写字母的高度等于x高度。

  • all-petite-caps大写字母和小写字母都显示为短身大写字母(OpenType特性c2pcpcap)。

  • unicase大写字母转换为小型大写字母与小写字母混合显示(OpenType特性unic)。

  • titling-caps用标题大写字母显示小写字母(OpenType特性titl)。

如果字体不支持small-caps,UA需要用大写字母合成。如果字体不支持petite-caps,则petite-capsall-petite-caps相当于指定small-capsall-small-caps。如果字体不支持unicase,则该属性就像small-caps只应用给大写字母。如果字体本身不支持titling-caps,则视觉上无变化。对于不区分大小的文字,small-capsall-small-capspetite-capsall-petite-capsunicase视觉上无变化。

在模拟小型大写字母时,结果必须与text-transform属性的结果保持一致。

font-variant-numeric

控制如何显示数字值。

  • normal不应用下面的特性。
  • lining-nums等高数字(OpenType特性lnum)。

  • oldstyle-nums旧样式数字(OpenType特性onum),高度可能不相等。

  • proportional-nums比例数字(OpenType特性pnum),宽度可能不相等。

  • tabular-nums等宽数字(OpenType特性tnum)。

  • diagonal-fractions斜角分数字(OpenType特性frac)。

  • stacked-fractions标准分数字(OpenType特性afrc

  • ordinal序数字(OpenType特性ordn

  • slashed-zero带斜线的零(OpenType特性zero)。

对于ordinal来说,虽然序数也以上标形式出现,但标记不同。对于上标,通常这样标记和应用样式:

sup { font-variant-position: super; }
x<sup>2</sup>

而对于序数,则这样标记和应用样式:

.ordinal { font-variant-numeric: ordinal; }
<span class="ordinal">17th</span>

这里的th会变成序数形式,而数字不变。当然,在有些语言里,序数也不是上标形式。

font-variant-east-asian

控制东亚文字的替代及大小。

  • normal不应用以下特性。
  • jis78将默认日文替换成JIS78中对应的字形(OpenType特性jp78)。

  • jis83将默认日文替换成JIS83中对应的字形(OpenType特性jp83)。
  • jis90将日文替换成JIS90中对应的字形(OpenType特性jp90)。
  • jis04使用JIS2004中的日文字形(OpenType特性jp04)。

    以上JIS变体主要对应不同版本的日语国际标准。字体通常按照最新国际标准设计,但显示时偶尔需要使用旧的变体,比如匹配标志。

  • simplified应用简体形式(OpenType特性smpl)。
  • traditional应用繁体形式(OpenType特性trad)。

    simplifiedtraditional用于控制文字以简化写法还是传统写法显示。

  • full-width应用全宽变体(OpenType特性fwid)。

  • proportional-width应用比例间距变体(OpenType特性pwid)。

  • ruby应用注音/注释变体(OpenType特性ruby)。由于注音/注释文本通常比较小,字体设计者通常特别设计相应字形。

font-variant

如前所述,font-variant是所有字体变体子属性的简写形式。它的值normal会将所有子属性的值重置为初始值。nonefont-variant-ligatures设置为none,将其他特性设置为各自的初始值。与其他简写属性一样,font-variant会将未指定的子属性重置为各自的初始值。

font-variant不会重置font-feature-settings属性。

font-feature-settings

这是用于控制OpenType字体特性的一个低级属性。这个属性旨在访问那些使用不广泛但有时候却必要的特性。

正常情况下,应该使用font-variant及其子属性。只有在那些属性不够用的情况下,再使用font-feature-settings
/* 应用小型大写字母和第二个花饰字替代 */
font-feature-settings: "smcp", "swsh" 2;

normal值表示字形选择和定位不会发生变化。特性值标签的格式如下:

<feature-tag-value> = <string> [ <integer> | on | off ]?

<string>是区分大小写的OpenType特性标签,由4个小写字母构成。不存在的标签会被忽略。UA不会合成字体本身不支持的特性。唯一例外是kern;如果字体的kern表中有字距调整数据,而GPOS表里显示不支持kern特性,UA也会合成。

<integer>如果存在,表示用于字形选择的索引,必须大于等于0。0表示禁用相应特性。对于布尔值特性,1表示启用该特性。对于非布尔值特性,大于等于1的值表示启用该特性,以及该特性的选择索引。值on相当于1,值off相当于0。如果没有指定这个部分的值,则假定值为1。

font-feature-settings 的计算属性是一个映射,因此不存在重复指定的值。如果存在多次指定同一属性的值,则最后一个覆盖前面的。

font-feature-settings: "dlig" 1;       /* dlig=1 启用自由连字 */
font-feature-settings: "smcp" on;      /* smcp=1 启用小型大写 */
font-feature-settings: 'c2sc';         /* c2sc=1 全部小型大写 */
font-feature-settings: "liga" off;     /* liga=0 禁用标准连字 */
font-feature-settings: "tnum", 'hist'; /* tnum=1, hist=1 启用表列数字及传统连字 */
font-feature-settings: "tnum" "hist";  /* 无效,缺少逗号 */
font-feature-settings: "silly" off;    /* 无效,标签过长 */
font-feature-settings: "PKRN";         /* PKRN=1 启用自定义特性 */
font-feature-settings: dlig;           /* 无效,标签不是字符串 */

虽然特性标签是为OpenType字体的特性打造的,但其他现代字体格式的特性也可以以OpenType标签的模式来注册。

小结

综观所有font-variant的子属性,视觉上可以看得到的,好像只有font-variant-east-asian 与汉字有关(比如traditional把简体转换成繁体,ruby选择注音/注释字形)。当然,font-variant-ligatures也可能与汉字有关,如果行、草字体如果有连字替换设计的话。

虽然大多数属性都与字母文字相关,但在国际化的今天,了解这些文字的展示也是有益的。

参考链接

标签: none

添加新评论