为您的网站提供字体的最佳方式

本苔藓 经过 本苔藓  |  2014年3月5日

Web设计来自年龄的Webfonts进入广泛使用。在这一点之前’可以说,我们比工程师更少的设计师。

但是,我们的热情’在Web Design中的字体选项抓住了,导致令人眼花缭乱的选择数组;如此之多,因此许多设计师选择最少阻力的路径,允许简单地实现它们的排版。

如果你知道你是什么’重新寻找,所有选项都很简单。在这篇文章中我们’LL ARM携带在字体技术之间选择时需要做出明智的决策所需的知识。

We’重新通过关注提供历史经典字体,Garamond的最佳方式来说明这些选项。

 

字体堆叠

颂扬了Webfonts的美德,我们的第一个选择’LL考虑根本不使用Webfonts。字体堆叠是一种CSS技术,在其中,您可以使用您的首选启动许多后退,并以CATT-ALL解决方案结尾。

在线有很多字体堆叠资源,但我的最爱是 cssfontstack.com, it’对于字体堆栈的一个伟大的起点,但要意识到这比不是你更频繁’LL需要带来一些专业知识。

根据CSSFontstack.com的说法,Garamond可以作为System字体提供49.91%的Macs和86.47%的Windows机器。那’也很好,但不够好。这里’涵盖所有基础的建议字体堆栈:

font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;

问题是,我们如何改善这一点?

嗯,我们知道有许多版本的Garamond可用,因此我们可以在第二个插槽中添加变化作为较小的妥协。

其次,我不同意Baskerville或时间是古德尼德的足够替代品,所以让’掉落它们。 Hoefler文本适用于Garamond,所以可以留下来。我们需要将Serif添加为最终捕获 - 所有,但大多数系统使用时间作为默认Serif,让’在远期乔治亚洲的乐队的s槽’S穿过裂缝。

我们的最终修改的字体堆栈如下所示:

font-family: Garamond, "adobe. Garamond. Pro", "Hoefler Text", Georgia, serif;

大多数观众都将看到Garamond,其他一些人会看到合理的妥协,一个微小的少数群体将获得默认的Serif字体。

凡好& Cons

字体堆叠是免费的,到迄今为止最快的解决方案,具体取决于您所选择的字体可能非常有效;在那里的garamond’对召唤这个问题是一个很好的论点‘job done’.

但是,字体堆叠的一个主要问题,特别是用像garamond这样的字体:循环中有这么多的海盗版本’不可能知道哪个字体被命名“Garamond” on the user’S系统,不仅可以确保设计与我们的期望一致,字体的规模可能与我们设计中的版本无关不同。 (从技术上讲,那里’没有什么可以阻止常规的副本更名“Garamond”,在这种情况下,我们的字体堆栈将使用该问题。)

因此,字体堆叠是一个很棒的备用,并且应该考虑与下面的所有解决方案一起使用,但它’s少于理想的主要解决方案。

 

谷歌字体

谷歌字体 对于许多设计师来说,他们结束了他们的搜索。总共有0美元,您可以使用CSS轻松加载Webfonts进入您的网站。

唯一的缺点是提供的字体数量非常有限。 Roboto和Pt Sans等字体欠他们的流行度以及他们在谷歌字体上的免费可用性,以及他们的设计品质。

目前,Google Fonts上唯一可用Garamond的变化是 EB GARAMOND, 尝试开源Garamond字体。但这个版本的缺陷是那里’只有一个重量和风格可用;那里’没有大胆或斜体。 Designer Georg Duffner慷慨地完成了他的工作 Bitbucket. but it’没有生产准备好了。

凡好& Cons

谷歌字体是一个伟大的预算解决方案,适用于您可以衡量账单而不是客户的情况。能够在CSS中指定您的字体,可以像可以一样简单。

谷歌字体的大缺陷是尽管他们的营销,那里’非常小的选择。如果你’你正在寻找一个开放的Sans Webfont然后你’在正确的地方,但如果你想要像garamond这样的字体 - 这几乎没有模糊 - 它’s a wash-out.

 

自主主办

自主托管是一种非常被Webfonts的低估方法。它的关键吸引力是对字体的能力,一种选择如此有吸引力,几乎所有流媒体服务都尝试模仿它。

如果您的系统上有Garamond的桌面副本,请打开它和您’请参阅令人眼花缭乱的字符数。子集字体是删除非基本字符的过程,从而导致更小的文件大小和更快的传送。

当然,您需要的字符将取决于您的网站’re building: if you’修复了杜布罗夫尼克的旅游指南’ll可能需要塞尔维亚西里尔字符;如果你’重新再现莎士比亚收集的作品’s unlikely you’ll need an @ symbol.

为了借一些字体,你’LL需要字体编辑软件。免费提供许多选项 Fontforge. 到溢价 fontlab工作室。 要生成字体的子集版本,只需选择您愿意的字形’T WANGE,并删除它,然后将文件保存到项目文件夹中。 (小心不要覆盖原始字体文件!)

adobe. Garamond. Pro的完整.ttf文件是606KB。将其剥离到基本的拉丁字符和标点符号将其降低到56KB。乘以几个重量和风格和你’重新在您的用户下载中保存几个MB。

