我曾与一名视觉计划师合作合营开辟一款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、营建专业和炫酷的显现结果当然重要，但是网站的终究方针照样转达信息，让人浏览的。以是在调剂结果完今后，无妨猴退一步细心审阅一下，用户可否读到一切你写上去的笔墨。