css教程

动态排版的可变字体

Barbara Streisand

Dec 09, 2024 pm 02:59 PM

您是否觉得跟踪不同粗细和样式的多个字体文件很乏味？对于网页设计师来说，为普通、粗体、斜体和其他字体变体创建不同的文件可能具有挑战性。这使创作过程变得复杂并阻碍了他们的工作流程。将所有这些变体合并到一个文件中怎么样？

这就是可变字体的用武之地。可变字体是 OpenType 字体技术的突破性进步，它允许一个字体文件包含多种变体，例如常规、粗体和斜体。这意味着设计人员只需使用一个文件即可访问他们所需的所有各种粗细、样式和宽度。这项发明使得不断轻松地修改重量、宽度和倾斜等特性变得简单，从而简化了设计过程并促进了创作自由。

以 Kyiv Sans 字体为例，本文将研究 CSS 中不同字体的相关性，并演示粗细等品质甚至 MIDL 等非标准字体变体的重要性。使用这些工具，我们将学习如何在 CSS 中制作动态且美观的排版。

可变字体简介

可变字体技术架构使设计人员和开发人员可以使用 CSS 立即控制这些排版特征，从而允许进行精确的更改以满足项目的特定要求。这通过大大降低加载时间并用单个可变字体文件替换许多静态字体文件来提高 Web 性能。

可变字体的灵活性和准确性是传统静态字体文件闻所未闻的，构成了印刷技术的重大发展。传统字体需要针对每种样式和粗细的单独文件，而可变字体则不同，它可以在一个可扩展文件中捕获多种样式。这是通过 OpenType 字体样式实现的，该字体样式允许沿一个或多个轴不断变化，例如粗细、宽度和光学尺寸。

CSS 中可变字体的好处

我们将引导您了解如何使用这些工具创建动态且美观的 CSS 排版。让我们看几个例子：

效率：通过将多种字体样式组合到一个文件中，可变字体可以最大限度地减少 HTTP 请求，加快页面加载速度并提高整体效率。

灵活性：设计师可以精确地修改版式以适应不同的设计环境和用户偏好，因为他们可以对 wght 等属性以及 MIDL 和 CONT 等自定义属性进行细粒度控制。

平滑过渡：可变字体允许动态更改字体样式，避免离散字体文件之间的突然切换。因此，字体样式之间的过渡平滑流畅。

响应式排版：可变字体允许根据视口大小或其他用户定义的参数进行调整，从而实现响应式排版，确保跨设备的最佳易读性和美观吸引力。

动态排版：可变字体根据用户交互或环境条件提供实时变化，因此支持动态，提高用户参与度并产生身临其境的体验。

辅助功能：更广泛的排版选项允许文本自定义和修改，以确保跨各种设备和用户偏好的易读性和可读性。

美学：在网络上，可变字体激发创意设计理念并挑战印刷界限，为印刷表达和实验开辟新的机会。

可扩展性：可变字体非常适合响应式设计，并保证文本在任何尺寸或分辨率下都清晰易读，因为它们可以在不损失质量的情况下进行扩展。

介绍使用可变字体的响应式动态版式的概念

现代网页设计允许设计师使用响应式和动态排版以及不断变化的字体来创建更灵活和迷人的排版体验，让我们剖析这些想法：

字体中的变量：变量字体是具有多种字体变体的单个字体文件，包括 wght 和特殊属性 MIDL 和 CONT。与传统字体相比，可变字体在版式设计中提供了更多的自由度和效率，传统字体需要每种样式都有不同的文件，并能够在这些变体之间实现流畅的过渡。

响应式排版：设计文本以轻松适应多种屏幕尺寸、分辨率和查看环境称为响应式排版。从大型台式电脑到手机以及介于两者之间的所有设备，这保证了许多设备上的最佳可读性和美观性。动态字体大小、行距和其他排版更改有助于响应式排版改善用户体验和可访问性。

动态版式：动态版式通过将交互和动画融入版式设计中来增强响应式版式。 JavaScript 和 CSS（层叠样式表）可帮助设计人员开发适合内容更改、用户交互或滚动行为的字体。动态排版使用 wght、MIDL 和 CONT 等组件来产生视觉吸引力和交互性，引导用户注意力并吸引他们。

