使用 Adobe Fonts 中的可变字体

可变字体是一种高度可定制的字体技术。通过 Adobe Fonts 可变字体面板,可调整可变字体的外观并选择最适合您项目的样式。目前支持可变字体的 Creative Cloud 应用程序有 Photoshop、InDesign 和 Illustrator。

 

在 Adobe Fonts 上浏览可变字体

什么是可变字体?

可变字体使用一个文件存储许多字体样式,这一点与静态字体不同,静态字体使用单独的文件存储每个可用的样式。通过此类字体,可为字体的每个设计轴指定一个值,从而使您可控制字体的外观,而静态字体做不到这一点。 

传统的静态字体要求添加或安装要在项目中使用的每个样式。例如,对于 Acumin Pro,可能要添加 Acumin Pro Regular、Acumin Pro Italic 以及其他任何要访问的样式。Acumin Variable 包含 Acumin 的所有样式,因此您只需要添加一种字体。 

图形用户界面,自动生成应用描述
Acumin Pro 是一种静态字体,它具有超过 18 种单独的样式,每种样式都需要添加才能使用。而 Acumin Variable 有倾斜、粗细和宽度轴可用,您只需添加一个字体即可自定义。

可变字体的每个配置称为一个实例。实例是为快速访问而创建的预设样式。上图中的可变字体面板显示将 Acumin Variable 设置为默认实例,即在自定义之前所有可变字体都要回退到的预先确定的设置。  

该面板再向下是轴控件。表示某个连续范围内的样式变体。一个可变字体可包含多个轴。可将轴自定义为其最小或最大范围内的任意数字。在 Acumin Variable 示例中,这些轴为倾斜粗细宽度

如何在 Adobe Fonts 网站上使用可变字体

Adobe Fonts 网站上可变字体的每个系列的详细信息页面都包括一个交互式文本工具和面板,通过他,可将字体自定义为所需样式。可选择预设实例以快速操纵,也可创建您自己的实例。  

图形用户界面,自动生成应用描述

将可变字体添加到 Web 项目

要在 Web 项目中保存可变字体,请在系列页面上的可变字体面板上方选择添加到 Web 项目。务必选择正确的字体;某些可变字体在其系列中还有其他字体。

图形用户界面,自动生成应用描述

在面板底部选择复制 CSS 以获取与您创建的自定义实例对应的代码。如果没有自定义设置,则代码将反映默认实例。

图形用户界面,自动生成应用描述

可在自定义可变字体后将浏览器 URL 加入书签以稍后重新访问上次的自定义设置,或选择复制 URL 以共享或保存配置。

正常使用的可变字体

可变字体的“可自定义”这一特性使其非常适合多种多样的应用类型,从数字图形到产品包装甚至车辆贴膜。通过调整宽度,可排列字体,以使其在不规则的表面上仍可辨认。 

充满创意的可变字体设置可展现品牌个性,或顺利放入一般无法放入下三分之一图形的长标题。  

一个人对着镜头微笑

倾斜、粗细和宽度轴用于调整 Obviously Variable 以适合汽车门板。Acumin Variable 用于较长的下三分之一标题。

可使用可变字体在广告牌和海报上创建视觉层次结构,或根据包装设计中的微小空间和奇特形状量身定制可变字体。 

以城市为背景的广告牌
使用 Acumin Variable 创建视觉层次结构

包含文字、洗漱用品、乳液的图片
使用 Minion Variable 的粗细和视觉字号轴创建视觉层次结构

可变字体通过在段落对齐中创建更佳的换行而体现优势。尤其是通过宽度轴,可更高效地产生在视觉上赏心悦目的字间距。  

文本描述
使用 Kepler Variable 的宽度轴减少段落对齐中明显的间隔。红色矩形展现在每个句子中减少的空格数量。

可变字体的功能使其可在响应式 Web 设计中表现出色。使用一种可变字体即可按较小到较大的屏幕尺寸相应地调整,这样有助于保持较小的文件大小并缩短加载时间。 

一张含有文字、插孔、截屏的图片
可变字体包含在一个字体文件中,这样使其可更快地加载到 Web 上

图表,自动生成文字描述
可在网站上使用可变字体以随着屏幕尺寸的变化而调整字体

可将代码片段添加到您的 CSS,以使可变字体产生动画效果、响应声音、环境光线或计算机系统主题。可变字体轴还使可变字体更容易产生动画效果。 

一张包含形状的图片
在轴的值范围内移动可变字体产生动画效果

字体设计师不断探索用这种字体技术进行交互和创新的新方式。


相关资源 

更快、更轻松地获得帮助

新用户?