修复花式字体挫折

这是一种悲伤而悲哀的声音：当平面设计师开始理解他们在网络上工作时不能简单地选择任何一种字体时，您会听到他们的how叫声。 是的，类型控制一直是Web设计的最大限制之一，特别是字体选择。

多年来，偶尔会有偶然的发现，但我们仍在等待这一伟大的飞跃。 涉及文本替换时，可能有四种思路：让我们快速回顾一下当前可用的选项，然后再看一下该镇上最新的球员cufón可以做什么。

本文最初发表在《设计观点》第58期中 。 立即订阅以将其放入您的收件箱！

经典图像替换

我将在这里使用经典图像替换 （CIR）来描述一系列相关技术。 这是用一种没有样式限制的方法替换标准HTML文本的真正尝试。

大多数技术都使用CSS背景图像来代替HTML文本，HTML文本是通过CSS技巧隐藏的，或者是在包含背景图像的span后面被遮盖的。

优点：

• 低保以实现，使用和查看

缺点：

• 大多数方法都存在某种可访问性问题
• 多行文字流通常是一个问题
• 为每个标题生成新图像是有问题的
• 与动态内容一起使用时，需要服务器生成的图像
• 有限的缓存和可重用性
• 不可扩展

几年前，戴夫·谢伊（Dave Shea）撰写了有关经典图像替换的不同风格的权威总结，如果您考虑使用CIR ，则应该阅读。 尽管仍然偶尔会看到它（CSS Zen Garden是一个突出的例子），CIR的缺点往往意味着它是2009年使用受限的一种技术。

sIFR（或可扩展Inman Flash替换）

早在2004年，迈克·戴维森（Mike Davidson），肖恩·英曼（Shaun Inman）和马克·乌本（Mark Wubben）提出了针对类型爱好者的第一个真正的突破- 可伸缩的Inman Flash Replacement。

该技术依赖于Macromedia（现在为Adobe）Flash的能力，可以将字体安全地嵌入Flash电影中。 然后，使用JavaScript将HTML文本替换为包含样式文本的SWF电影。 聪明的东西，真的。

五年过去了， sIFR在其第三代产品中已成为一项成熟而强大的技术，并且是定制文本时的默认技术。 sIFR的许多早期性能和可访问性问题已得到缓解，甚至消除了–文本是可选择和可链接的。

最大的问题仍然是对JavaScript和Flash的依赖。 尽管许多拥护者会认为没有Flash的用户比例微不足道，但iPhone当前缺乏任何 Flash支持，这使许多人对该技术提出了疑问。

对于某些开发人员来说，另一个缺点是需要Flash创作软件。 诸如sIFRVault这样的网站已经解决了这一问题，现在这些网站提供了多种预嵌入字体供下载。

优点：

• 字体选择几乎是无限的
• 安全的字体嵌入意味着更少的许可问题

缺点：

• 需要Flash创作软件嵌入原始字体文件
• hacky和高度复杂会导致潜在故障的多个方面，包括浏览器版本，JavaScript和Flash支持
• 较旧，过度工作或低规格系统上的潜在性能问题

简而言之，根据您听的对象的不同，sIFR介于实用的解决方案（对有缺陷的系统）和复杂的，肮脏的hack之间。

@font-face

很久以前，在一个遥远的星系中，他们拥有完善的字体支持，并且使用了@font-face 。

在那个光荣的世界中，鸟儿欢呼雀跃，阳光温暖地照耀着，设计师用一行代码将字体附加到其页面上，而不必担心会受到许可的影响。

不幸的是，我们已经不住在那里了 。

@font-face声明背后的理论是坚如磐石的，自1998年以来它已经以各种形式出现。只需使用@font-face CSS将字体附加到您的页面上，如下所示：

@font-face { 

  font-family: Echelon; 

  src: url('echelon.otf'); 

}

然后使用font-family声明对其进行调用：

h3 { 

  font-family: Echelon,sans-serif; 

}

那是容易的部分。 问题在于，使字体在服务器上可用的行为违反了大多数最终用户许可协议。

自IE4以来，Microsoft一直在推广并支持一种称为Embedded OpenType（EOT）的嵌入式字体格式。 通过一个名为WEFT的免费客户端应用程序，可以很容易地从TrueType字体生成EOT字体文件。

如果EOT在Internet Explorer之外有任何支持，它将是一个非常可行的解决方案。 不幸的是，没有。

优点：

• 优雅且易于理解和实施
• 优雅降级，因为旧版浏览器通常会忽略@ font-face声明

缺点：

• 未嵌入的字体存在严重的许可问题
• 当前仅在Safari 3中可用，但在不久的将来可能会在Opera和Firefox中使用
• 有人猜测@ font-face可能会使用户暴露于下载字体所附带的病毒

这就是矢量文本出现之前的状态。

矢量文本：typeface.js和cufón

最新的文本替换方法借鉴了sIFR的一些想法，但设法避免了对Flash的依赖。 取而代之的是， typeface.js和cufón都具有相同的基本思想：使用JavaScript将HTML文本替换为以矢量格式呈现文本的canvas元素。