设计师通过将动态灵活的排版方法与不同的字体相结合，创造出丰富、多功能、身临其境的在线排版体验。无论是根据用户活动动态改变字体、动画文本元素以突出显示重要信息，还是根据屏幕尺寸调整字体粗细和大小，这种方法都为数字设计中的创造力和发明提供了许多机会。

Kyiv Sans 的各种字体属性允许设计师创建有趣且完美的印刷过渡。这通过增加网页材料的审美吸引力和实用性来增强其交互性和用户友好性。

了解可变字体属性

各种字体提供了传统静态字体所不具备的一系列新特征。了解这些特征对于充分发挥可变字体的潜力是必要的。这些是一些基本的：

重量 (wght)： 通过沿连续轴改变重量，可变字体可以在多个厚度级别之间实现无缝过渡。设计师可以在单个字体文件中指定一系列粗细，从细到超粗，以及介于两者之间的所有点。

中间层效果 (MIDL)： 此自定义轴允许设计人员更改字体内的中间层效果。这可以赋予文本独特的视觉风格，以及额外的设计自由度和创造性。

对比度（CONT）：另一个自定义轴是CONT，它可以更改字体的对比度。通过根据设计要求动态改变对比度，这可以帮助最大限度地提高文本的可读性和视觉吸引力。

理解和应用这些品质将帮助设计师制作出视觉上引人注目的字体。凭借其不同的字体特征，Kyiv Sans 提供了特殊的自定义选择，可提高网页排版的可用性和外观。

可变字体中可用的附加轴和变体概述

除了传统的粗细、宽度和光学尺寸修改之外，可变字体还提供了广泛的个性化选择。以下是可能可用的轴和变体的摘要：

可变字体设计者可能使用的几个注册轴由 OpenType 规范定义：

宽度（wdth）：该轴控制字体的水平扩展或压缩，使设计者能够修改字符的宽度。通过调整此轴，设计人员可以在不改变整体高度的情况下创建显得更窄或更宽的字体，从而实现灵活的压缩到扩展样式。
倾斜（slnt）：该轴允许设计者在不改变字形结构的情况下对字符应用类似斜体的倾斜。斜轴通常模仿传统斜体的效果，但保留直立的字母形式，使其可用于创建风格变化。
斜体（ital）：斜体轴在字体的直立和斜体版本之间切换。与仅倾斜字符的倾斜轴不同，斜体轴涉及对字符的完全重新设计，以反映真正斜体的草书性质，提供更真实的斜体风格。
光学尺寸 (opsz)：该轴调整字体的设计以优化不同尺寸下的可读性。例如，较小的尺寸可能具有较粗的笔划和更多的开放式计数器，以获得更好的易读性，而较大的尺寸可能会更加精致和精致。该轴对于跨各种媒体的响应式排版特别有用。
等级（GRAD）：等级轴允许对字体的笔划粗细进行细微调整，而不影响整体间距。它对于提高不同打印或屏幕环境中的可读性非常有用，其中稍微增加或减少粗细可以增强对比度和清晰度。
对比度 (CNTR)：此轴修改字体内粗笔画和细笔画之间的对比度。通过调整对比度，设计师可以创建具有不同程度的强调和视觉冲击力的字体，从低对比度的人文风格到高对比度的现代设计。
X 高度 (xhgt)：此轴调整小写字母相对于字体大写字母的高度。增加 x 高度可以提高小尺寸下的易读性或创造更现代的外观，而减少 x 高度可以唤起更传统或正式的感觉。

除了注册的轴之外，可变字体创建者还可以指定自己的自定义轴。关于 Kyiv Sans：这些包括：

中间层效果（MIDL）：此自定义轴为设计师提供了更多设计多功能性，并允许他们更改字体内的特定中间层效果，从而添加原始风格方面。
对比度（继续）：此自定义轴有助于控制字母形式中粗笔画和细笔画之间的对比度。设计师可以动态地改变这一特性，以实现各种程度的印刷表现力，从柔和的对比到更明显的变化。

