css 排版_Web排版的未来：CSS字体4级

css 排版

Web字体为设计注入了生命，帮助我们避免了在Web设计初期广泛使用的系统默认设置。 当今有许多可用的选项，我们有很多技巧可以提供和设置自定义字体。 CSS字体模块的第4级概述了您会喜欢的更多有趣选项，包括一些令人兴奋的属性，例如font-min / max-size。 本文不会揭示第4级的所有细节，而是将重点介绍仍处于起步阶段的有趣部分。 冒险从现在开始！

现状

目前，我们位于两个级别的规范之间。 一方面我们有3级 ; 自2013年10月以来一直在“候选推荐”中使用的规范。展望未来，我们的等级为4 ； 自2017年7月以来一直在“工作草案”中使用的规范。如果您需要提醒有关W3C规范阶段的顺序，请花一点时间来回顾一下它们：

1. 工作草案 （WD）：已发布，供社区（包括W3C成员，公众和其他技术组织）审查。 不代表工作组的共识，也不代表W3C的任何认可。
2. 候选建议书 （CR）：经过广泛审查并准备实施。 并不意味着得到W3C的认可。 向广大社区发出信号，是时候进行最终审查了。
3. 拟议建议书 （PR）：已发送给W3C咨询委员会以最终认可的成熟技术报告。
4. W3C建议书 （REC）：得到W3C成员和总监的认可。 建议广泛部署规范指南。

现在，我们了解了规范阶段，让我们深入了解第4级的要点，并介绍该模块新的一些已知和已记录的功能。

字体模块级别4

级别3的标准化部分将被移植到级别4，但级别4也将包含其自己的独特添加项。 诸如字体变体，字体渲染控件，颜色字体支持，基本字体属性等部分 和   字体资源将包含许多开发人员会发现有用的全新项目。

基本字体属性

呈现的特定字体由font-family和应用于给定元素的其他字体属性（例如， font-weight和font-style确定。 这种结构允许设置彼此独立地变化，并且包含基本字体属性 。 那么这个小组有什么计划呢？

📌font-min-size和font-max-size

.element {
    font-min-size: 0.875rem;
    font-max-size: 5rem;
}

在第4级概述的所有内容中，这两个属性是我最喜欢的，因为这两个属性都将允许元素的font-size “固定”在提供的值之间。 对于响应性设计迷来说，这无疑是一个了不起的消息。 值可以是绝对大小 ， 相对大小或长度百分比 。

目前没有任何文档说明浏览器的resize事件如何触发这两个属性，并且如果您要使用Chrome中的实验性Web平台功能标志来尝试使用此功能，那么您就不走运了。

• 规格 。

字体资源

本节概述的大多数项目都有助于控制与获取，引用和显示您选择的字体系列有关的方面。

📌 字体显示

@font-face {
    font-display: auto | block | swap | fallback | optional;
}

此属性根据是否以及何时下载字体并可供浏览器使用来确定字体的显示方式。 它也可以在@font-face或@font-feature-values声明中使用。

• auto ：字体显示策略是用户代理定义的（即浏览器），除非在CSS中明确定义。
• block ：赋予字体较短的阻止时间 （大多数情况下建议3 s ）和无限的交换时间 。
• swap ：为字体提供一个0s的 块周期和一个无限的交换周期 。
• fallback ：为字体提供极小的块周期 （大多数情况下建议100ms或更短）和较短的交换周期 （大多数情况下建议3s ）。
• optional ：为字体提供极小的块周期 （大多数情况下建议为100ms或更短）和0s 交换周期 。

对于那些密切关注Web字体性能并且每天忙于辩论FOUT或FOIT的人 ，那么此属性将使您非常满意。

• 规格 。

📌 @ font-feature-values

@font-feature-values {
    font-display: auto | block | swap | fallback | optional;
}

如果@font-face规则中省略了font-display ，则用户代理将通过@font-feature-values设置的font-display @font-feature-values用于相关的font-family如果已设置），否则默认为font-display: auto 。 请参阅有关font-display值的先前说明。

该规则集非常适合通过第三方提供字体并且您无法控制@font-face规则，但仍能够为提供的font-family设置默认font-display策略的情况。 对于那些采取不间断第三方行动的建筑工地来说，这是个好消息。

@font-feature-values {
    font-family: "Custom Font Name", sans-serif;
    font-display: fallback;
}

尽管仍然很新并且有点模糊，但我只能假设为了控制特定的font-family显示行为，开发人员必须在此规则集中使用font-family属性才能定位所需的字体。 同样，这只是我的一个假设，绝不是事实。