自主托管桌面字体

您安装的大多数字体文件将是TrueType(.ttf),具有散乱的OpenType(.otf)。您可以将这些保存到您的服务器并在CSS中指定它们。

除IE(即使是最新版本)和一些移动浏览器(包括IOS Safari的遗留版)之外,所有现代浏览器都存在支持.ttf和.otf文件格式在所有现代浏览器中都很广泛。

增加你的覆盖范围’LL需要几种额外的格式。 .eot适用于IE,.woff将为大多数浏览器工作,并且是W3C’S的首选格式,.svg将在旧版浏览器上工作。那里’s一些Web服务将为您为您的.ttf文件生成这些格式,其中最受欢迎的文件之一 字体松鼠’s.

在线转换桌面字体的缺点是双重:首先,您几乎肯定不会获得许可;其次,桌面字体几乎总是针对打印进行了优化,它们只需在屏幕上呈现良好。

自主托管Webfonts

Font ForceRies终于唤醒了这个事实,即Webfonts有一个巨大的市场。因此,他们不仅收紧了他们的许可,而且它们’重新努力优化他们的屏幕上的背目录。

提供专用Webfonts的奖励提供所有所需格式,质量选中,并准备上传到您的服务器。什么’s more you’仍然可以自由借助文件,而且您’重新依赖于第三方服务器’s uptime.

您可以购买多个地方购买Webfonts,该领域中的两个关键播放器是 fontshop.com.myfonts.com..

返回我们的Garamond Quandary,我们可以看到MyFonts有许多不同版本的Garamond提供。我们可以许可 adobe. Garamond. 在几个重量中,仅限于250,000页,约为180美元。

FONTSHOP还有许多Webfont版本的Garamond可用。 Urw garamond网站 提供我们可能想要的每一次重量和风格,所有这些都是每月有一般500,000页面浏览量。什么’更多,Fontshop有专门的 亚遗套 优化您闪亮的新字体购买。不幸的是,您为全文家族支付了大约680美元的溢价。

优点

自主托管使子集能够。它确保您保持控制字体交付,并避免对第三方服务器的任何类型的依赖。

什么’s more, if you’购买专业Webfont,您可以预期质量非常高。

自主主办也呼吁我们更喜欢的人“own”我们的字体而不是租用它们。当然,在合法的条目中’非常少的所有权,但一次性费用更舒适地坐到许多人的订阅。

自主托管的唯一缺点是大量的价格。您不仅需要支付字体,但您可能需要考虑托管和带宽成本。

 

WebFont服务

就像谷歌字体一样,WebFont服务通过简单的CSS向我们的浏览器提供字体。与谷歌字体不同,那里’S巨大的范围可供选择。

有许多不同的供应商可供选择,而且我特别喜欢赫弗勒& Frere-Jones’ cloud.typography. 服务。然而,与许多较小的供应商一样,他们的有用性完全取决于您的类型的可用性’重新寻找。最接近的字体赫弗勒&Bere-Jones可以提供是亨德勒文本,但是,如果我们’重新支付溢价我们应该’T需要妥协。

WebFont流中最大的播放器是 adobe. TypeKit.。它们的字体的质量非常高,实现很简单,最重要的是他们有一个巨大的目录来选择。

TypeKit提供一系列订阅,每年24.99美元,每月50,000次观看,每月达到每年99.99美元。但是,如果你’重新创意云成员,投资组合计划包含在您的订阅中;意味着对于大多数Web设计人员TypeKit是一个免费解决方案。

快速搜索告诉我们,Garamond有几个版本,包括 adobe.’s own, 可在TypeKit上使用。并且,还有一个非常有限的子集功能,允许我们减少文件大小。

优点

WebFont Streaming Services提供了一个卓越的质量字体,很容易添加到您的网站上。

在TypeKit的情况下,如果你’RE已经是一个创意云成员,然后自由访问使这个更具吸引力的选项。但是,如果你’没有成员那么你’在支付大量订阅之间并将自己绑在adobe之间的选择。

我对任何流媒体服务的原则问题是您完全依赖于第三方服务器’表演。如果他们的服务器失败,那么您的品牌很大。

 

哪个是正确的选择?

与如此多的事情一样,答案是:它取决于您的项目。但是我们可以根据我们的Garamond测试提供一些决定:

字体堆叠是一个无法成本的备份,它提供了一个在字体文件丢失或流媒体服务运行缓慢时提供了一个打牌的解决方案。它应该始终在任何网站上实施,但依靠它,即使对于加拉诺德潜在危险的东西,即使是常见的。

如果你的字体’重新寻找可免费使用,无论是通过Google字体免费流,还是例如,如果您有创意云订阅,那么这是一个不错的选择。因为我有一个创造性的云订阅,我将诱惑这条路线,虽然缺乏真正的子集是一个问题。

如果您有预算,那么自主托管专业Webfont是最佳选择。与股票摄影相比,相比,与股票摄影相比相对较为谦虚的成本

在我们的行业’将JavaScript文件缩小为节省几kB,剃数来自单个文件的数百次是禁智的。

 

特色图片/缩略图, 下载映像 via Shutterstock.