DevShelf

Appearance

font ​

font ​

描述 ​

该 font 属性是简写的，允许您执行以下两项操作之一：您可以在一行中设置六个最成熟的字体属性，也可以设置其中一个关键字选择以采用系统字体设置。

效果展示 ​

语法 ​

css
font: [ [ <font-style> || <font-variant> || <font-weight> || <font-stretch>]?
  <font-size> [ / <line-height>]? <font-family>] | caption | icon | menu |
  message-box | small-caption | status-bar;

值 ​

  • <font-style> 有关值，请参阅font-style CSS 属性。
  • <font-variant> 有关值，请参阅font-variant CSS 属性。
  • <font-weight> 有关值，请参阅font-weight CSS 属性。
  • <font-size> 有关值，请参阅font-size CSS 属性。
  • <font-family> 有关值，请参阅font-family CSS 属性。

font-family ​

描述 ​

该 font-family 属性指定字体系列名称或通用系列名称的优先级列表。与其他 CSS 属性不同，值是以逗号分隔的列表，指示替代项。如果字体名称包含空格，例如 Trebuchet MS，则必须用单引号或双引号括起来。用户代理将选择计算机上安装的列表中的第一个字体。

效果展示 ​

语法 ​

css
font-family: [ <family-name> | <generic-family>] #;