• 规格 。

字体变化

本部分是100％新增的，特定于第4级。当前记录的大多数功能与每个字体的大小和设置有关。

📌 字体光学设置

使用此属性是为了保持样式特征并提高在不同光学尺寸下的可读性。 使用数字字体，我们可以将字体缩放为任意大小，但这并未考虑这些变化尺寸下字体的外观。

“以不同大小呈现的文本通常受益于略有不同的视觉表示。 例如，为了帮助以较小的文本尺寸阅读，较大的衬线笔划通常较粗。 较大的文本通常具有更细腻的图形，在较粗和较细的笔划之间具有更大的对比度。” 〜4级工作草案

.element {
    font-optical-sizing: auto | none
}

• auto ：用户代理可以根据屏幕的font-size和像素密度来修改字形的形状。 对于使用字体变体的OpenType和TrueType字体，通常通过使用opsz字体变体来完成。
• none ：用户代理不得针对光学尺寸修改字形的形状。

• 规格 。

📌 字体变化设置

.element {
    font-variation-settings: normal | [ <string> <number>]
}

此属性提供对OpenType或TrueType字体变体的低级控制。 它旨在提供一种访问未广泛使用但特定用例需要的字体变体的方式。

• normal ：使用默认设置对文本进行布局。
• <string> <number> ：呈现文本时， OpenType轴名称列表将传递到文本布局引擎以启用或禁用字体功能。 每个设置始终是4个ASCII字符的<string> ，后跟<number>指示轴值。 如果<string>具有更多或更少的字符或包含U + 20-U + 7E代码点范围之外的字符，则整个属性无效。 <number>可以是小数或负数。

.element {
    /* four letter axis name and number */
    font-variation-settings: "opsz" 0.5;
}

上面代码中使用的字符串值称为四字母轴名称 ，它描述您希望更改的功能，以及通常在0-1范围内的变化值，但在需要时也可以为负值。 允许的变化将始终取决于所选的字体。

• 规格 。

彩色字体支持

📌 字体调色板

.element {
    font-palette: normal | light | dark | <palette-identifier>;
}

许多彩色字体文件格式都允许对字形中的颜色进行参数化 。 在这些字体中，颜色在描述每个字形的几何图形时由索引引用。 这些索引是使用字体内的查找表在当前活动调色板中解析的。 但是，许多字体包含多个调色板，每个调色板包含一组由字体设计人员选择的互补色，以提供令人满意的视觉效果。 开发人员可以使用下一节中提到的@font-palette-values规则定义调色板。

• 规格 。

📌 @ font-palette-values

/*Syntax*/
@font-palette-values <custom-identifier> {
  <declaration-list>
}

/*Example*/
@font-palette-values Augusta {
  font-family: Handover Sans;
  base-palette: 3;
  1: rgb(43, 12, 9);
  3: var(--highlight);
}

这表示字体中使用的调色板。 它定义一个调色板，并将该调色板与特定字体相关联。 这样一来，网络作者就可以选择要在颜色字体内使用的任意颜色，而不仅限于字体文件内预先存在的调色板。

• base-palette ：此描述符指定字体中的调色板 ，包含@ font-palette-values规则将其用作初始值。 如果@ font-palette-values规则中没有任何<integer>键，则@ font-palette-values规则将使用与该描述符的值相同的索引来表示字体中的调色板 。 如果@ font-palette-values规则中存在<integer>键，则这些描述符中的每个描述符都将覆盖此@ font-palette-values块表示的调色板中的单一颜色。

• 规格 。

📌字体介绍

.element {
    font-family: 'Custom Font Name';
    font-presentation: auto | text | emoji;
}

该属性允许网络作者选择是将表情符号表示形式还是文本表示形式用于某些表情符号代码点。 表情符号狂热者获得巨大胜利😎

• 规格 。

结论

Web字体肯定会有许多令人兴奋的新功能，我鼓励您在收藏夹可用时开始尝试。 如果您有第4级甚至第3级的特别喜欢的内容，请在评论中告知我们，包括您可能对我们讨论的功能有任何意见。

我还建议开发人员研究一下css-font-loading规范 ，以了解加载性能是否值得关注。 您可以监视支持，因为在所有浏览器供应商中采用率都不错 。 享受网络字体和编码愉快的新时代！

翻译自: https://webdesign.tutsplus.com/articles/the-future-of-web-typography-css-fonts-level-4--cms-29911

css 排版