除了注册的轴之外，构建新轴的选项还允许字体设计者实现对字体外观和特征的高度定制和复杂控制。例如，MIDL 和 CONT 等自定义轴使设计人员能够定制字体的特殊品质，从而实现灵活且富有表现力的排版。这些自定义与可变字体注册相结合，提供了多种方法来创建不同的印刷效果。例如，中间层效果（MIDL）轴允许设计师改变字体内独特的中间层，添加独特的视觉品质，从而增强艺术自由度。另一方面，对比度（CONT）轴控制粗笔画和细笔画之间的变化，允许动态调整范围从微妙到明显的对比度。通过与“粗细”和“中间层效果”等轴交互，设计人员可以创建具有不同粗细和独特样式的文本，从而实现对字体外观的精确控制。同样，结合粗细和对比度的变化可以创建具有不同程度的粗体和笔划对比度的文本，从而平衡视觉冲击力和可读性。这些示例展示了注册轴和自定义轴提供的无与伦比的自由度，使设计人员能够根据自己特定的审美偏好和设计目标调整字体。

在 CSS 中实现可变字体

现在您已经对可更改字体的可能性着迷了，让我们研究一下如何在基于 CSS 的 Web 项目中应用它们。 CSS 提供了正确使用这些自适应字体功能的方法。首先使用 @font-face 定义字体，它允许您提供不同的字体文件及其特征。设置字体后，您可以使用不同的 CSS 属性动态更改字体的轴，从而最大化不同字体提供的可能性。

获取字体

首先，我们必须下载项目所需的可变字体。
互联网上的一些网站允许我们访问不同的字体文件。一些最常用的字体网站如下：

类型网络
字体松鼠
Adobe 字体
字体弹簧
谷歌字体
Vfonts.com

在此示例中，我们将前往 Vfonts.com 下载 Kyiv Sans 可变字体。 ttf 或 woff2 文件格式工作正常，但我们将在本演示中使用 ttf。如果您需要将字体文件从 ttf 转换为 woff2，请前往 everythingfonts.com：

Variable Fonts for Dynamic Typography

上面的屏幕截图显示了您到达 Vfont 时会看到的内容。

我们将项目分为以下几个步骤：

导航到 vfont：访问提供可变字体资源的网站。
选择 Kyiv* Type：选择 Kyiv* Type 字体，这会将您重定向到托管该字体的 Behance.net。
访问下载链接：在 Behance 页面上，一直向下滚动以找到下载字体的链接。
从 Google 云端硬盘下载：单击下载链接，您将进入 Google 云端硬盘文件夹。从那里下载字体文件。
解压缩文件：下载后，解压缩文件以访问其内容。
查看字体选项：解压后的文件夹包含多个选项可供选择。
- 图标
- 没有变量
- 变量
选择可变字体：关注包含可变字体的文件。
- 衬线
- 倾斜
- Sans
使用 Sans 字体：设置和使用 Sans 版本的字体。请注意，Sans 字体粗细文件为 360 KB，相当于使用八个非可变字体文件。
评估权衡：考虑使用可变字体对于您的项目是否值得。如果您只需要常规、粗体和斜体样式，则可能不需要使用可变字体。但是，如果您需要对变体进行高级控制，可变字体可能非常有用。

注意：以上这些文件都是TTF格式。

现在我们将前往 VSCode，我们将在其中使用普通的 vite 项目。
要开始处理该项目，您必须安装必要的包。您必须按照以下步骤操作：

打开一个新终端。
运行命令
```
npm create vite@latest
```
为您的项目命名。
为您的包裹命名。
选择一个 Vanilla 框架。
选择 JavaScript 变体。
运行 npm install 将帮助您协商进入项目并安装必要的模块。
设置依赖项后，使用以下命令启动应用程序：
```
npm run dev
```
访问 http://localhost:your-port-number 即可访问浏览器上正在运行的程序。

一旦我们完成了我们的项目，我们将拥有大量的模拟代码，我们可以修改它们来构建我们想要的应用程序。下载的可变字体应放入字体文件夹中，该文件夹将放入公共文件夹中。我们将替换 style.css、main.js 和 index.html 中所有不必要的模拟代码。

index.html 代码应如下所示：


  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Variable font</title>
  
  
    <div>



<p>From the code above, we're setting up a simple HTML wrapper for our project where the JavaScript will render content in the </p>
<div>

<p>The main.js code should look something like this:<br>
</p>

