致力于高端网站建设服务的专业公司
网站建设热线:010-51000596
首页 > 网站资讯 > 网页设计 > 网页设计教程 > 网页设计细节:字体的选择很重要

网页设计细节:字体的选择很重要

 

    一个好的网页设计师,在设计网页的时候会更多的注重网页设计过程的一些细节问题,因为细节往往就是决定这个网页设计成败的关键,比如字体。

    好的字体排版,可以让人耐心的看完那些文字,然后得到其中的重要信息,还可以影响到浏览者阅读的心情。同时,字体的选择、大小等,还应该配合企业的VI识别系统,还需要配合你作品需要表达的思想感情来确定(例如古典风格,应该选择哥特式字体等)。  如何选择合适的字体,才真正切合实际。我们应该如何选择在网页设计中使用的字体呢?

    一、字体的选择

     在网页设计的时候,字体的选择应该考虑到实用性和创意性这两个方面的因素。创意性很好理解,就是想突破常规,配合自己的网页中的设计思想而选择相应的字体,例如表达程序员的思维,就对代码使用等宽字体,表达恐怖、古典,使用哥特式字体等等。最主要的问题是在于实用性的方面。

    实用性问题,即不需要太过于华丽的字体,只需要大家看的都舒服、稍微带点自己的特色即可。你会说,很容易啊,直接CSS 定义一条,填上个字体就好了。如果真这样,那就太好了。浏览器解析字体的过程实际上是这样的,当浏览器加载CSS 后,解析到有关字体的样式,它会在你的系统中查找这个字体,只有找到了相应的字体文件,才会根据那个字体文件对网页中的文字进行渲染,显示出你想要的效果。

    既然这样,如果你的操作系统中,并没有安装网页中定义的那种字体,就无法渲染出那种字体的效果,而通常使用当前系统的默认字体来渲染。那么你原有的设计,就不行了,你设计时觉得挺好,字体、位置、大小合适,但在别人的电脑上,清一色的宋体。所以这个问题,才是选择字体的难处所在。

   1. 使用经典通用字体

    不同操作系统都有不同的字体系统,但既然是字体,总有一些比较经典老牌的字体共同存在于各个系统中。例如无衬线的Arial 字体,它产生的时间比较早,同时价格低廉,所以从早期就被windows 操作系统使用,在其他的操作系统中,也会有较好的不同于默认字体的显示效果。所以 我爱水煮鱼、潜行者m博客 这些网站,直接在CSS 中声明使用一个字体:Arial。

    2.使用多个字体属性

    上面的方法很简单,但是不灵活,注重简单而不注重细节。CSS 做的很好,它可以在一个网页中,声明指定多个字体,这样当写在前面的字体,在当前操作系统中没有的话,就会使用后面字体顶替。所以当你看一些网页作品的时候,会发现它的CSS 中的font-family 属性,指定了一大堆的字体名称。但这个也不是可以随便指定的,也有一些注意事项。

    你应该这样做,先确定你网页中需要用到的字体,然后确定属于哪个字体系列有无其他的相近字体以及衍生字体,然后编写字体属性。顺序如下:最想用的字体>可以代替的相近字体>相近通用字体。例如如下写法:

    font-family:Times,TimesNR,‘New Century Schoolbook’,Georgia,‘New York’,serif;

    这样的意思就是,优先使用Times 字体,然后系统没有的话,查找同型异名的TimesNR 字体,如果没有,寻找系统中的相近字体New Century Schoolbook 等其他字体,最后如果都无法找到,就使用通用字体serif ,这样浏览器就会寻找系统中的 无衬线 的默认字体,来代替。

字体的大小选择

在选择网页中字体大小的时候,需要考虑你的用户的实际使用习惯。同一个网页,在笔记本上和在手机上使用的时候,字体大小就不应该相同,因为电脑屏幕大分辨率高,而且视距通常比较近而且固定,手机等屏幕小分辨率较低,视距更近(大家都喜欢躺着或者趴着玩手机啦),所以这些都要考虑,才能得到一个合理的大小。

    二、字体的颜色选择

    字体的颜色选择同样是一个重要的细节,但是涉及到配色了,已经超出本文要讨论的范围,所以在这里,我只好简单的说一下有关网页中字体颜色的禁忌。

    1.字体的颜色要朴素、正常

    什么叫朴素正常?通常来说,文章都是白底黑字,黑色的。所以网页中的文字,通常使用黑色,或者浅灰色,这样更加符合大众的口味。如果不是一些很有创意的设计,请不要随便的使用颜色。颜色要与背景有一定的对比度,低对比度,容易导致字体看不清楚。

    2.避免特殊颜色

    这里要避免的一些特殊颜色,是指网页中的一些默认颜色。特别是蓝色,因为蓝色代表着网页中的超链接,如果网页中有一段蓝色的文字,会让人误以为是可以点击的超链接。所以这种颜色要尽量避免。但是有些时候在设计中,必须要用到这种颜色的设计,所以也有一些其他的方法来解决这个问题。

    3.使用在线字体

    在CSS3 中,引入了一个非常强大而且实用的功能来面对上面的字体选择问题。传统的字体选择,要你的操作系统中安装相应字体才可以显示。如果你在网页作品中,使用了其他的创意字体,那么你需要生成相应的文字图片来替换,否则不会显示。CSS3 中的这个功能,就是Web Fonts,网页中可以使用安装在服务器端的字体。你可以将选择好的字体,上传到服务器中,然后使用CSS3 新增的@font-face 属性,来调用服务器上的字体,然后来渲染网页。

    三、与字体有关的CSS 属性

    与字体有关的CSS 属性,通常有以下几个:font-family、font-style、font-weight、font-size、line-height、letter-spacing、word-spacing、text-align、text-decoration。

    font-family:用于定义字体,上面有演示不多说。更详细的资料请看:font-family。

    font-style:用于定义字体的样式,包括正常、斜体、倾斜等,对应的属性值为:normal – 文本正常显示、italic – 文本斜体显示、oblique – 文本倾斜显示。

    font-weight:用于定义文字的粗细,详细的属性值请看:font-weight。

    font-size:设置字体大小,不再赘述。

    line-height:用于设置文字中的行间距,合适的行间距对用户阅读带来良好体验。同时还可以用于垂直布局单行文字。

    letter-spacing:设置文字之间的字间距,使文字之间的距离增大或者减小。

    word-spacing:用于调整单词的间距。

    text-align:用来对齐文字,例如左对齐、右对齐、居中对齐等。

    text-decoration:用来修饰一段文本,例如添加下划线等。常对a 标签使用这个属性消除其默认的下划线。