2014-06-09

浅析网页设计的细节——字体设计

tag:

对于很多的网站建设公司的前端工程师来说,应该都曾经遇到过很多次这样的问题吧,那就是有时候当你的搭档视觉设计师提交给你的设计样稿看起来非常时尚,但是当你根据他的图稿,使用HTML以及DIV+CSS切片之后,他一本正经地告诉你你都做错了,而且经过对照,事实也的确如此,因为,你所完成的作品,在一个细节上,与设计图南辕北辙。那就是字体。

这个问题说起来非常细节,也许在大多数的成都网站建设公司里,都不曾留意过。但是,正是这个细节,导致了太多的网站设计高度重复。

所以现在有些高端网站制作公司开始注意到了这一点,并开始着手改变。每天都在谈用户体验,其实,真正的用户体验,正是应该从这些细节做起。

在谈具体的东西之前,我们可以先科普一下。在目前绝大多数的网站其实都是基于HTML和CSS来开发的,对于一个初涉此行业的新人,我建议你可以先找个HTML&CSS的学习视频研究一下。

接下来就是今天要讲的重点了,关于我们一直以来忽视的字体问题。

要点一,字体规格

要想改变一个字体的样式的最简单方法就是改变CSS的Font-family属性,在此之后浏览器会直接读取用户电脑上的字体。一般情况下,大家经常使用的一共有12种安全字体,即使是除去特殊的Comic Sans,你也还有11款字体可以选择。

虽说11款字体看起来数目少,但是倘若加入对字体的粗细,间距等调整,就又会增加无穷的变化。这里有一个经验,就是想要让你的网站看起来比别人专业,那就在你的网站导航栏中使用较粗的字体以及紧凑的字体间距。而与之相反的是使用极细字体的话,网页就会显得比较锐利和清晰。

 

要点二,字体栈

你需要对使用的字体根据其重要程度来设置一个顺序。可以使用一下的工具或网站来进行这个字体栈的设定。

CSS Tricks – Font Stacks:这是一个拥有8个不同字体的字体栈,直接从CSS Tricks抓取这个字体栈,你的网站字体效果肯定将超越大多数的网站。

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

大家经常都在说细节决定成败,但是大多数设计师从来没有践行过这一点,希望成都梦工场的文章能对你有所帮助。