杭州网页设计：新字体技术如何改进网络

单词是网络内容的主要组成部分。然而，直到不久之前，我们所拥有的只是一些系统字体。除此之外，这些系统字体不一定与操作系统（OS）一致。幸运的是，Windows，macOS和Linux是按字体方式组成的，从那时起，所有现代字体都在这些操作系统中兼容。毫无疑问，网络排版的未来前景看好。

杭州网页设计因为它为用户提供了更多控制，可以根据上下文和设备修改字体，这个新版本为Web排版开辟了新的机会，并将缩小Web和打印之间的质量差距。

可变字体和参数字体是无可否认地彻底改变响应式Web类型的工具。它们将允许图形和网页设计师自己探索形状和大小，并根据需要定制字体。让我们了解这些新工具的来龙去脉以及如何控制我们的排版。

Web不打印像素

当一种范式转变出现时，例如排版的新媒体，它遇到的第一件事就是抵抗。我们觉得我们需要在现状挣脱之前将现状推向极限，为新的思维方式腾出空间。排版也不例外，很长一段时间以来，设计师都将屏幕视为由像素而不是树木制成的纸张。计算机上使用的字体大部分只是物理字体的静态实施例。当然，屏幕媒体带来了许多必要和额外的元素，如提示，但物理字体的遗留仍然在类型设计中产生强烈共鸣。

尽管如此，感觉数字排版在一系列问题上落后于物理排版，而不是设计的多样性或质量，而是屏幕媒体的巨大碎片。对于印刷设计，可以根据字母的大小和形状优化一组物理字体，以提高可读性。一旦生成了字体，每次结果都是一样的; 你得到了你所付出的代价。

在屏幕上，它更复杂。一旦你迷失在DPI值和不同渲染器的森林中，用户得到的东西就会全部消失。由于类型设计师没有动力制作不同的光学尺寸，因此许多数字字体仅包含其中的几种，这妨碍了网络排版的可读性。

当图形设计师在海报上工作时，他们已经知道它将如何显示或分发。他们知道海报的大小，字体的大小，它们将使用的颜色等等。所有这些都是已知的变量，有助于他们的设计选择。此外，设计师知道，一旦完成并打印，设计将不会改变，并且所有观众将体验相同的海报。

让我们来看看在网页排版中难以解决的另一个方面：破布。在打印中很容易处理凹陷：您可以稍微调整跟踪，插入换行符或连字符以清理碎布。不幸的是，在网页排版中实现这种程度的细节更加复杂。宽度发生变化，用户可以更改字体大小。网页的活力使得很难做出正确的尺寸，字母间距等选择。

幸运的是，可以收集有关浏览您的网站的上下文的一些数据。感谢CSS和JavaScript，您可以调整网页的排版。然而，尽管逐渐改变字体的大小很容易，但仍然不可能逐渐地从一个变体改变到另一个变体。剩下的唯一选择是设置断点，一侧有一个变体，另一侧有另一个变量。

加载更多变种需要付出代价。添加150 KB的字体似乎不是一个糟糕的权衡，但每次向网站添加新字体时它都会复合。由于加载时间是页面跳出率的主要因素，因此您不希望用户因为您的网页加载太多而保释。

响应式Web类型技术

在描述了网络排版的挑战之后，让我们深入了解问题的核心。我们将深入探讨帮助我们为网络制作出色排版的两项主要技术：可变字体和参数字体。

可变字体

通过ATypI 2016 可变字体会议，可变字体在网络上取得了很大的进步。他们受到网络浏览领域的大腕推动（谷歌，Adobe，苹果和微软），他们将继续留在这里。

如果你想看看人们对变量字体的处理和说法，我们已经从网络上收集了资源。您必须使用支持可变字体的浏览器，无论是版本59.0的Chrome还是版本53.0的Firefox：

• Axis-Praxis（可变字体操场）

• “ 可变字体的排版潜力 ”，字母表

