汉沽网站建设:Web设计中可变字体的介绍

2019.08.17 mf_web

155

多年来,人们一直在谈论创建可调大小字体的字体。多年来,这只是一个白日梦。但似乎可变字体终于来了,他们只会在未来几年获得支持。

世界各地的设计师一直在讨论这些可能性,并兴奋地争论着webfonts的未来。变量字体对于CSS3 webfonts的未来意味着什么?字体代工厂如何设计字体以满足网页设计师的需求?

汉沽网站建设在这篇文章中,我将带您快速了解可变字体及其对网络的意义。这是一项令人兴奋的新技术,即使它可能需要数年时间才具有商业可行性,但设计师仍有充足的时间准备。

什么是变量字体?

可变字体格式的概念已存在多年。但是,20世纪90年代的早期概念从未获得过牵引力,网络也没有为这些类型的字体做好准备。

但是这次可变字体的正式发布是一件非常新的事情。谢天谢地,它正在以正确的方式完成。

四家大型科技公司Adobe,Apple,微软和谷歌都同意这种格式的新名称:OpenType Font Variations。

此更新随新的OpenType 1.8规范一起提供,并且在OpenType文件中完全支持。每个.otf文件现在可以包含一组可变数据点,用于调整字母宽度,下降长度和x高度值(以及其他类似功能)。

可变字体是一种字体文件,包含该字体的许多不同样式或显示。

可变字体

可变字体可以使分发更容易,但它们从未用于Web。现在随着响应式设计的普及,这个变量webfonts的主题已经被更频繁地抛出。

这个新的OpenType字体变化在2016 年华沙ATypI会议上正式宣布。该公告刺激了专业设计师John Hudson 的详细博客文章。

这是他的帖子中引用的更多技术细节:

OpenType可变字体包含一个或多个轴,每个轴在字体设计的不同极端之间提供特定的变化。该格式还允许中间设计的可能性,对于整个字形集或单个字形,当设计在变化设计空间中变化时,可以更好地控制设计。

如果你是一个web / UI设计师,那么你可能不会从头开始创建很多字体。因此,如果您只想在商业项目中使用可变字体,那么这些技术细节就不那么有用了。

但是,在网上查看他们的应用程序之前,让我们深入研究它们的工作方式。

这些如何运作?

现在安装Google字体非常简单。您访问该页面,选择所需内容,然后复制导入URL。但每个Google字体只有一个权重和字形集。

这意味着Oswald可以按常规,粗体或两者安装。但是,添加两种样式需要更多HTTP数据,因为两种样式都必须单独加载。

可变字体将所有这些信息一起包含在一个文件中。但他们甚至更进了一步。

可以在Web浏览器中即时调整可变字体,以便您可以对重量或其他功能(如下降长度或x高度)进行细微更改。自定义选项由字体设计师控制,因此具有很大的灵活性。

以下是John Hudson的帖子中引用的一篇文章,解释了这些内容如何更详细地工作:

字体可以包含一组与字体的常规重量和宽度相对应的字形轮廓,较轻,较重,较窄和扩展的设计将在字体数据中表示为轮廓节点相对于该轮廓的移动。

在技术性较差的情况下,这归结为用于塑造字母的可塑网格。想想数据点定义“网格”的插值。每封信。默认点称为主样式/主字体,可以调整这些点以创建不同的字体样式。

您可能会问为什么这甚至是必要的。动态操作字体样式的目的是什么?

实际上有很多好理由:

  • 根据屏幕大小更新字体样式

  • 调整重量以改善字距调整

  • 调整较粗字体系列的字母宽度

  • 更改大文本中的基线或字母高度(例如标题与段落)

在像Photoshop这样的设计程序中,您可以使用控件直接操作字体变体。但是网络字体怎么样?你会如何使用CSS动态定制这些?

现在还没有正式决定。W3C具有此模块的CSS3规范,需要更新以支持变量设置。

没有设定的时间表,所以我现在无法保证任何事情。但请放心,这四大科技公司的团队正在努力为OpenType字体变体创建标准。

Web上的可变字体

这些OpenType变量字体基本上是为网络制作的,因为它们在打印世界中没有那么有价值。是的,他们可以制作更流畅的动态字体并减小文件大小,是的,这对于打印布局非常方便。

但在网络上,这些可变字体文件可以减少HTTP请求,并提供比当前形式的Web字体更多样化。他们将是一个完整的游戏改变者。

目前最大的障碍是浏览器支持。

CSS3有一个名为@ font-face的自定义规则,允许开发人员导入字体并在Web上实时渲染它们。此规则支持各种格式,如TTF,SVG,当然还有OTF。

问题是现代浏览器尚未就如何实现这些变量.otf文件达成一致。

关于W3C也是如此,需要修改CSS3规范以帮助浏览器支持这些可变字体。

除了CSS3支持之外,还有渲染引擎的问题。字体需要渲染引擎才能正常显示,浏览器需要支持该渲染引擎的一致性。

根据我的估计,我们距离获得可变网页字体的牵引力至少还有几年的时间。但是,拥有大型科技公司提倡OpenType字体变化是一个巨大的优势。

网上可变字体的实用价值应该是显而易见的。它们更小,更易于使用,并且它们提供了更多的定制而没有质量损失。

但它们可行性的时间表仍然是个大问题,我希望我们能尽快回答这个问题。

未来的未来

如果您知道如何使用字体制作软件,则可以创建和构建OpenType字体变体。这篇文章讨论了所有术语,包括变体表和字体的调整增量。

但该指南非常详细,真正针对高级型设计师。那么除了类型设计师之外,人们的未来会怎样?

设置完整浏览器支持的日期为时尚早,但未来看起来不错。该规范由四家领先的科技公司开发:Adobe,Apple,Google和Microsoft。这四家公司都在业界占据重要地位,许多字体代工厂甚至同意提供支持。

而OpenType v1.8版本只是一个开始。

OpenType字体

免费的Google Fonts平台已经在考虑如何本地支持可变字体。这包括更多类似TrueType的字体类型,但也包括来自其浏览器Google Chrome的更多支持。FontLab团队还计划尽快完全支持 OpenType变量字体。

现在只需了解可变字体是一种新兴技术,它们正在迅速获得支持。您当前的网络工作流程今天甚至今年都可能没有太大变化。但在接下来的3到5年中,您可能会在完全不同的Web字体世界中进行设计。

由于这个主题是如此新颖并且仍处于开发阶段,因此很难找到高质量的学习资源。但是这篇文章中的所有链接都是开始使用的绝佳资源。随着这个规范获得支持,随着时间的推移,我保证会有更多的阅读材料。

汉沽网站建设

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP