Typeface.js – sIFR 的替代方案

我上次的屏幕录像教程是关于 如何使用 sIFR3 的，这是一种久经考验的技术，用于在 Web 上使用非 Web 标准字体（就像我们在 @font-face 获得更广泛支持之前一直在做的那样）。我喜欢 sIFR，它已经存在很长时间了，并且确实证明了自己是一项良好的技术，但它并不是唯一的选择。

David Chester 给我写信，告诉我他正在进行一个名为 typeface.js 的新项目。我试用了一下，它非常易于使用并且效果很好。

查看演示   下载文件

注意：我在这里只提供下载链接，因为网站本身没有“完整的可运行示例”样式的下载。我花了一点时间才弄清楚它的确切工作原理以及文件放置位置，所以我认为这可能会有所帮助。

更新：好的，演示现在再次可以运行了……问题是我在字体名称周围使用了引号，这导致了错误，并且我应用了多个字体（例如 font-family:Optimer, Arial;）。要使其正常工作，请不要使用任何引号，并且只应用一个字体（例如 font-family:Optimer;）。我在此示例中使用的字体 Qlassik 仍然无法正常工作。事后看来，我可能不应该使用一些随机的不完整字体=）

如何使用它

1. 下载它

从 这里 下载它并将其包含在您的页面中。将其包含在任何外部样式表 **之后**。

2. 找到您想要使用的字体

David 提供了三种您可以下载并使用的字体。或者，您可以找到自己喜欢的 TrueType 字体（在不违反任何版权法律的情况下！）。在我的示例中，我从 DaFont 上获取了一个免费的字体：Qlassik。（*存在问题，请参见上文）

3. 在您的页面中包含它

然后通过 转换器（在页面底部）运行它。这将生成一个新的 js 文件，请在 typeface.js 文件之后将其包含在您的页面中。再次提醒，这些文件应该放在您的样式表之后。

<script type="text/javascript" src="js/typeface-0.10.js"></script>
<script type="text/javascript" src="js/qlassik_medium_regular.typeface.js"></script>

4. 在标记中开始使用它

现在您已准备好开始使用它了！对于您希望使用新字体的任何文本，您需要为其指定一个名为“typeface-js”的类名，然后使用内联样式语句引用新字体名称。

<h1 class="typeface-js" style="font-family: 'Qlassik Medium'">
	Testing a Headline
</h1>

您需要按其正确的名称引用字体。我发现找出其正确名称的最简单方法是安装它，然后在任何打开的应用程序的字体菜单中找到它。

想法

我可能玩了大约一个小时，所以我不会做出任何草率的判断或建议，但到目前为止它看起来很酷。仅仅是 JavaScript，而不是像 sIFR 一样既有 JavaScript 又有 Flash，或者像 FLIR 一样既有 JavaScript 又有 PHP，这一点让人感觉很简洁。

我也很喜欢复制粘贴仍然可以在支持 <canvas> 的浏览器中工作。

它也很容易上手！请告诉我你们的想法。