• “ Decovar，由David Berlow创作的Multistyle 装饰变量字体，”TypeNetwork

• Zeitung（可变字体），Underware

毫无疑问，关于可变字体的最佳新闻来源是由Nick Sherman领导的Twitter提要，他收集了关于可变字体的网上所有内容（我们应该感激不尽）。

由于采用了新的可变字体格式，因此可以将排版精确地适应其上下文。可变字体基于一个非常简单的想法：它们包含单个字体的几种变体，或者更确切地说，包含主变体和来自其他字体的增量，用户可以仅使用CSS自由选择这些不同版本的插值。例如，字体可以包含灯光变体和粗体变体，您可以使用CSS在这些灯光和粗体之间选择权重，如下所示：

 h2 {
    font-variation-settings: "wght" 200;}

可变字体很挑剔。为了使它们起作用，字体基础变体的所有主人必须具有完全相同的点数。只有当您开始的形状和最终形状相似时，两个形状之间的变形才会平滑且独特。然而，一些类型的创建者习惯于为可变字体设计大师。类似的概念用于Adobe的“多主”格式，类型设计者使用插值来使用Superpolator等工具创建扩展族。然而，font-variation-settings在Web浏览器中仍然不常见，截至撰写本文时，只有Firefox实现了该功能。但其他人应该很快效仿。

在变量字体成为响应式网页排版的一个组成部分之前，仍然存在很多障碍。制作它们是一项长期的努力，类型设计师现在必须考虑从开始的变化，以创建充分利用这些新功能的字体。即使将旧字体转换为可变字体也是可能的，旧方法不一定适合我们讨论过的新的和更相关的用法：

• 为具有不同DPI的屏幕现场生成等级。

• 根据用户想要填充线条的方式更改字体的宽度，

• 根据字体大小修改光学尺寸。

不幸的是，可变字体并不能解决响应式网页排版的所有问题。例如，我们如何减少媒体查询的数量？我们如何处理异常值？我们如何使字体成为网页的一部分？

参数字体旨在解决这些问题。它们与概念和生产中的可变字体不同。他们将定制逻辑放在字体的核心，而不是让软件进行转换。所有印刷规则本身都是字体的一部分，但字体仍然可以在用户一侧轻松定制。

参数字体

参数字体是一个古老的想法，似乎经常被不同背景的人重新审视。它寻求解决变量字体解决的相同问题，但它来自更自动化的思维方式。因此，它通常是由对类型设计感兴趣的计算机科学家处理的主题。

与可变字体一样，我们收集了来自网络的链接，这些链接处理参数字体及其历史记录：

• “ Metafont ”，维基百科
  所有现代参数字体框架的父亲

• Metaflop
  A Metafont图形界面

• Metapolator
  基于Metaflop的参数化字体创建工具

• “ Parametric TrueType字体 ”，TrueType排版
  有关现已停产的FontChameleon的信息，这是一种字体软件，可让您从宽图书馆合并字体

• Elementar，Typotheque 
  位图参数字体

自Donald Knuth开创参数字体概念以来，已有近40年的历史。通过创建Metafont和Tex，Knuth开辟了一个排版的新时代，其中使用一系列步骤和方程来创建字体来描述每个字符。

这是可变字体和参数字体之间的巨大差异。可变字体是内插的，这意味着它们被限制在设计空间中。设计师无法逃离这个空间; 此外，向其添加尺寸需要类型设计者创建新的母版（即全新的字体）。参数字体是外推的，这意味着它们来自单一定义。他们居住的空间不受限制，因为他们的行为就像一个数学对象。

以圆圈的简单示例为例。在可变字体世界中，类型设计器会生成两个圆圈并告诉您“选择这些圆圈中的任何一个。”在参数化字体世界中，类型设计器会告诉您：“给字体一个半径，它将产生一个那个半径的圆圈。“

使用参数字体可以轻松地为设计空间添加新尺寸。对于可变字体，这意味着要创建一个新的主人。对于参数字体，您只需将新维度烘焙到现有方程式中。

