字体是网页设计中最重要的细节

栏目:建站资迅 2020-10-29

一个非创意性质的网页,最重要的内容,就是文字。出现了文字,就会出现文字排版、字体选择、字体颜色大小粗细等细节。而这些细节,往往常重要的细节。

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

好了,关于字体的重要性,我就说这么多,再多说也是废话,只要大家知道很重要,要好好选择调整就好了。

字体的分类和格式

衬线和无衬线

衬线算是一种辅助性的小细节,笼统的谈,太过于抽象,我们来看两个例子:

这两个字体,是有衬线字体,大家可以看到在边角的,会多出一些修饰。这样的好处就是,可以清晰的分辨出字母和文字,分辨笔划的起始和终止。但是,这种字体如果设置字体大小太小的话、或者你里文字较远,则会受到衬线影响,分辨不清晰。同时,由于中文系统,默认的字体为宋体,见的太多导致审美疲劳,所以衬线字体比较适合打印文字以及正规文档中使用,通常不太适合使用在网页中。

这两个字体,就是无衬线字体,没有边角的修饰,令人看起来很整齐光滑,没有毛刺。比较适合用在网页中,让浏览者获取大量的文字信息而不会疲劳。

字体系列

字体之间最大的差异并不在于有无衬线,而在于字体与字体之间,形体的差异。但是很多字体(特别是英文字体)之间,差异不大,有些新字体甚至是对已有字体进行了细微的后产生的。

于是,就把字体分成了几个大的系列,同一个系列中的字体,大体相同,称作通用字体系列。其中包括以下五个系列:

serif:带衬线字体。Times New Roman 是默认的 serif 字体,中文字体的话,是宋体、仿宋之类的字体。

sans serif:无衬线字体。Arial 是默认的 sans-serif 字体,中文字体中,微软雅黑、黑体等都是这类字体。

monospace:等宽字体。这个字体里面的每个字母都有相同的宽度。通常用于显示程序代码等,Courier 是默认的 monospace 字体。而对于中文,每个汉字都是等宽的。

cursive:模仿手写字体。手写体,比较个性,通常用于标题、logo等等。这个字体系列没有默认字体,英文来说,通常用 Comic Sans,中文的话,行书系列、草书系列的字体等,都可以算作手写字体。

ntasy:装饰用字体。多数用于标题,极具个性,字体繁多,艺术字体。无法对其的大小、形状下一个统一的,所以没有默认字体,在网页中,也通常很少用到,除非你有特殊的用处创意性的设计。

关于通用字体系列的更多解释、描述和字体举例,推荐大家查看在 W3school 上的资料。

字体的格式

格式就是指字体表现出来的粗细、宽度和姿态等等特征。看下面的这张图片:

里面的字,是相同大小的,同时排放在一条竖线上。为其应用了四种不同的字体后,体现出来了不同的形态和粗细大小。在中文字体中,不同的字体,在字间距中通常没有很大的变化。而在英文字体中,不同的字体会改变字母的大小,导致整体的尺寸布局不同,进而导致整个排版混乱。

相同的字体大小,在不同的字体下面,显示的效果几乎完全不同。这是英文字体选择中,比较麻烦和头疼的问题。

字体的选择

的这些理论,从某些角度和意义上来说,都是废话。如何选择合适的字体,才真正切合实际。那么我们应该如何选择在网页中使用的字体呢?

解决这个问题,我们先应该知道为什么要纠结于选择字体这个问题。我个人认为应该存在 实用性 和 创意性 这两个方面的因素。创意性很好理解,就是想突破常规,配合自己的网页中的设计思想而选择相应的字体,例如表达程序员的思维,就对代码使用等宽字体,表达恐怖、古典,使用哥特式字体等等。这点自己去找字体好了,不再赘述。最主要的问题是在于 实用性 的方面。

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

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

使用经典通用字体

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

相关阅读

免费建站平台的网站表单设计指南

2024-05-562

在如今数字化的时代,拥有一个专业的网站对于任何企业或个人都至关重要。而网站表单则是网站设计中的重要组成部分之一,它为用户提供了与网站互动的途径,例如订阅新闻简报、联系我们等。本文将详细介绍免费建站平台的网站表单设计指南,帮助您打造一个高效、吸引人的网站表单。1.简洁明了的表单布局一个简洁明了的表单布局可以让用户更快速地填写表单,提高用户体验。在设计表单布局时…

模板建站对于提升网站搜索排名的影响

2024-05-555

在当今数字化时代,拥有一个优质的网站对于企业的成功至关重要。然而,仅仅拥有一个漂亮的网站是不够的。要让网站在激烈的竞争中脱颖而出,吸引更多的目标受众,提升网站搜索排名是至关重要的一环。而使用模板建站是一个被广泛采用的策略之一,它对于提升网站搜索排名有着显著的影响。优化代码结构提升搜索引擎友好度模板建站通常会采用优化的代码结构,包括清晰的HTML标记、有效的标…

网页采集:探索数据的新前沿

2024-04-459

探索数据的新前沿:网页采集的重要性在当今数字化时代,数据被视为企业成功的关键因素之一。随着互联网的普及和信息技术的发展,数据量呈指数级增长,但这也带来了一个新的挑战:如何有效地收集和利用这些海量数据。在这个过程中,网页采集技术成为了一种不可或缺的工具,它为企业提供了获取并分析网络数据的途径,为业务发展提供了重要支持。网页采集技术的作用网页采集是指通过自动化程…

如何在低价建站中实现网站的快速加载?

2024-04-440

实现低价建站中网站快速加载的关键在如今竞争激烈的网络世界中,网站加载速度是至关重要的。快速加载的网站不仅提升了用户体验,还有利于搜索引擎优化(SEO),从而提高网站的排名和流量。针对低价建站项目,我们需要采取一些经济高效的方法来实现快速加载。以下是一些关键的方法:优化图片和多媒体内容图片和多媒体文件是网站加载速度的主要瓶颈之一。在低价建站中,我们可以通过以下…

仿站经验分享:成功仿站项目背后的故事。

2024-04-446

成功仿站项目背后的故事仿站,作为一种技术手段,旨在模仿并复制原网站的结构、设计、内容等,以实现类似甚至更优的用户体验。成功仿站项目的背后,往往蕴含着许多精心策划、技术实现和市场推广的故事。在本文中,我们将分享一些成功仿站项目背后的故事,以期为其他从业者提供一些经验和启示。1.深度研究目标网站成功仿站项目的第一步是深度研究目标网站。这包括分析目标网站的结构、内…

建站是找个人好还是找网络公司?

2021-03-394

企业建设网站通过有效的网络推广可以提高网站的流量,吸引更多的用户了解企业的产品或服务,提升网站的转化率(销售量)。那么应该找个人建站还是找专业的网络公司建站好,下面通过个人与网络公司建站的区别来进行深入的了解:1、个人建站与网络公司建站的价格区别个人:通常来说找个人建站一般是通过熟人介绍或者通过网络找到,个人不需要任何运营开支,另外建站只是个技术活,除去网站…