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

《网页设计新趋势：我所知道的关于WEB字体的一切.doc》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、EverythingaboutWebFonts@陈子木我曾与一位视觉设计师合作共同开发-•款web应川。他捉交给我的设计稿看起来非常带感，于是我根据他的设计稿，用HTML和CSS将快b应用写了出來。当我以为一切都己完成，并艮火急火燎地将产品给他看的时候，知道他说啥了么？“你全做错了。”的确。我并没有根据他的模型来使川字体，为此他专门把我叫出来并告诉我这是一个非常大的错误。我该如何弥补呢？“我不知道。但是H前它是圾大的问题,毫无疑问。”说起来，在过去的很长一段时间里，我都同不同的网页设计师一起合作开发各种不同的网站，这使得我逐渐开始关注网页设

2、计中的很多细小但重要的细节了，比如，字体。在此可以简单介绍一点背景知识。目前多数的网站都是基丁-HTML和CSS来开发的，如果你亳无网站开发经验，也许你有必要找个IITMI&CSS的介绍视频学习一下，比如1小时创建一个体验不错的个人网站页面Z类的教程。以下，是我的视觉设计师教授给我的字体知识。字体规格改变某写字体样式最简单的方式，是改变CSS的Font-family属性，然后，浏览器会直接读取用户电脑上的字体，想必毎个网诂开发者都明白这件事情。一般而言，一共有12种常见的网站安全字体，除开相对特殊的ComicSans,还有11款字体可以供你

3、在绝大多数类世的网站上随意使用。如果你的视线仅仅盯着这十來个字体就未免太局限了。如果你足够敏锐，你会冇意识地调整字体的粗线(light,normahbold)和字间距，追求更好的效果。举个例子，当你在导航栏小使用特粗的字体，紧凑的字体间距，会让你的网站看起来更加专•业。相反，如果你使用的是极细的字体，网页会给人一种非常锐利、清晰的感觉。另一个使用字体的窍门，就是在CSS中为字体添加字体阴影屈性。以下的案例中，字体家族被设定为Helvetica,并且字体粗细被设定为极细。这一•字体的案例源自于我们的web应用Nomsterc字体栈当你在指定要

4、用什么字体的时候，你可以根据重要程度來设定一个顺序，越靠前的优先级越高。当设备中没冇排名考前的字体的时候，那么系统会H动调用排名靠后的字体。这也就是为什么windows利Mac内置字体不尽相同，但是最终都能调用合适的字体而正常显示网页内容的原因所在。对于这个字体栈的设定，以下的工具/网站应该能帮到你：CSSTricks-FontStacks：这是一个拥有8个不同字体的字体栈，直接从CSSTricks抓取这个字体栈，你的网站字体效果肯定不会像1995Z前的网站那么残废。CSSFontStack.com：一个专业提供各种不同字体栈的网站，超过4

5、0种不同字体栈供你选择~当然，如果你通过谷歌和百度来搜索应该可以发现更多的字体栈。以下的使用案例同样来自我们的Web应用Nomsterc它所使用的字体栈也是我们最喜欢的，因为它确实提高了网站的可读性。PinsereRomaViaFlavia,9&00187Rome.ItalyOneoftheTop5pizzaplacesinRome.Waitinline,orderfastanddon'texpectaplacetositdown.ThisisaplacethatallthelocalsgotoforgreatPizza!Someofthe

6、be^tpizzaI'veevereaten!一nurro^theflrW)

7、体。当你想在网站中使川Garamond这个字体的时候，你如果使用字体栈来调用的话，可能会因为浏览器差异而无法正常使用，也可能因为木地字体而显示不正常，而使用谷歌字体中的“EBGaramond”则不存在这样的问题，它不会调用木地字库，而且大家电脑里面显示也会完全一样。Normal400AddtoCollectionGrumpywizardsmaketoxicbrewfortheevilQueenandJack.EBGaramond.1StylebyGoorgDuffnerS口谷歌字体服务是免费而易用的，并代会让不同的系统不同的浏览器都保持一致

8、的体验，那为什么会有人考虑其他的方案呢?原因很简单。谷歌字体平台所收录的字体多数是相对更开放茯至是直接开源的字体，但是冇很多杀手级字体的开发商并不愿意这么做。作为商品出竹字体可以