使用参数字体添加约束或改变某些点的变化率也很容易。同样，您可以直接在字体中添加逻辑。

如何开始使用参数字体？

参数字体非常易于使用，结果看起来很华丽。正如我们在示例中看到的，参数字体可以减轻不同颜色的文本之间的光学差异。您还可以创建响应其上下文或您可以想象的任何界面的文本。

为了让您的生活更轻松，我们创建了Prototypo，这是一个用于调整和调整参数字体的免费Web应用程序。您需要订阅才能充分利用参数字体。但在免费版本中，您将能够使用包含小写和大写字形的子集化字体（无变音符号或数字）。付费订阅可解锁完整字体。

以下是如何开始尝试参数化字体：

• 使用我们的网络预览扩展程序直接在您的网站上测试您的参数字体。

• 使用我们的JavaScript库在您的网站上嵌入参数字体。

PROTOTYPO CHROME扩展

扩展可用于尝试不同显示尺寸和布局的参数。该扩展程序允许您替换网站上的字体。您在Prototypo中所做的所有修改都会实时应用到您的网站。这是在最终环境中为您的字体尝试不同光学权重和宽度的完美工具。

PROTOTYPO参数化字体库

另一种选择是直接使用Prototypo参数化技术。我们将解释如何将Prototypo库添加到您的网站。您将能够在您的网站上创建参数化字体，并使其按照您的用户需求进行交互。您可以在我们的实验室中查看参数化技术的示例。例如，您可以使用Kinect生成字体，或根据当前时间戳变形和切换字母。我们将讨论它的工作原理以及如何在项目中使用它，包括如何：

• 建立项目，

• 动态创建一个字体，

• 在CSS中使用创建的字体，

• 用JavaScript修改字体。

设置项目

这是您必须添加到HTML以导入Prototypo库的标记。

<script type="application/javascript" src="https://library.prototypo.io/ptypo.js"></script>

您也可以异步导入此脚本，但是您必须等待其load事件才能使用该库：

<script async type="application/javascript" src="https://library.prototypo.io/ptypo.js" id="script"></script><script type="application/javascript">
    document.getElementById('script').addEventListener('load', function() {
        // You’ll have access to the Ptypo global variable here
    });</script>

你问，这个图书馆能为你做什么？好吧，它将创建一个Ptypo全局变量，我们将用它来创建参数字体。

让我们看一个例子来更好地理解我们如何使用库。

制作灯光字体模式和暗字体模式

对于第一个例子，我们将尝试创建一种重量看起来相同的字体，无论是在光线下写入，还是在黑暗中写入光线。当在黑暗中书写光线时，文字往往看起来更大胆，因为浅色往往会在深色上流血，使得较浅的字体看起来更重。

我们将制作一个简单的HTML文档，可以从浅模式切换到暗模式，我们将相应地更改字体的参数。您还可以使用多种颜色方案，并为每种颜色方案生成看起来相同的参数。

让我们从创建字体工厂开始。

const ptypoFactory = new Ptypo.default();

在这里，如果您订阅了Prototypo应用程序，则可以使用您的令牌。（您可以在我们的文档中找到有关它的更多信息。）

一旦我们有了字体工厂，就该开始创建字体了。在这个例子中的动态部分，我们将创建两个字体-命名titleFont，并paragraphFont为h1各自的标题和段落。

ptypoFactory.createFont(
 'titleFont',
 Ptypo.templateNames.ELZEVIR).then(function(font) {
  //Setting up the right parameters
  font.changeParam('thickness', 110);});ptypoFactory.createFont(
 'paragraphFont',
 Ptypo.templateNames.GROTESK).then(function(font) {
  font.changeParams({thickness: 70, spacing: 0.5});});

标题字体使用Elzevir模板，这是一个serif模板，段落字体使用Grotesk模板，这是一个sans-serif。我们可以随意设置参数（如果需要，可以更改值）。