值 ​

  • <family-name> 所选字体系列的名称，例如 Helvetica 或 Verdana。您可以引用用户系统上可用的字体，也可以引用使用 @font 字体导入的外部字体。当字体名称包含多个单词时，应将其括在引号中，例如“Times New Roman”。
  • <generic-family> 有关值，请参阅[font-variant](#font-va 定义了以下通用系列关键字：“衬线”、“无衬线”、“草书”、“幻想”和“等宽”。当作者所需的字体选择不可用时，这些关键字可用作常规回退机制。作为关键字，不得引用。鼓励作者附加通用字体系列作为提高健壮性的最后替代方法。
  • inherit 继承

font-feature-settings ​

描述 ​

该 font-feature-settings 属性提供对 OpenType 字体功能的低级别控制。它旨在提供对未广泛使用但特定用例所需的字体功能的访问。

效果展示 ​

语法 ​

css
font-feature-settings: normal | <feature-tag-value> #;

值 ​

  • normal 由于此属性，字形选择或定位不会发生任何更改。
  • <feature-tag-value> = <string> [ <integer> | on | off ]? 这是一个区分大小写的 OpenType 功能标记。如 OpenType 规范中所述，功能标记包含四个 ASCII 字符。 值必须为 0 或更大。值为 0 表示该功能已禁用。对于布尔要素，值 1 将启用该要素。

font-kerning ​

描述 ​

该 font-kerning 属性控制字体字距调整。字距调整是某些字母组合之间间隔的变化，以保持文本中字母的密度。这对于具有斜线的字母（如 A、Y、W、V）尤其重要。 字距调整信息存储在字体本身中，如果字体不支持此功能，则字体字距调整属性不会影响文本。

效果展示 ​

语法 ​

css
font-kerning: auto | normal | none;

值 ​

  • auto 指定由用户代理自行决定应用字距调整。
  • normal 指定应用字距调整。
  • none 指定不应用字距调整。

font-language-override ​

描述 ​

该 font-language-override 属性指定作者可以通过设置元素的内容语言来控制特定于语言的字形替换和定位的使用

注意

目前兼容 Firefox 浏览器

效果展示 ​

语法 ​

css
font-language-override: normal | <string>;

值 ​

  • normal 指定在使用 OpenType 字体呈现时，元素的内容语言用于推断 OpenType 语言系统。
  • <string> 单个区分大小写的三个字母的 OpenType 语言系统标记，指定要使用的 OpenType 语言系统，而不是元素语言所隐含的语言系统。

font-size ​

描述 ​

该 font-size 属性设置应用它的元素内文本的字体大小及其后代的字体大小。您可以使用绝对度量值或相对于受影响元素的父元素或根元素的度量值来调整文本大小。设置元素中字体的大小。

效果展示 ​

语法 ​

css
font-size: <absolute-size> | <relative-size> | <length> | <percentage>;

值 ​

  • <absolute-size> 一组关键字，指示根据字体设置首选项或每个浏览器的默认值进行缩放的预定义字体大小。从小到大，可能的值为 xx-small, x-small, small, medium, large, x-large, xx-large.
  • <relative-size> 相对于父元素的字体大小（smaller or larger）解释的一组关键字。
  • <length> 绝对单位值：允许使用任何标准 css 长度单位。负长度是非法的。
  • <percentage> 百分比值指定相对于父元素的字体大小的绝对字体大小。
  • inherit 继承

font-size-adjust ​

描述 ​

该 font-size-adjust 属性调整使用字体系列定义的回退字体的字体大小，以便无论使用哪种字体，x-height 都是相同的。这样可以在发生回退时保留文本的可读性。

效果展示 ​

语法 ​

css
font-size-adjust: none | <number>;

值 ​

  • none 仅根据 font-size 属性选择字体的大小。
  • <number> 选择字体的大小，使其小写字母（由字体的 x 高度指标确定）是指定数字乘以字体大小。

font-stretch ​

描述 ​

该 font-stretch 属性从字体中选择普通、压缩或展开的面。

效果展示 ​

语法 ​

css
font-stretch: normal | ultra-condensed | extra-condensed | condensed |
  semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded;

值 ​

  • normal 指定普通字体。
  • ultra-condensed 指定比正常字体更精简的字体，其中超精简字体是最精简的字体。
  • extra-condensed 指定比正常字体更精简的字体，其中超精简字体是最精简的字体。
  • condensed 指定比正常字体更精简的字体，其中超精简字体是最精简的字体。
  • semi-condensed 指定比正常字体更精简的字体，其中超精简字体是最精简的字体。
  • semi-expanded 指定比正常字体更展开的字体，其中超展开字体为扩展最多的字体。
  • expanded 指定比正常字体更展开的字体，其中超展开字体为扩展最多的字体。
  • extra-expanded 指定比正常字体更展开的字体，其中超展开字体为扩展最多的字体。
  • ultra-expanded 指定比正常字体更展开的字体，其中超展开字体为扩展最多的字体。
  • inherit 继承

font-style ​

描述 ​

该 font-style 属性允许选择斜体或斜体面。斜体形式通常是草书，而斜面通常是常规面的倾斜版本。

效果展示 ​

语法 ​

css
font-style: normal | italic | oblique;

值 ​

  • normal 选择分类为普通面的面，即既不斜体也不倾斜的面。
  • italic 选择标记为斜体的字体，如果不是斜体，则选择斜体。
  • oblique 选择标记为斜体的字体，如果不是斜体，则选择斜体。
  • inherit 继承

font-synthesis ​

描述 ​

该 font-synthesis 属性控制当字体系列缺少粗体或斜体时，是否允许用户代理合成粗体或斜体字体。如果未指定“权重”，则用户代理不得合成粗体面，如果未指定“style”，则用户代理不得合成斜体面。值“none”不允许所有合成人脸。

效果展示 ​

语法 ​

css
/* 没有其他关键字值，或者有一个或多个其他关键字值 */
font-synthesis: none;
font-synthesis: weight;
font-synthesis: style;
font-synthesis: small-caps style; /* 属性值可以是任意顺序 */
font-synthesis: style small-caps weight; /* 属性值可以是任意顺序 */

/* Global values */
font-synthesis: inherit;
font-synthesis: initial;
font-synthesis: revert;
font-synthesis: revert-layer;
font-synthesis: unset;

值 ​

  • none 浏览器在不可用时不允许合成粗体或倾斜字体。
  • weight 浏览器只允许在不可用但不能倾斜时合成粗体字体。
  • style 浏览器只允许在不可用但不能粗体时合成斜字体。
  • weight style 允许浏览器合成粗体和倾斜。

font-variant ​

描述 ​

该 font-variant 属性从字体系列中选择普通或小型大写字体。也可以通过使用字体速记来设置字体变体。

注意

font-variant 受 font-synthesis 的影响，font-synthesis 存在时可能会导致 font-variant 不生效

效果展示 ​

语法 ​

css
font-variant: normal;
font-variant: small-caps;
font-variant: common-ligatures small-caps;

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

值 ​

  • normal 选择不是小型大写字体的字体，通常是可用的普通字体。
  • small-caps 选择小型大写字体。如果没有可用的小写字母变体，浏览器将生成小写字母近似值。
  • inherit 继承

font-variant-alternates ​

描述 ​

该属性提供对各种备用字形的选择以及该 font-variant-alternates 字符的默认字形的控制。

效果展示 ​

在此示例中，我们使用 @font-feature-values at-rule 来定义蒙特卡洛字体特征的名称 swash 。该规则将名称 "fancy" 映射到索引值 1 。 然后，我们可以在里面 font-variant-alternates 使用该名称来打开该字体的斜体。这相当于类似 font-feature-settings: "swsh" 1 的行，只是应用该功能的 CSS 不需要包含，甚至不需要知道此特定字体所需的索引值。

语法 ​

css
/* Keyword values */
font-variant-alternates: normal;
font-variant-alternates: historical-forms;

/* Functional notation values */
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);