<pre class="brush:php;toolbar:false">import "./style.css";

document.querySelector("#app").innerHTML = `
  <div>
    <h1>



</h1>
<p>This is where we use document.querySelector() to add content to the element we insert our content into using the id: #</p>

<p>And the style.css code should look something like this:<br>
</p>

<pre class="brush:php;toolbar:false">body {
  font-family: 'Kyiv Sans';
}

@font-face {
  font-family: 'Kyiv Sans';
  src: url('/font/KyivTypeSans-VarGX.ttf');
  font-weight: 0 1000;
  font-display: swap;
}

h1 {
  color: #bd0c0c;
  height: 100vh;
  display: grid;
  place-content: center;
  margin: 0;
  text-align: center;
}

.variable-font {
  font-family: 'Kyiv Sans';
  font-size: 5rem;
  line-height: 1.1;
  font-weight: 100;
  font-variation-settings:
   'wght' 100, 'CONT' 250, 'MIDL' 0;
  transition: font-variation-settings 500ms;  
}

.variable-font:hover {
  font-weight: 1000;
  font-variation-settings:
    'wght' 1000, 'CONT' 250, 'MIDL' -1000;
}

现在，让我们解释一下上面代码中发生的事情：

设置正文的默认字体：

npm create vite@latest

用途：这将整个文档的默认字体设置为“Kyiv Sans”。
影响：正文中的所有文本元素都将继承此字体，除非被更具体的样式覆盖。

定义自定义字体：

npm run dev

用途：@font-face 规则允许您定义自定义字体。
字体名称：字体名为“Kyiv Sans”。
来源：字体文件位于/font/KyivTypeSans-VarGX.ttf。
字体粗细范围：此字体支持0到1000的粗细范围，使其成为可变字体。
字体显示：交换确保使用后备字体立即显示文本，直到加载自定义字体。

设计

样式元素：


  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Variable font</title>
  
  
    <div>



<p>From the code above, we're setting up a simple HTML wrapper for our project where the JavaScript will render content in the </p>
<div>

<p>The main.js code should look something like this:<br>
</p>

<pre class="brush:php;toolbar:false">import "./style.css";

document.querySelector("#app").innerHTML = `
  <div>
    <h1>



</h1>
<p>This is where we use document.querySelector() to add content to the element we insert our content into using the id: #</p>

<p>And the style.css code should look something like this:<br>
</p>

<pre class="brush:php;toolbar:false">body {
  font-family: 'Kyiv Sans';
}

@font-face {
  font-family: 'Kyiv Sans';
  src: url('/font/KyivTypeSans-VarGX.ttf');
  font-weight: 0 1000;
  font-display: swap;
}

h1 {
  color: #bd0c0c;
  height: 100vh;
  display: grid;
  place-content: center;
  margin: 0;
  text-align: center;
}

.variable-font {
  font-family: 'Kyiv Sans';
  font-size: 5rem;
  line-height: 1.1;
  font-weight: 100;
  font-variation-settings:
   'wght' 100, 'CONT' 250, 'MIDL' 0;
  transition: font-variation-settings 500ms;  
}

.variable-font:hover {
  font-weight: 1000;
  font-variation-settings:
    'wght' 1000, 'CONT' 250, 'MIDL' -1000;
}

颜色：将文本颜色设置为#bd0c0c，红色阴影。
高度：高度设置为100vh，使得
元素跨越视口的整个高度。
显示：网格用于布局，允许使用网格属性。
居中内容：位置内容：中心使内容垂直和水平居中。
边距：边距设置为 0 以删除
周围的任何默认间距。
文本对齐方式：文本水平居中。

设置 .variable-font 类的样式：

body {
  font-family: 'Kyiv Sans';
}

字体系列：使用“Kyiv Sans”作为文本。
字体大小：将字体大小设置为5rem（相对于根元素的字体大小）。
行高：1.1 确保行之间有轻微的间距。
字体粗细：初始设置为100。
字体变体设置：利用可变字体的自定义变体设置：
- 'wght' 控制权重（初始为 100）。
- 'CONT' 和 'MIDL' 是该字体的自定义轴，最初分别设置为 250 和 0。
过渡：在 500 毫秒内平滑过渡字体变化设置。

为.variable-font添加悬停效果：

