利用可变字体增强屏幕阅读体验_极简慕枫

时间：2019-08-06

编辑:网站制作公司

834

在“ 所有艺术就是宣传：批判性文章 ”一书中，乔治·奥威尔描述了写作过程如下：“当你想到一个具体的对象时，你会无言地思考，然后，如果你想描述你已经形象化的东西，那么你可能一直在寻找，直到你找到适合它的确切词语。“

作为设计师和开发人员，我们手头有许多工具可以帮助将作者的想法和意图变为现实，从静态图像和图形到视频和动画或GIF。但是，一个经过考虑的排版概念将真正邀请读者沉浸在文本中。

将排版看作是一种书面交流的解剖学：它关注所有部分的功能，结构和系统; 它的外观（形状，大小）和位置，材料以及它们之间的关系。它将各个部分组合在一起，形成一个功能整体良好的排版几乎不可察觉，但在帮助读者欣赏面前内容的各个方面是不可或缺的。

苏州网站设计

静态字体和网络

直到数字时代，排版与我们的交流方式一起发展，印刷师主要关注创造尽可能好的阅读体验。但印刷文字不灵活; 它的排版，材料和制作过程都是基于对普通读者的估计，他们的年龄，视力，身体特征，阅读习惯和阅读能力。

“良好的排版几乎不可察觉，但在帮助读者欣赏面前内容的各个方面是不可或缺的。”

自从我们开始设计屏幕以来，我们不仅要考虑读者及其环境，还要考虑媒体本身，这已成为一个不可预测的变量。与印刷设计不同，我们无法再准确预测我们的内容将如何呈现。

不幸的是，数字排版领域尚未对这一新挑战做出适当回应。事实上，除了少数例外，网页排版不像印刷排版那么容易。

屏幕阅读没有得到应有的关注有两个原因：

平面设计，用户体验，网页设计和网页开发之间的界限越来越模糊，越来越少的专业人士对微排版和字体的历史有了解或敏感。没有这些知识，就可读性，易读性，印刷语音和美学做出了天真的决定。

综合印刷层次结构通常要求使用多种样式的字体系列，这对页面加载时间有负面影响。不幸的是，当谈到在良好的网络性能和复杂的网络排版之间进行选择时，后者通常会得到简短的结果。即使是我们中间最大型的爱好者也必须在这些紧张的范围内进行设计。

现实情况是，在某些情况下，在线体验无法与我们习惯的印刷文本的印刷复杂性相匹配。幸运的是，新技术使我们有机会解决这些挑战，并在我们如何响应读者及其环境方面更加灵活，但这些资源目前仍未得到充分利用。

变量字体静态 — 字体系列Bressay使用四种样式（常规，斜体，显示常规和显示斜体），包括静态字体和相同斜体和光学范围的可变字体之间的文件大小比较。

可变字体

为了改善在线阅读体验，在OpenType字体格式规范的修订版中引入了OpenType字体变体，更好地称为可变字体。该技术背后的概念是，可变字体可以比静态字体更有效地打包和提供所有样式的字体系列，显而易见的好处是提高了Web性能和更高的排版灵活性。

轴

字体族被定义为一组相互连接的字体，通常通过共同的设计特征。在一个系列中链接字体的最常见参数是重量和宽度; 这些变量在可变字体技术中称为轴。

静态字体的权重数量通常仅限于其设计者可供购买的字体。同一系列的可变字体将提供连续的权重范围，允许使用几乎无限数量的实例，所有实例都在一个字体文件中：

可变字体轴

这种灵活性也可以扩展到第二个（或更多）轴，用于更大范围的表达。下面说明了重量和宽度轴的组合，所有这些都在一个字体文件中。

可变字体五轴

已确定五个轴特别有用且常见，因此已在OT规范中注册：

ital：二进制轴用于在罗马（直立）和斜体字形之间变化。斜体通常用于强调短语，突出显示外来词或引用。值设置为“italic”的font-style属性可用于访问斜体字形。
opsz：用于改变设计以适应不同文本大小的连续轴。尺寸特定的设计旨在弥补小尺寸细节的损失。目的是优化小尺寸的易读性，并优化大尺寸的个性。光学尺寸值旨在根据字体大小自动调整。已经创建了一个新属性font-optical-sizing来打开或关闭光学尺寸。
slnt：用于在直立和倾斜文本之间变化的连续轴。与斜体相反，此轴允许您操纵字体中倾斜倾斜的角度。可以使用值设置为倾斜的font-style属性angle，其角度为度。
wdth：一个连续轴，用于改变从较窄到较宽的字形宽度。当用于对段落进行微排版调整时，这可能会派上用场。根据宽度轴的范围，极值通常更具表现力，并且可以用于标题。font-stretch属性可用于访问宽度变体，对于压缩变体，值低于100％，对于扩展变体，值高于100％。
wght：用于改变行程厚度的连续轴，以提供从较轻到较大的变化。与斜体类似，较大的权重通常用于强调常规或书本权重中的文本集中的单词。字形通常在频谱的较重端变得更加拥挤，而在更轻的一端变得更加脆弱。因此，标题通常使用更极端（通常更具表现力）的权重。font-weight属性可用于访问权重变体。

字体设计人员可以根据需要创建和组合轴，但不能保证唯一轴的互操作性。您可以在CSS中使用这些四字母标记来指定沿着变化轴的点，如下面的代码示例所示。

您可能还喜欢：如何使用Shopify的新font_picker设置。

积分

为了开始使用可变字体，我们需要链接它们：

@font-face {
     src: url('[URL to woff goes here.]');
     font-family:'Venn';
     }

轴静态设置可以比我们习惯的静态字体更精细地操作。例如，要使用font-variation-settings设置font-weight和width，您可以执行以下操作：

font-variation-settings:
     'wght' 557.5,
     'wdth' 83.13;

这是与基本属性等效的低级别：

     font-weight: 557.5;
     font-stretch: 83.13%;

这些可能与媒体查询结合使用，例如喜欢颜色方案或光级。

支持和后备

所有主流浏览器都支持可变字体。如果在较旧的浏览器中查看，则在变量字体中定义默认实例以进行后退。但是，最佳做法是使用等效的静态Webfonts作为第一个回退选项，以匹配网站的原始设计。

采用

可变字体增强我们的阅读和用户体验的潜力是不可否认的。虽然这项技术还很年轻，但一些早期采用者已经展示了它的一些可能性。例如，Clearleft为Ampersand Conference网站选择了两个不同的可变字体系列，每个系列都有一个权重轴。OliverSchöndorfer通过在他的可变字体演示页面上使用18个不同的单轴双轴可变字体实例将其推向极端。除了纯粹的排版有趣的例子，Goertek已经委托了一个响应声音的富有表现力的变量字体，开发人员Andrew Johnson也在增强现实中尝试可变字体。

特别是这些早期响应实验激发了对可变字体如何使文本响应用户及其环境的思考，使得书面文字更具表现力和更易于访问，而不会影响Web性能。