/* Global values */
font-variant-alternates: inherit;
font-variant-alternates: initial;
font-variant-alternates: revert;
font-variant-alternates: revert-layer;
font-variant-alternates: unset;

值 ​

  • normal 此关键字停用备用字形。
  • historical-forms 此关键字启用历史形式 - 过去常见但今天不常见的字形。它对应于 OpenType 值 hist 。
  • stylistic() 此功能为单个字符启用样式替代。该参数是映射到数字的特定于字体的名称。它对应于 OpenType 值 salt ，如 salt 2 。
  • styleset() 此功能为字符集启用样式替代。该参数是映射到数字的特定于字体的名称。它对应于 OpenType 值 ssXY ，如 ss02 。
  • character-variant() 此功能为字符启用特定的样式替代。它类似于 styleset() ，但不为一组字符创建连贯的字形;单个角色将具有独立的风格，不一定是连贯的风格。该参数是映射到数字的特定于字体的名称。它对应于 OpenType 值 cvXY ，如 cv02 。
  • swash() 此函数启用斜纹字形。该参数是映射到数字的特定于字体的名称。它对应于 OpenType 值 swsh 和 、like swsh 2 和 cswh 2 cswh 。
  • ornaments() 此功能启用装饰品，如芙蓉和其他丁蝙蝠字形。该参数是映射到数字的特定于字体的名称。它对应于 OpenType 值 ornm ，如 ornm 2 。

注意

为了保留文本语义，字体设计者应包含与 Unicode dingbat 字符不匹配的装饰品作为项目符号字符的装饰变体 （U+2022）。请注意，某些现有字体不遵循此建议。

  • annotation() 此功能启用批注，如带圆圈的数字或倒置字符。该参数是映射到数字的特定于字体的名称。它对应于 OpenType 值 nalt ，如 nalt 2 。

font-variant-caps ​

描述 ​

该 font-variant-caps 属性允许选择用于小写或小写字母或标题的替代字形。这些字形经过专门设计，可与周围的普通字形很好地融合在一起，以保持重量和可读性，而当简单地调整文本大小以适应此目的时，这种重量和可读性会受到影响。

注意

font-variant-caps 受 font-synthesis 的影响，font-synthesis 存在时可能会导致 font-variant-caps 不生效

效果展示 ​

语法 ​

css
font-variant-caps: normal | small-caps | all-small-caps | petite-caps |
  all-petite-caps | unicase | titling-caps;

值 ​

  • normal 下面列出的任何功能均未启用。
  • small-caps 允许显示小写字母（OpenType 功能：smcp）。小写字形通常使用大写字母的形式，但减小到小写字母的大小
  • all-small-caps 允许显示大写和小写字母的小写字母（OpenType 功能：c2sc、smcp）。
  • petite-caps 允许显示娇小的首都（OpenType 功能：pcap）。
  • all-petite-caps 允许显示大写和小写字母的小写字母（OpenType 功能：c2pc、pcap）。
  • unicase 允许显示大写字母与普通小写字母的小写字母混合（OpenType 功能：unic）。
  • titling-caps 允许显示标题大写字母（OpenType 功能：titl）。大写字母标志符号通常设计为与小写字母一起使用。当在所有大写标题序列中使用时，它们可能显得太强。

