网页设计新趋势：我所知道的关于web字体的一切

@陈子木 我曾与一位视觉设计师合作共同开发一款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
优设网翻译：@陈子木
本文由优设网原创翻译，请尊重版权和译者成果，转摘请附上优设链接，违者必究。谢谢各位编辑同仁配合。

【优设网 原创文章 投稿邮箱：2650232288@qq.com】

 
================关于优设网================
"优设网uisdc.com"是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量68万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的"福利"吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：