网站设计中的字体设计

不同的字体会赋予网站截然不同的感觉,把握好字体的细节就能掌控好网站的感觉。和不同的设计师一起合作开发各种不同的网站,这使得我们要开始关注网站设计中的很多细小但重要的细节了,比如,字体设计

1、字体规格

改变某写字体样式最简单的方式,是改变CSSFont-family属性,然后,浏览器会直接读取用户电脑上的字体,想必每个网站开发者都明白这件事情。

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

2、字体栈

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

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

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

3、加载特定字体

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

4、字体托管服务

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

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

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

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

5、自托管字体

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

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

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

将字体加载到web应用中的方法有一大把,仔细筛选一种符合自己的。营造专业和炫酷的呈现效果固然重要,但是网站设计的最终目的还是传达信息,让人阅读的。

转载请注明文章来源:http://www.offidea.com/font-design-in-web-design-2.html

Leave a Comment

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

infochat
沃斐高端网站设计为您提供专业的网站建设服务.广州网站设计,广州网站建设首选沃斐设计