每种方法都要求您使用其免费的在线工具将字体转换为矢量化的JavaScript文件。 幸运的是，这是一个相对轻松的过程。 这些矢量化的字体然后链接到您的页面，呈现到画布区域，并在有JavaScript时即时交换到您的页面中。

优点：

• 与sIFR相比，技术依赖性更低（无需Flash）
• 优雅降级

缺点：

• 依赖JavaScript
• 许多字体的许可问题不清楚

当然，sIFR的拥护者会认为，使用现代版本足以支持canvas元素的浏览器的人肯定也会处理Flash文件。

除了一个重要的用例，这在所有情况下都是正确的–目前没有iPhone或Android手机可以渲染Flash内容。 对于许多开发人员来说，这是sIFR的首选。 但是canvas元素已经在WebKit中提供了出色的支持，WebKit是为Safari提供动力的渲染引擎。

试穿cufón

好的，让我们看一个在设计中使用矢量文本的简单示例。 我将在这里使用cufón，因为它是一个较小的文件，但是大多数关键概念也适用于typeface.js 。

我将从一个粗糙的博客概念开始 ，它不会尝试自定义或替换标题。 难免有些用户将浏览没有JavaScript，所以你的页面仍然需要很好地SANS常规字体。

第1步：抓取cufón

下载cufón脚本的副本并将其附加到您的文档中。 此文件处理您类型的所有交换，缩放，定位和样式：

<script type="text/javascript" src="cufon-yui.js"></script>

步骤2：转换字型

与Typeface JS一样，cufón需要您将文件转换为它使用的向量，但这是一个免费且容易的过程。 只需上传您的字体-支持TrueType（TTF），OpenType（OTF），打印机字体二进制（PFB）和PostScript字体-它们的生成器将为您提供一个新的JavaScript文件。

显然，这是考虑许可限制的好时机。 尽管每个类型的代工厂都有自己的看法–通常每个服务器或站点都需要一个新的许可证–但是Adobe清楚地表明了自己的立场：

Adobe Systems生产的所有字体都可以嵌入到可移植文档格式（PDF）文件以及其他类型的文件中。

这使您拥有的所有Adobe字体（例如Albertus，Bodoni，Caslon等）成为试用此方法的明智选择。

选择并上传了合适的字体后，系统会显示一个JavaScript文件，其名称沿用“ your_font_400.font.js”。 该文件将需要在cufÃñn脚本之后附加到您的页面。 例如，我已经转换并附加了两种字体– Pointy和AquilineTwo ：

<script src="Pointy_400.font.js" type="text/javascript"></script>  

<script src="AquilineTwo_500.font.js" type="text/javascript"></script>

请注意，在生成器上， 必须先选中 两个复选框，然后才能继续进行操作：一个确认您选择的字体的EULA允许字体嵌入，另一个确认您已阅读并了解转换器的使用条款。 确保找到它们。

步骤3：指定要替换的标题

让我们清楚一点：所有文本替换方法（除了@font-face之外，可以说）都是设计为仅替换标题文本。 替换正文文本将很慢并且适得其反。 我们将坚持只替换标题。

要替换任何标题，您只需使用cufón的replace函数将元素定位为目标，然后使用fontFamily定义字体。 在下面的示例中，我将所有h1和h2替换为Pointy，将h3替换为AquilineTwo：

<script type="text/javascript">  

  Cufon.replace('h1', { fontFamily: 'Pointy' });  

  Cufon.replace('h2', { fontFamily: 'Pointy' });  

  Cufon.replace('h3', { fontFamily: 'AquilineTwo' });  

</script>

简单。

步骤4：IE修复

与Internet Explorer一样，我们需要添加额外的代码以使其在该浏览器中运行。 未经修改，IE用户将看到原始文本加载，然后在替换文本之前会看到可见的闪烁。 值得庆幸的是，修复起来很容易，即使有点难看。

在结束body标签之前，您需要添加以下脚本元素：

<script type="text/javascript"> Cufon.now();  

</script>

添加此行并为您的页面进行测试。

正如您将在演示页面中看到的那样，在大多数系统上，生成的渲染非常快速且干净。

Cufón对象从CSS位置开始，并自动继承任何font-size ， font-style ， font-weight ， line-height ， text-shadow和word-spacing值。 很酷的东西。

您还将看到每个单词都是一个单独的透明canvas ，可以显示背景，图像和其他文本，并且单词可以自由地从一行移到另一行。

有缺点吗？ 好吧，文本选择似乎是一个问题，尽管修复它似乎是开发人员的优先事项。 我还遇到了偶尔的溢出问题以及似乎不一致的问题。 可以在cufón项目站点上找到已知问题和受支持的浏览器的完整列表-如果您密切注意，您将是第一个知道这些问题何时得到解决的人。

但是，所有被考虑的因素（这是新的，原始的，还是有点实验性的），cufónn对于网络亲热者来说是一个令人兴奋且非常有希望的发展。

From: https://www.sitepoint.com/fixing-fancy-font-frustrations/