如您所见，我们可以通过两种方式修改参数：

font.changeParam('nameOfParameter', parameterValue)font.changeParams({
 parameter1: parameter1Value,
 parameter2: parameter2Value,
 parameter3: parameter3Value
 …});

您可以在我们的API文档中了解有关不同参数的更多信息。

现在我们需要编写与它一起使用的HTML以及将正确的字体分配给正确元素的CSS。

<div class="container">
 <h1>
  With Param
 </h1>
 <p>
  Lorem ipsum dolor sit amet..
 </p></div>

h1 {
 font-size: 100px;
 font-family: 'titleFont';
 font-weight: normal;}p {
 font-size: 18px;
 line-height: 24px;
 font-family: 'paragraphFont';}

在这里，我们创建了一个标题和一段文本，并将正确的字体附加到它们：titleFont标题和paragraphFont段落。

我们现在需要创建一个按钮以在明暗模式之间切换，并创建将修改字体的功能。

<a href=”#” id="dark-button">
 Dark mode</a>

有很多方法可以修改我们的字体。我们要做的是创建一个数组，一旦创建了字体，我们将填充包含我们的函数的对象文字。

const fontToggles = [];ptypoFactory.createFont(
 'titleFont',
 Ptypo.templateNames.ELZEVIR).then(function(font) {
  //Setting up the right parameters
  font.changeParam('thickness', 110);
  //Storing the function that will be used to change from light to dark
  //and vice versa
  fontToggles.push({
   lightMode: function() {
    font.changeParam('thickness', 110);
   },
   darkMode: function() {
    font.changeParam('thickness', 107);
   },
  });});ptypoFactory.createFont(
 'paragraphFont',
 Ptypo.templateNames.GROTESK).then(function(font) {
  font.changeParams({thickness: 70, spacing: 0.5});
  fontToggles.push({
   lightMode: function() {
    font.changeParam('thickness', 70);
   },
   darkMode: function() {
    font.changeParam('thickness', 50);
   },
  });});

在这一部分中，我们首先使用该ptypoFactory.createFont方法创建一个字体。

Ptypo.templateNames.ELZEVIR).then(function(font) {
    ...});

创建字体后，我们为厚度输入默认参数。我们决定110为标题字体设置一个厚度，70并0.5为段落字体设置一个厚度和间距。

font.changeParams({thickness: 70, spacing: 0.5});

对于每种字体，我们将向fontToggles数组添加一个对象。该对象将包含a lightMode和darkMode属性。当页面分别使用我们的按钮进入亮模式和暗模式时，将执行这两个功能。

fontToggles.push({
 lightMode: function() {
  font.changeParam('thickness', 70);
 },
 darkMode: function() {
  font.changeParam('thickness', 50);
 },});

现在我们可以在按钮的click事件上添加我们的侦听器，并使用数组中包含的函数根据我们所处的模式修改字体。

let button = document.getElementById('dark-button');button.addEventListener('click', function(e) {
 document.body.classList.toggle('dark');
 fontToggles.forEach(function(toggle) {
  toggle[document.body.classList.contains('dark')
      ? 'darkMode'
      : 'lightMode']();
 });
 e.preventDefault();});

感谢这个代码，一旦我们点击我们的暗模式按钮，它就会将dark类添加到body。它将遍历我们的字体，修改函数并执行darkMode一个如果有一个dark类，body并执行lightMode如果没有dark类body。

在我们的示例中，我们已经包含了一种在暗模式下不会改变的字体，以显示常规字体和稍微修改过的字体之间的区别。

使用数据自定义字体

在这个例子中，我们将创建几种字体，一种用于我们想要显示的每个城市的天气，使用给定城市的温度和风速进行自定义。字体的厚度将与温度相关联，倾斜度将与风速相关联。

首先，我们将创建一个我们想要显示的城市列表。

const cities = [
 'Lyon',
 'Padova',
 'Rennes',
 'Tokyo',
 'Johannesburg',
 'Moscow',
 'Beijing',
 'San Francisco',
 'Marrakech',
 'Trondheim',];

