第14篇 字体合成font-synthesis与简写属性font

338 阅读2分钟

字体合成font-synthesis

作用

控制浏览器可以合成(synthesize)字体缺失的粗体或斜体。

大多数标准西方字体包含斜体和粗体变体,但许多新颖的非标准西方字体不包括斜体和粗体变体。用于中文、日文、韩文和其他语标文字的字体往往也不含这些变体,同时,从默认字体中生成、合成这些变体可能会妨碍文本的易读性。在这些情况下,可能最好关闭浏览器默认的 font-synthesis 字体合成特性。

适用场景、初始值、可继承性和动画性

可继承不可动画,适用于所有元素,初始值为weight style

属性值

  • none:此关键词表示不合成粗体字型(typeface)或斜体字型。
  • weight:此关键词表示,如果需要的话,可以合成粗体字型。
  • style:此关键词表示,如果需要的话,可以合成斜体字型。

可以同时取weight和style,两个关键词之间使用空格作为分隔符,表示粗体和斜体都可以合成。

font属性

作用

font 属性可以用来作为 font-style, font-variant【不想看啦】, font-weight, font-size, line-height【后面文本属性中会讲】 和 font-family 这6个属性的简写,或将元素的字体设置为系统字体。

属性值

  • font可以取单个的关键词作为值,而这个关键词将会选择一个系统字体。而关键词必须为以下关键词之一:

    • caption,    带文字标注的控件所使用的系统字体【button的字体】
    • icon, 用于标记图标时使用的系统字体
    • menu, 菜单【下拉菜单之类的】中使用的系统字体
    • message-box, 弹窗盒子中使用的系统字体
    • small-caption, 小型标记文字的控件中使用的系统字体
    • status-bar.窗口状态栏中的系统字体。
  • 若是指定非简写属性的值,那么必须指定font-sizefont-family,其他非简写属性可以省略。

    • font-stylefont-variantfont-weight、必须写在font-size属性前
    • font-stretch只可以设定一个关键词作为值。
    • 若有line-height,则必须紧挨在font-size的后面,二者间使用/作为分隔符。例如:20px/3
    • font-family一定要放在最后一个属性指定。

注意事项

与任何简写属性一样,任何未指定的值都将设置为其对应的初始值(可能覆盖先前使用非简写属性设置的值)。

虽然不能通过 font 直接设置,但是font-size-adjust和 font-kerning也会重置为初始值

cookbook

因为可能发生注意事项中的乌龙事件,所以建议若是要同时使用简写属性与非简写属性或受到简写属性影响的属性,应该先写简写属性,之后再写其他属性。