创建网页字体组合

字体组合 是一种排版设计，其中文字和字符的样式和排列都非常具体。就像设计被锁定在适当位置一样。这个想法与我们熟知和喜爱的响应式网页略有不同，在响应式网页中，文本是流畅且可换行的等等。然而，组合的设计可能性非常吸引人。我认为我们可以在保持它们优点的同时，仍然保持网页的优点。

首先，这里有一些字体组合的示例

因此，让我们在同一页面上，看看一些示例设计。

你明白我的意思了吧？这些设计中的字体不能随意移动，否则设计就会被破坏。

你可以在很多地方找到例子。

一些不错的浏览地点可能是

• 像 这个 或 这个 这样的 Pinterest 收藏板
• Google 图片搜索
• Dribbble 搜索

命运弄人，我上个周末参加了一个活字印刷课程

我了解到“字体组合”来自“锁定字体”，就像实际的木制或金属字体块与其他木制和金属块一起排列，以创建您可以实际夹紧、上墨和压印到纸张上的设计。

将名称“组合”转移到现代设计似乎是 相当新的

Tiffany Wardle deSousa：我注意到，在过去的几年里，设计师们借鉴了活字印刷的精髓——字体、图像、家具，全部锁定在一个框架内——并将其应用于从海报到徽标的所有事物（无论它在风格上是否合理）。我们中的一些人一直将这种风格称为“字体组合”。

Shelley Gruendler 博士：我一直在注意到它，但从未真正清晰地表达过它，以至于想出一个名字。你的描述符“字体组合”非常完美。

网页上的典型标题不是组合

像这样

但我们经常这样设计。我们这样做是因为它在响应式网页上效果非常好。我们可以设计字体和我们的网站，以便无论最终出现在那里的文本有多长、在哪里换行等，它看起来都很好。它不必那么简单，但如果字体设计用于适应换行并容忍渲染方面的相当大的差异，它就不是真正的组合。

标准标题标记

<h2>
  Nothin' fancy here.
</h2>

从设计人员/开发人员的角度来看，这很容易且方便使用。它是基本的 HTML 和 CSS。这样设置的字体是可访问的、对 SEO 友好的、可选择的、页面内可搜索的、可复制粘贴的，以及所有这些好东西。

让我们构建一个网页字体组合。首先，我们将使用网页字体。

也就是说，我们可以通过 @font-face 在网页设计中使用的自定义字体。我们可以自己加载自定义字体，或者通过任何网页字体服务（最终它们都使用@font-face）。

下载以供本地使用

让我们使用 Google Fonts，因为它速度快、免费且易于使用。Roboto 很好。

让我们为我们的设计选择其中的几种粗细。这里适用的规则与在任何地方使用网页字体的规则相同：不要过度使用。最终，我们将把这些字体作为资源加载到网站本身，因此性能是一个问题。

将字体添加到集合后（有一个“添加到集合”按钮），您可以点击箭头打开本地下载区域。

在本地激活字体

无论您如何操作，都请这样做。我个人使用 FontExplorer X。

在本地安装字体的目的是为了能够在像 Adobe Illustrator 这样的软件中进行设计

所以发挥你的创意吧！

请记住，您可以在此处做任何您想做的事情。您摆脱了大多数网页字体的常规限制。想在一个大字母的升部之间设置一个非常小的字词吗？如果您尝试以灵活的方式使用绝对定位来实现这一点，那将非常危险，但在这里这是可以接受的。

这是我拙劣的设计

将所有文本保留为*文本*

Illustrator 能够将文本转换为矢量轮廓。不要这样做。将文本保留为可编辑文本。

另存为 SVG

SVG 是这里的重要成分。

SVG 使文本保持文本状态。SVG 有一个文字<text> 元素，它以可访问、可选择（以及所有其他）的方式呈现网页文本。并且它像 SVG 中的任何其他内容一样保持可缩放。

再次强调，请将文本保留在 SVG 中，不要将其转换为轮廓。

