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

栏目:建站资迅 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-04-42

概述在当今数字化时代,拥有一个精美、高效的网站对于企业或个人来说至关重要。然而,对于许多初创企业或个人项目,资金可能有限,因此寻找一种成本较低但回报丰厚的建站方式至关重要。本文将探讨便宜建站的秘诀,如何以小投入获得大回报。选择合适的建站平台在选择建站平台时,首先要考虑成本和功能。有许多免费或低成本的建站平台可供选择,如WordPress、Wix和Square…

前端建站需要学习哪些基础知识

2021-04-46

想要完整的制作出一个企业网站,并不是纸上谈兵就能完成的事情,在进行建站之前必须要学习一系列系统的知识才可以完成,那么前端建站需要学习哪些基础知识?1.html/html5+css/css3现在大部分的建站都是响应式的建站了,所以除了基本的html和css之外,还要学习html5+css3。学好了这两个,就可以制作出一个纯静态的网页了。2、JavaScript…

建站好上线前需要做哪些测试工作?

2021-04-420

2、所有的文字,包括中英文没有拼写错误,如果是使用标准的XTHML建设,那么在定义CSSID和Class名字的时候,最好用英文的名字,比如头部用header,底部用footer,导航用sidebar,而不要toubu,dibu,daohang什么的,防止搜索引擎在抓取网站的不知道那一块是什么内容,这些常见的重要的英文单词标记搜索引擎还是认识的。3、Meta标…

着重用户体验的企业建站是怎样的

2021-03-321

1、提供符合网站用户需求的内容优质的内容是吸引和留住用户的关键,符合建站用户需求的高质量、高价值的内容,可以吸引到更多的优质客户,提高用户的阅读量、满意度、忠诚度和粘性。为网站带来更多的流量和机会,从而使得企业在网站营销过程中赢得先机。2、做好网站的色彩搭配高质量的建站在进行图片使用与版面布局要注意的是重视对色彩、格局的搭配,确保网站在整体风格上的统一性。重…

谷歌喜欢怎样的外贸网站?

2020-10-1024

外贸网站从最开始的展示型网站,到后来的营销型网站再到现在的效益型网站,我们能明显看到建站需求和目的在变化。但这些变化始终都是跟着谷歌的变化来走的,这也说明了搜索引擎在互联网的重要性和特殊性。因此越来越多的外贸企业更加注重外贸网站在搜索引擎友好度的表现。根据当前的外贸推广的角度来看,由于阿里巴巴越来越难做了,而且其他的B2B的平台要求也越来越严苛,并且同行竞争…

聊聊企业网站编辑的工作状况与环境

2020-10-1069

网站编辑简称网编,是专门负责搜集、整理、编撰网站信息的岗位,这个岗位对于文字功底是有相对较高要求的,但同时这个岗位的工作者日常工作又比较繁琐和枯燥。下面跟大家聊聊企业网站编辑的工作状况如何,以及环境怎样。普通的网站建设公司也有这样的网编岗位,除了日常为企业编撰一些原创信息发布之外,更多时候是为客户的企业宣传网站发布站内的原始信息,包括文字信息的整理和发布、产…