我曾与一位视觉设计师合作共同开发一款web应用。他提交给我的设计稿看起来非常带感，于是我根据他的设计稿，用HTML和CSS将web应用写了出来。当我以为一切都已完成，并且火急火燎地将产品给他看的时候，知道他说啥了么？

“你全做错了。”

的确。我并没有根据他的模型来使用字体，为此他专门把我叫出来并告诉我这是一个非常大的错误。我该如何弥补呢？

“我不知道。但是目前它是最大的问题，毫无疑问。”

说起来，在过去的很长一段时间里，我都同不同的网页设计师一起合作开发各种不同的网站，这使得我逐渐开始关注网页设计中的很多细小但重要的细节了，比如，字体。

在此可以简单介绍一点背景知识。目前多数的网站都是基于HTML和CSS来开发的，如果你毫无网站开发经验，也许你有必要找个HTML&CSS的介绍视频学习一下，比如1小时创建一个体验不错的个人网站页面之类的教程。

字体规格

改变某写字体样式最简单的方式，是改变CSS的Font-family属性，然后，浏览器会直接读取用户电脑上的字体，想必每个网站开发者都明白这件事情。一般而言，一共有12种常见的网站安全字体，除开相对特殊的Comic Sans，还有11款字体可以供你在绝大多数类型的网站上随意使用。

如果你的视线仅仅盯着这十来个字体就未免太局限了。如果你足够敏锐，你会有意识地调整字体的粗线（light、normal、bold）和字间距， 追求更好的效果。举个例子，当你在导航栏中使用特粗的字体，紧凑的字体间距，会让你的网站看起来更加专业。相反，如果你使用的是极细的字体，网页会给人一 种非常锐利、清晰的感觉。

另一个使用字体的窍门，就是在CSS中为字体添加字体阴影属性。

以下的案例中，字体家族被设定为Helvetica，并且字体粗细被设定为极细。

这一字体的案例源自于我们的web应用Nomster。

字体栈

当你在指定要用什么字体的时候，你可以根据重要程度来设定一个顺序，越靠前的优先级越高。当设备中没有排名考前的字体的时候，那么系统会自动调用排 名靠后的字体。这也就是为什么windows和Mac内置字体不尽相同，但是最终都能调用合适的字体而正常显示网页内容的原因所在。对于这个字体栈的设 定，以下的工具/网站应该能帮到你：

CSS Tricks – Font Stacks：这是一个拥有8个不同字体的字体栈，直接从CSS Tricks抓取这个字体栈，你的网站字体效果肯定不会像1995之前的网站那么残废。

CSSFontStack.com：一个专业提供各种不同字体栈的网站，超过40种不同字体栈供你选择~

当然，如果你通过谷歌和百度来搜索应该可以发现更多的字体栈。

以下的使用案例同样来自我们的Web应用Nomster。它所使用的字体栈也是我们最喜欢的，因为它确实提高了网站的可读性。

加载特定字体

在web应用中使用特定字体来显示文本，是一件可行性很高的事情。你不必找一个“看起来很像”的字体来凑合，因为以下的方法可以帮你直接用你喜欢的字体：

字体托管服务

将一个普通字体加载到网站上，确实需要一点技巧。字体托管服务可以替你做到这一点，不过有的是免费的，有的是收费的。

Google web Fonts：谷歌的字体服务还是非常靠谱的，整合了许多优质的web字体供你调用到网站中去。按照谷歌官方的指示，你可以轻松地在你的web应用中调用这些字体。

当你想在网站中使用Garamond这个字体的时候，你如果使用字体栈来调用的话，可能会因为浏览器差异而无法正常使用，也可能因为本地字体而显示 不正常，而使用谷歌字体中的“EB Garamond”则不存在这样的问题，它不会调用本地字库，而且大家电脑里面显示也会完全一样。

谷歌字体服务是免费而易用的，并且会让不同的系统不同的浏览器都保持一致的体验，那为什么会有人考虑其他的方案呢？原因很简单。谷歌字体平台所收录 的字体多数是相对更开放甚至是直接开源的字体，但是有很多杀手级字体的开发商并不愿意这么做。作为商品出售字体可以给这些开发商带来更大的利益，这使得你 无法在谷歌字体平台上找到它们。当然，这个问题也是可以解决的。