font-variant-east-asian ​

描述 ​

该 font-variant-east-asian 属性允许控制东亚文本中的字形替换和大小调整。

效果展示 ​

语法 ​

css
font-variant-east-asian: normal;
font-variant-east-asian: ruby;
font-variant-east-asian: jis78; /* <east-asian-variant-values> */
font-variant-east-asian: jis83; /* <east-asian-variant-values> */
font-variant-east-asian: jis90; /* <east-asian-variant-values> */
font-variant-east-asian: jis04; /* <east-asian-variant-values> */
font-variant-east-asian: simplified; /* <east-asian-variant-values> */
font-variant-east-asian: traditional; /* <east-asian-variant-values> */
font-variant-east-asian: full-width; /* <east-asian-width-values> */
font-variant-east-asian: proportional-width; /* <east-asian-width-values> */
font-variant-east-asian: ruby full-width jis83;

/* Global values */
font-variant-east-asian: inherit;
font-variant-east-asian: initial;
font-variant-east-asian: revert;
font-variant-east-asian: revert-layer;
font-variant-east-asian: unset;

值 ​

  • normal 该关键字会导致停用此类替代字形的使用。

  • ruby 该关键字强制对拼音字符使用特殊字形。由于它们通常较小，字体创建者经常设计特定的形式，通常稍微粗一点以提高对比度。该关键字对应于 OpenType 值 ruby。

  • <east-asian-variant-values> 这些值指定一组应用于显示的语标字形变体。可能的值为：

    关键词定义字形的标准OpenType 等效项
    jis78JIS X 0208:1978jp78
    jis83JIS X 0208:1983jp83
    jis90JIS X 0208:1990JIS X 0208:1990jp90
    jis04JIS X 0213:2004JIS X 0213:2004jp04
    simplified无，使用简体中文字形 None, use the simplified Chinese glyphssmpl
    traditional无，使用繁体中文字形 None, use the traditional Chinese glyphstrad

  • <east-asian-width-values> 这些值控制用于东亚字符的图形的大小。可能有两个值：These values control the sizing of figures used for East Asian characters. Two values are possible:

    • proportional-width激活宽度不同的东亚字符集。它对应于 OpenType 值pwid。
    • full-width激活一组东亚字符，这些字符都是相同的，大致为正方形，宽度公制。它对应于 OpenType 值fwid。

font-variant-ligatures ​

描述 ​

该 font-variant-ligatures 属性指定连字和上下文形式，它们是组合字形以生成更协调形式的方法。

效果展示 ​

语法 ​

css
/* 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> */

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

值 ​

  • normal

    该关键字会激活正确渲染所需的常用连字和上下文形式。激活的连字和形式取决于字体、语言和脚本类型。这是默认值。

  • none

    该关键字指定禁用所有连字和上下文形式，甚至是常见的连字和上下文形式。

  • <common-lig-values> 这些值控制最常见的连字，例如 for fi、ffi或th类似的。它们对应于 OpenType 值liga和clig。可能有两个值：

    • common-ligatures激活这些连字。请注意，关键字normal会激活这些连字。
    • no-common-ligatures停用这些连字。

  • <discretionary-lig-values> 这些值控制特定的连字，特定于字体并由类型设计者定义。它们对应于 OpenType 值dlig。可能有两个值：

    • discretionary-ligatures激活这些连字。
    • no-discretionary-ligatures停用连字。请注意，关键字normal通常会停用这些连字。

  • <historical-lig-values> 这些值控制旧书中历史上使用的连字，例如德语 tz 二合字母显示为 ꜩ。它们对应于 OpenType 值hlig。可能有两个值：

    • historical-ligatures激活这些连字。
    • no-historical-ligatures停用连字。请注意，关键字normal通常会停用这些连字。

  • <contextual-alt-values> 这些值控制字母是否适应其上下文，即它们是否适应周围的字母。这些值对应于 OpenType 值calt。可能有两个值：

    • contextual指定要使用上下文替代项。请注意，关键字normal通常也会激活这些连字。
    • no-contextual阻止它们的使用。