npm create vite@latest

悬停时的字体粗细：当元素悬停在上方时更改为 1000。
悬停时的字体变化设置：将变化设置更新为：
- “重量”为 1000
- “继续”仍为 250
- “MIDL”更改为-1000
效果：当用户将鼠标悬停在文本上时创建动态、交互式的视觉效果，突出可变字体的灵活性。

最后我们的结果看起来有点像这样；
Variable Fonts for Dynamic Typography

使用可变字体创建响应式版式

通过允许设计师实现跨多种设备和屏幕尺寸的完美适应，具有各种字体的响应式排版改变了在线设计。可变字体具有无与伦比的多功能性，它允许在单个字体文件中不断更改字体属性，包括粗细、宽度和对比度。设计人员可以使用 CSS 和媒体查询动态更改这些字体属性，以提高可读性和美观性，确保文本在从桌面显示器到手机的任何设备上呈现最佳效果。由于单个可变字体可以替代多个固定字体文件，因此减少了大量字体加载的需要并提高了网站性能。这种灵活性不仅改善了用户体验，还简化了设计流程。如果没有响应式排版——它变得更有吸引力、更高效，并且可以使用不同的字体进行访问——现代网页设计就不可能存在。

媒体查询：屏幕尺寸适应大师

媒体查询是响应式网页设计的基石，是屏幕尺寸适应的大师。基于用户设备的功能（例如屏幕宽度、高度、分辨率和方向），它们允许设计人员应用特定的 CSS 样式。媒体搜索可帮助设计人员确保网站在各种设备（从笔记本电脑和台式显示器到智能手机和平板电脑）上都能以最佳方式呈现和运行。

媒体查询的强大之处在于它们能够生成适合各种屏幕尺寸的灵活且流畅的布局。媒体查询允许设计人员更改字体大小、更改网格布局，甚至根据视口测量隐藏或显示某些项目。这确保了无论使用什么设备，材料都能保持其美观性和可访问性。

媒体查询定义断点——布局调整以适应不同屏幕尺寸的特定位置。针对不同的设备，这些断点是使用 min-width、max-width 和其他 CSS 特性设置的。例如，媒体查询可能会为 768 像素或更小的屏幕宽度指定使用适合移动设备的布局，并为较大的显示器指定不同的布局。

将媒体搜索纳入网页设计可提高可访问性和用户体验。在所有平台上，媒体查询通过保证文本可读、导航直观且材料组织良好，有助于开发包容性数字体验。任何希望创建响应式、适应性强和用户友好的网站的网页设计师都必须首先学习在不同设备使用时代的媒体查询。

这是一个例子：

npm create vite@latest

在此示例中，我们使用媒体查询根据屏幕尺寸调整字体变化设置和字体粗细。对于最大宽度为 600px 的设备，字体大小会减小为 3rem。针对 :hover 效果相应调整粗细和其他变化，对于宽度在 601px 到 1200px 之间的设备，字体大小设置为 4rem，并调整粗细和变化。对于宽度为1201px及以上的设备，字体大小为5rem，保持原来的设置。
这些媒体查询可确保字体适应不同的屏幕尺寸，从而提高各种设备上的可读性和用户体验。

Variable Fonts for Dynamic Typography

上图为小屏幕的显示

Variable Fonts for Dynamic Typography

上图显示了中屏幕的显示

Variable Fonts for Dynamic Typography

上图为大屏幕显示

视口单位：使布局流畅

视口单元是现代网页设计中的强大工具，可以创建流畅且响应式的布局，无缝适应不同的屏幕尺寸。视口单位包括vw（视口宽度）和vh（视口高度），它们是相对于浏览器视口的尺寸而言的。 1 vw 等于视口宽度的 1%，1 vh 等于视口高度的 1%。这些单元可帮助设计人员确保元素根据用户屏幕的大小进行缩放，从而产生更具动态性和适应性的设计。例如，以视口单位设置字体大小、填充或边距，可以让文本和对象自动调整大小，从而在多个设备上保持一致的外观。无论网站显示在大型桌面显示器还是小型移动屏幕上，这种适应性都可以确保内容保持可读性和美观性，从而增强用户体验。视口单元让设计人员能够创建适应性强的布局，可以轻松移动以适应数字设备不断变化的地形。