TypeKit ：这个字体网站也是耳熟能详的大站。其中囊括了很多品质优秀的好字体，但是相信我，你看了会后悔的。为什么这么说？那些看起来优秀的字体并不便宜！基础的服务需要每年上交25美元，而高级版的每年需要交100美元！当然，如果不差钱的话，选择TypeKit也不错~

所以，最好不要告诉与你合作的设计师，否则他们会逼着你整套整套得买字体的！（突然意识到这篇文章的读者会是设计师……）

那么以上三种方案就是全部的解决方案了？别傻了，当然不止。谷歌字体是最著名的免费字体服务商，而TypeKit则是收费字体服务商中最流行的，你要用心找还有大把的字体托管服务商可供选择。

自托管字体

这是一种相对棘手的解决方案。因为这种方法的关键完全不在技术上，而是你得深入理解字体的授权和相关法律细节。

当我们直接从用户的机器上调用字体，或者使用托管字体的时候，我们完全不用考虑太多，几行CSS代码会解决所有的问题。但是，当我们要自己托管字体的时候，就需要明白使用字体的权限和相应的授权细节了。

比较高端的玩儿法是你在写代码的时候，告诉浏览器下载字体，并且告诉浏览器将去什么地方查找字体文件（或者多个版本的字体文件），然后告诉浏览器这 些字体的名字分别是什么。同时也需要注意，这些字体的类型。常见的字体格式是EOT、OTF、WOFF、TTF、SVG等。不同浏览器惯于处理的字体格式 可能不一样，所以最好你得准备好多种不同的字体供不同浏览器下载。

所以，首先你要将你准备好的字体文件转化成多种不同格式的字体，比如，你准备好一个.ttf格式的字体，那么你需要将它转化成.woff、.otf、.svg等格式的字体，然后你就可以设定下载文件的位置、调用字体的相关信息了。

令事情变得棘手的地方就在此了。考虑到你提供给了世界上每个人从你网站上下载字体的机会，那么当你将字体上传到服务器的那一刻开始，人们就可以肆无 忌惮地将字体下载到他们的电脑上，分享给朋友甚至用到他们自己的网站上。这就是为什么很多字体开发商不想让他们的字体轻易用在网站上。

因此当你需要下载一个用在自己的网站上的字体之时，你需要寻找授权可以用于网络且免费的字体（当然，不是用于桌面的那种）。

FontSquirrel：这是一个我特喜欢的免费字体网站，他们的首页上有一些的超高质量免费字体，并且每个字体的字体许可都已经明确地标注了出来。

在FountSquirrel上还有另外一个超赞的工具，那就是WebFont生成器。你可以将单个字体文件上传到生成器中，它会将其自动转化成你 需要的其他字体，并且同时生成相应的CSS代码，可以供你直接插入到网站代码中。只要格式允许，WebFont都能转化，并不规定字体来源。

除了免费字体，FontSquirrel还卖有大量的字体是收费的。

以下便是来自FontSquirrel的字体“Pacifico”在我们的Nomster上应用的案例：

MyFont.com同样会免费提供少量字体（但是其他字体会收费）的字体网站。当你在这个网站中搜索自己要的字体的时候，会发现其中绝大多数的字体都是需要你付费的，但是其中有些字体家族中特定粗细的字体是免费提供的，一定要仔细筛选。如果你人品好，真的能淘到好字体。

最后，关于字体还有三件事情是需要了解的：

1、不同的字体会赋予网站截然不同的感觉，把握好字体的细节就能掌控好网站的感觉；
2、将字体加载到web应用中的方法有一大把，仔细筛选一种符合自己的；
3、营造专业和炫酷的呈现效果固然重要，但是网站的最终目的还是传达信息，让人阅读的。所以在调整效果完之后，不妨猴退一步仔细审视一下，用户能否读到所有你写上去的文字。

原文地址：thefirehoseproject

优设网翻译：@陈子木（http://www.uisdc.com/visual-designer-web-fonts）