如果你在网页浏览器中打开这个文件，它看起来像是可以工作的……

但是请记住，在测试时要*禁用*你的本地字体

糟糕。

当我们在网页上使用它时，我们需要加载字体并更正字体系列

我将使用典型的 Google Fonts 导入

@import url(https://fonts.googleapis.com/css?family=Roboto:900,100);

它期望是这样的

font-family: 'Roboto', sans-serif;

但如果我们查看从 Illustrator 输出的 SVG，我们会得到

<text
   ...
   font-family="'Roboto-Black'"
   ...
>
  Meet
</text>

为了解决这个问题，我不得不进行查找和替换

“‘Roboto-Black'” → “Roboto” font-weight=”900″
“‘Roboto-Thin'” → “Roboto” font-weight=”100″

最终得到了正确工作的文本元素，例如

<text transform="matrix(0.91387 0.40601 -0.40601 0.91387 56.51732 198.18147)" opacity="0.8" fill="#930093" font-family="Roboto" font-weight="900"  font-size="123px">A</text>

成功了！

一个非常棒的文本组合

查看 Chris Coyier 在 CodePen 上的笔 文本组合示例 (@chriscoyier)。

我们以前走过这条路。

在去年的一个帖子中，我们从 Typekit 加载了字体并做了类似的事情，制作了一个类似横幅广告的演示

查看 Chris Coyier 在 CodePen 上的笔 带有 元素的 SVG (@chriscoyier)。

这并不排除响应式设计

仅仅因为一个组合是可缩放的，并不意味着其中的元素在某些情况下不能随意移动，如果这样做是有意义的。Joe Harrison 的 响应式 logo（一种排版组合）就是一个例子，说明隐藏/显示功能有多么有用

任何类型的移动、调整大小、重新设置样式都是可以的。它将在 CSS 中完成，要么嵌入在 SVG 文档本身中（如果你将 SVG 作为 <object> 使用），要么与你的所有其他样式化页面的 CSS 一起完成（如果你使用的是内联 SVG）。

@media (max-width: 800px) {
  text.letter-1 {
     /* do whatever */
  }
}

可访问性

我经常说这是“可访问的”，但当然我不是这方面的专家。可访问性 意味着很多东西。

事实上，我可以在包含此内容的页面上搜索“kids”，浏览器 可以找到它，这当然是一种可访问性的形式。但我无法搜索“alphabet”，因为每个字母都是一个不同的 <text> 元素，而不是 <tspan>s。我可能能够手动修复它，但这可能非常困难。Illustrator 并没有真正提供帮助。

我想源顺序也很重要，因为它是读取内容的顺序（如果我们谈论的是屏幕阅读器可访问性）和索引的顺序。我应该更加注意使其正确。幸运的是，Illustrator 可以帮助解决这个问题，因为图层顺序就是输出顺序。

以下是一些其他示例

我看到的一篇杂志文章标题的再创作

查看 Chris Coyier 在 CodePen 上的笔 杂志版面尝试 #2 (@chriscoyier)。

Brenna O’Briens 在 演讲中给出的示例（注意 <tspan>s）

查看 Brenna O’Brien 在 CodePen 上的笔 SVG 排版组合 (@brenna)。

另一种可能性

这与我们刚刚在 CSS-Tricks 上介绍的 “缩放比例内容” 密切相关。走这条路也是一种可能（固定高度/宽度，scale()）。

另一种可能性是使用视口单位设置字体，这些单位会随着浏览器窗口的大小而缩放，因此可能被用来以一种不会破坏缩放比例的方式来布局字体。也许吧。没有任何软件可以帮助你做到这一点，并且它可能充满了 魔法数字，但它具有可以使用语义 HTML 元素的优点。

Ana Tudor 以比例滑块的形式解决了这个问题，并提供了一个有用的 Sass 混合。

查看 Ana Tudor 在 CodePen 上的笔 覆盖视口的比例框（混合） (@thebabydino)。