下面是如何使用 vw 根据视口宽度调整字体大小的示例：

npm create vite@latest

在此示例中，在上面的代码中，.variable-font 的 font-size 属性是使用视口宽度 vw 单位设置的，使文本大小响应于视口的宽度。

我们可以将媒体搜索和具有不同字体特征的视口单元结合起来，创建真正响应式的排版，优雅地适合每种设备或屏幕尺寸。这使我们能够提供出色的用户体验，而与某人为我们网站选择的访问方法无关。

具有可变字体的高级印刷效果

可变字体开辟了复杂印刷效果的新领域，使设计人员能够创建高度定制和动态的文本样式。设计师现在可以通过不断调整粗细、宽度和自定义轴等特性来创建无缝过渡和不寻常的视觉效果，而这些效果以前使用固定字体很难实现。可以通过调整字体动态更改粗细、对比度和中线，从而提供对文本外观的复杂控制。这种适应性在响应式设计中非常强，字体可以轻松调整以适应各种屏幕尺寸和方向。此外，交互式动画允许文本响应用户操作，例如悬停或单击，产生有趣和身临其境的体验。视口单元与不同的字体特征相结合，确保排版保持流畅和可扩展，从而提高各种设备上的可读性和外观。利用这些复杂的功能，设计师可以通过扩展传统排版的可能性来创建视觉上引人注目的数字材料。让我们探索一些扩展在线排版界限的有趣方法：

流体版式

流体排版是一种设计方法，文本可以根据视口的大小动态缩放，从而在许多设备上提供流畅且响应灵敏的阅读体验。视口单元、媒体搜索和可更改的字体让流畅的排版确保文本保持清晰和视觉平衡，与屏幕尺寸无关。此方法消除了对固定字体大小的需求，并允许无缝更改，从而以适合不同显示条件的方式提高可读性和外观。

这是一个例子：

npm run dev

工作原理：

calc() 功能： 该函数通过组合相对单位 vw 和固定值 rem 来生成流体缩放效果。 font-size，例如，calc(2rem 2vw) 对视口宽度做出反应并确保基本尺寸。

各种元素的流体排版： 许多元素（例如 h1、h2 和 p）可以使用流体排版保证文本在不同设备上适当缩放。 calc() 函数提供一个基本尺寸，其缩放因子随视口宽度而变化。

可变字体：通过将流体排版与可变字体相结合，您可以根据视口大小实现文本属性的动态变化。
此方法可保证文本在各种设备和屏幕尺寸上保持美观和可读。

通过动画文本，动态排版赋予文本生命，并产生有趣和动态的视觉效果，吸引观众。此方法通过使用 JavaScript 和 CSS 动画更改文本属性来添加运动和交互。在使用可变字体的示例中，使用 :hover 效果对字体粗细进行动画处理，我们演示了动态排版，即从较浅的粗细无缝过渡到较粗的粗细。这不仅强调了内容，还展示了如何通过流畅、实时的变化，改变字体可以改善用户交互。动态排版使设计师能够提高文本的视觉吸引力和可用性，增强其在交互式和有趣的数字环境中的基本作用。

示例：悬停时的重量动画

npm create vite@latest

在这里，我们使用平滑过渡将 .variable-font 元素的粗细设置为 :hover 时从常规 100 到粗体 1000 的动画效果，从而创建微妙但有影响力的效果。

这些只是不同字体提供的一小部分富有想象力的机会。从动态动画到流畅布局，有足够的机会创造独特且有趣的字体。只要有一点创造力和对 CSS 的理解，我们就可以挑战网页设计规范并产生相当出色的用户体验。

结论

可变字体——Kyiv Sans 的最佳演示是通过将多种字体样式分组到一个文件中来转换网络上的版式。通过减少HTTP查询的数量，本发明简化了流程、增加了设计灵活性并提高了性能。设计师可以充分利用 CSS 中的可变字体来制作响应式动态字体，完美适应各种屏幕尺寸和用户交互。
设计人员可以使用粗细、中间层效果和对比度等属性以及媒体查询和视口单元等响应方法来创建视觉上吸引人且易于访问的排版体验。可变字体是当代网页设计的必要工具，因为它们的流动性为艺术表达提供了新的方向。