我们选择了来自世界各地的城市，拥有一系列温度和风速。

function yahooApiQuery(city, callback) {
 if (!city || !callback) {
  throw new Error('$.YQL(): Parameters may not be undefined');
 }
 const encodedQuery = encodeURIComponent(
  `select * from weather.forecast where woeid in (select woeid from geo.places(1) where text='${city}')`.toLowerCase()
 );
 const url = `https://query.yahooapis.com/v1/public/yql?q=${encodedQuery}&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=?`;
 $.getJSON(url, callback);};

此函数请求Yahoo weather API（随附文档）。我们将使用jQuery的getJson函数从API中获取JSON。

function getValueAndChangeFont(city, font) {
 yahooApiQuery(
  city,
  function(data) {
   font.changeParams({
    thickness: parseInt(data.query.results.channel.item.condition.temp) * 2,
    slant: parseInt(data.query.results.channel.wind.speed),
   });
  }
 );}

我们创建了一个带有城市名称和字体的函数。然后，我们已经请求了这个城市的天气，并根据温度和风速改变了字体的参数。

font.changeParams({
 thickness: parseInt(data.query.results.channel.item.condition.temp) * 2,
 slant: parseInt(data.query.results.channel.wind.speed),});

我们将温度乘以2是因为华氏温度大多在0到100度之间，我们希望厚度在0到200之间，因此对比度更强。我们已经保持风的速度不变，因为它可能取0到40的值，这对于倾斜是一个很大的角度。

const ptypoFactory = new Ptypo.default();cities.forEach(function(city) {
 $('#city-names').append(
  `${city} `
 );
 ptypoFactory.createFont(
  `${city}WeatherFont`,
  Ptypo.templateNames.GROTESK).then(
   function(font) {
    getValueAndChangeFont(city, font);
   }
  );});

对于每个城市，我们创建一个span使用正确字体系列样式的元素。然后我们使用Prototypo的库创建这个字体。我们经历了第一个例子中解释的相同过程。我们来创建工厂：

const ptypoFactory = new Ptypo.default();

然后，对于每个城市，我们使用正确的名称创建城市的字体${city}WeatherFont，使用我们的getValueAndChangeFont函数来自定义字体。

这个简单的例子展示了Prototypo如何能够非常有助于设计一种新的数据可视化：创建能够表达比文本更多的字体，直接链接到数据。随意使用您自己的城市测试此Codepen，尝试其他参数（x高度，宽度等）并向我们展示您已实现的目标！

以上是我们的例子。如果您想查看我们使用库创建的更多实验，请访问我们的实验室。

结论

杭州网页设计参数化字体技术将帮助我们改善用户体验，使我们能够优化字体在各种设备上的显示方式。它还使我们能够使用上下文，外部变量和物理传感器来更有创意地修改输入参数。您只需找到想法来根据您想要提供的体验定制字体：

• 创建组合文本和内容的数据可视化。。想象一下，您的客户有一个关于体育的大型网站。您将能够制作一种设计，其中用于玩家姓名的字体的形状和比例可以与他们得分的次数，他们玩过的游戏数量等相关联。

• 使用自适应字体甚至自适应字体改善用户的浏览体验。因为我们已经可以设置文本大小的首选项，所以我们可以想象用户拥有自己的个人资料以适应他们的阅读习惯的未来，特别是那些有视力障碍的人。

• 设计店面，回应路人。。设计剧院的戏剧，其演员的声音直接形成。设计能够根据阅读器距离呈现字母的屏幕。参数字体用于与人交互。

参数化字体技术既复杂又强大，就像每个设计工具一样，它在没有约束或透视的情况下使用时会出错。但是一旦你掌握了它背后的逻辑，你将永远不会回到简单的断点设计。

现在的问题是，如果你可以将字体变形为你的每一个心血来潮，你会怎么做？