font-variant-numeric ​

描述 ​

该 font-variant-numeric 属性指定对数字形式的控制。在普通段落文本中，使用比例数字，同时使用表格数字，以便数字列正确排列

效果展示 ​

语法 ​

css
font-variant-numeric: normal;
font-variant-numeric: ordinal;
font-variant-numeric: slashed-zero;
font-variant-numeric: lining-nums; /* <numeric-figure-values> */
font-variant-numeric: oldstyle-nums; /* <numeric-figure-values> */
font-variant-numeric: proportional-nums; /* <numeric-spacing-values> */
font-variant-numeric: tabular-nums; /* <numeric-spacing-values> */
font-variant-numeric: diagonal-fractions; /* <numeric-fraction-values> */
font-variant-numeric: stacked-fractions; /* <numeric-fraction-values> */
font-variant-numeric: oldstyle-nums stacked-fractions;

/* Global values */
font-variant-numeric: inherit;
font-variant-numeric: initial;
font-variant-numeric: revert;
font-variant-numeric: revert-layer;
font-variant-numeric: unset;

值 ​

  • normal

    该关键字会导致停用此类替代字形的使用。

  • ordinal

    该关键字强制对序数标记使用特殊字形，例如英语中的 1st、2nd、3rd、4th 或意大利语中的 1a。它对应于 OpenType 值ordn。

  • slashed-zero

    该关键字强制使用带斜杠的 0；当需要明确区分 O 和 0 时，这很有用。它对应于 OpenType 值zero。

  • <numeric-figure-values>

    这些值控制用于数字的数字。可能有两个值：

    • lining-nums激活一组数字，其中数字都位于基线上。它对应于 OpenType 值lnum。
    • oldstyle-nums激活一组数字，其中某些数字（例如 3、4、7、9）具有下伸部。它对应于 OpenType 值onum。

  • <numeric-spacing-values>

    这些值控制用于数字的数字的大小。可能有两个值：

    • proportional-nums激活一组数字，其中数字大小不一。它对应于 OpenType 值pnum。
    • tabular-nums激活数字大小相同的一组图形，使它们可以像表格一样轻松对齐。它对应于 OpenType 值tnum。

  • <numeric-fraction-values>

    这些值控制用于显示分数的字形。可能有两个值：

    • diagonal-fractions激活一组数字，其中分子和分母变小并用斜线分隔。它对应于 OpenType 值frac。
    • stacked-fractions激活一组数字，其中分子和分母变小、堆叠并由水平线分隔。它对应于 OpenType 值afrc。

font-variant-position ​

描述 ​

该 font-variant-position 属性用于启用版式下标和上标字形。这些是在与默认字形相同的全角字框中设计的备用字形，旨在与默认字形布置在同一基线上，不调整基线大小或重新定位基线。它们被明确设计为与周围的文本匹配，并且在不影响行高的情况下更具可读性。

注意

目前兼容 Firefox 浏览器

效果展示 ​

语法 ​

css
font-variant-position: normal | sub | super;

值 ​

  • normal 下面列出的任何功能均未启用。
  • sub 允许显示下标变体（OpenType 功能：subs）。
  • super 允许显示上标变体（OpenType 功能：sups）。

font-weight ​

描述 ​

该 font-weight 属性指定字体的粗细或粗体。但是，某些字体并非在所有粗细中都可用;有些仅在正常和粗体上可用。

效果展示 ​

语法 ​

css
font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 |
  600 | 700 | 800 | 900;

值 ​

  • normal 正常字体粗细。与 400 相同。
  • bold 粗体字体粗细。与 700 相同。
  • bolder 指定比继承值更粗的权重。
  • lighter 这是描述
  • 100, 200, 300, 400, 500, 600, 700, 800, 900 字体的数字字体粗细，不仅提供普通字体和粗体。如果给定的确切权重不可用，则使用具有附近权重的面。
  • inherit 继承