《字体是网页设计中最重要的细节》由会员分享，可在线阅读，更多相关《字体是网页设计中最重要的细节（11页珍藏版）》请在金锄头文库上搜索。
1、字体是网页设计中最重要的细节一个非创意性质的网页，最重要的内容，就是文字。出现了文字，就会出现文字排版、字体选择、字体颜色大小粗细等细节。而这些细节，往往是非常重要的细节。好的字体排版，可以让人耐心的看完那些文字，然后得到其中的重要信息，还可以影响到浏览者阅读的心情。同时，字体的选择、大小等，还应该配合企业的VI识别系统，还需要配合你作品需要表达的思想感情来确定（例如古典风格，应该选择哥特式字体等）。好了，关于字体的重要性，我就说这么多，再多说也是废话，只要大家知道很重要，要好好选择调整就好了。字体的分类和格式衬线和无衬线衬线算是一种辅助性的小细节，笼统的谈，太过于抽象，我们来看两个例子：这两
2、个字体，是有衬线字体，大家可以看到在边角的位置，会多出一些修饰。这样的好处就是，可以清晰的分辨出字母和文字，分辨笔划的起始和终止。但是，这种字体如果设置字体大小太小的话、或者你里文字较远，则会受到衬线影响，分辨不清晰。同时，由于中文系统，默认的字体为宋体，见的太多导致审美疲劳，所以衬线字体比较适合打印文字以及正规文档中使用，通常不太适合使用在网页中。这两个字体，就是无衬线字体，没有边角的修饰，令人看起来很整齐光滑，没有毛刺。比较适合用在网页中，让浏览者获取大量的文字信息而不会疲劳。字体系列字体之间最大的差异并不在于有无衬线，而在于字体与字体之间，形体的差异。但是很多字体（特别是英文字体）之间，
3、差异不大，有些新字体甚至是对已有字体进行了细微的改造后产生的。于是，就把字体分成了几个大的系列，同一个系列中的字体，大体相同，称作通用字体系列。其中包括以下五个系列：serif：带衬线字体。Times New Roman 是默认的 serif 字体，中文字体的话，是宋体、仿宋之类的字体。sans serif：无衬线字体。Arial 是默认的 sans-serif 字体，中文字体中，微软雅黑、黑体等都是这类字体。monospace：等宽字体。这个字体里面的每个字母都有相同的宽度。通常用于显示程序代码等，Courier 是默认的 monospace 字体。而对于中文，每个汉字都是等宽的。cursi
4、ve：模仿手写字体。手写体，比较个性，通常用于标题、logo等等。这个字体系列没有默认字体，英文来说，通常用 Comic Sans，中文的话，行书系列、草书系列的字体等，都可以算作手写字体。fantasy：装饰用字体。多数用于标题，极具个性，字体繁多，艺术字体。无法对其的大小、形状下一个统一的定论，所以没有默认字体，在网页中，也通常很少用到，除非你有特殊的用处创意性的设计。关于通用字体系列的更多解释、描述和字体举例，推荐大家查看在 W3school 上的资料。字体的格式格式就是指字体表现出来的粗细、宽度和姿态等等特征。看下面的这张图片：里面的字，是相同大小的，同时排放在一条竖线上。为其应用了四
5、种不同的字体后，体现出来了不同的形态和粗细大小。在中文字体中，不同的字体，在字间距中通常没有很大的变化。而在英文字体中，不同的字体会改变字母的大小，导致整体的尺寸布局不同，进而导致整个排版混乱。相同的字体大小，在不同的字体下面，显示的效果几乎完全不同。这是英文字体选择中，比较麻烦和头疼的问题。字体的选择上面的这些理论，从某些角度和意义上来说，都是废话。如何选择合适的字体，才真正切合实际。那么我们应该如何选择在网页中使用的字体呢？解决这个问题，我们先应该知道为什么要纠结于选择字体这个问题。我个人认为应该存在 实用性 和创意性 这两个方面的因素。创意性很好理解，就是想突破常规，配合自己的网页中的设
6、计思想而选择相应的字体，例如表达程序员的思维，就对代码使用等宽字体，表达恐怖、古典，使用哥特式字体等等。这点自己去找字体好了，不再赘述。最主要的问题是在于 实用性 的方面。实用性问题，即不需要太过于华丽的字体，只需要大家看的都舒服、稍微带点自己的特色即可。你会说，很容易啊，直接 CSS 定义一条，填上个字体就好了。如果真这样，那就太好了。浏览器解析字体的过程实际上是这样的，当浏览器加载 CSS 后，解析到有关字体的样式，它会在你的系统中查找这个字体，只有找到了相应的字体文件，才会根据那个字体文件对网页中的文字进行渲染，显示出你想要的效果。既然这样，如果你的操作系统中，并没有安装网页中定义的那种
7、字体，就无法渲染出那种字体的效果，而通常使用当前系统的默认字体来渲染。那么你原有的设计，就不行了，你设计时觉得挺好，字体、位置、大小合适，但在别人的电脑上，清一色的宋体。所以这个问题，才是选择字体的难处所在。当然，有问题就有解决方式：使用经典通用字体不同操作系统都有不同的字体系统，但既然是字体，总有一些比较经典老牌的字体共同存在于各个系统中。例如无衬线的 Arial 字体，它产生的时间比较早，同时价格低廉，所以从早期就被windows 操作系统使用，在其他的操作系统中，也会有较好的不同于默认字体的显示效果。所以 我爱水煮鱼、潜行者m博客 这些网站，直接在 CSS 中声明使用一个字体：Arial
8、。使用多个字体属性上面的方法很简单，但是不灵活，注重简单而不注重细节。CSS 做的很好，它可以在一个网页中，声明指定多个字体，这样当写在前面的字体，在当前操作系统中没有的话，就会使用后面字体顶替。所以当你看一些网页作品的时候，会发现它的 CSS 中的 font-family 属性，指定了一大堆的 字体名称。但这个也不是可以随便指定的，也有一些注意事项。你应该这样做，先确定你网页中需要用到的字体，然后确定属于哪个字体系列有无其他的相近字体以及衍生字体，然后编写字体属性。顺序如下：最想用的字体可以代替的相近字体相近通用字体。例如如下写法：这样的意思就是，优先使用 Times 字体，然后系统没有的话
9、，查找同型异名的 TimesNR 字体，如果没有，寻找系统中的相近字体 New Century Schoolbook 等其他字体，最后如果都无法找到，就font-family: Times, TimesNR, New Century Schoolbook,Georgia, New York, serif;使用通用字体 serif ，这样浏览器就会寻找系统中的 无衬线 的默认字体，来代替。字体的大小选择形容字体大小的单位在 CSS 中，最常用的描述字体大小的单位有两个：em、px。通常认为 em 为相对大小单位，px 为绝对大小单位。但从实际应用中来讲，px 像素其实也是一种相对大小单位。例如，
10、在一块15寸分辨率为 800600 像素的屏幕上，10px 大小的文字，要比一块10寸分辨率 1024768 像素的屏幕上的10px 大小的文字显得更大一些。下面来说一下它们的区别和用法等。px：像素单位，10px 表示10个像素大小，在现在的网页设计中，常被用来表示字体大小。很方便很直观，但是有一些弊端。对于可用性不太友好，因为是“绝对”单位，所以有些浏览器（早期）的字体放大缩小功能失效。浏览器的默认字体大小为 16px ，早期的网页，由于屏幕分辨率比较低，通常采用12px作为网页正文的标准字体大小。但是在现在，感觉有点偏小，比较长的文章来说，浏览者看起来费劲。现在我更主张使用 14px 作
11、为标准字体，16px 作为中等字体，18px 作为较大字体，12px 作为偏小字体比较合适。em：相对大小，它表示的字体大小不固定，根据基础字体大小进行相对大小的处理。浏览器默认的字体大小为 16px，如果你对一段文字指定 1em，那么表现出来的就是 16px大小，2em 就是 32px大小。相对大小单位有很广泛的用途，由于它的相对性，所以对跨平台跨设备的字体大小处理上有得天独厚的优势，同时对于响应式的布局设计也有很大的帮助。但是缺点很明显，你无法直观的看到大小，而且对于不同的大小，你需要精确的计算。字体实际表现出来的大小上面只是说了两种形容字体大小的单位，但实际上表现出来的字体大小，并非简单
12、的单位前面的数值。除了数值之外，潜行者m 个人认为还跟 设备 和 视距 有关。设备就是指显示设备的分辨率及屏幕大小，跟前面解释 px 单位的相对性相同，如果在一块非常大的分辨率非常低的屏幕（像广场电子屏），即使很小的像素，也会展示出很大的字。这也就是为什么早期的 800600 像素横行的时候，大家都是用12px大小的原因。因为显示的文字已经够大了。视距就是指浏览者看文字的距离。很明显的道理，眼睛距离屏幕越远，看起来上面的文字就变小了。所以在选择网页中字体大小的时候，还需要考虑你的用户的实际使用习惯。同一个网页，在笔记本上和在手机上使用的时候，字体大小就不应该相同，因为电脑屏幕大分辨率高，而且视
13、距通常比较近而且固定，手机等屏幕小分辨率较低，视距更近（大家都喜欢躺着或者趴着玩手机啦），所以这些都要考虑，才能得到一个合理的大小。为什么是偶数字体大小通过上面的单位介绍，对于 px 单位中，我举得例子都是 12px、14px、16px、18px等等，为啥不是11px、15px？这涉及到一个锯齿的问题，特别是在早期的显示器中，往往不能很好的处理文字的锯齿问题，而使用单数的像素，极有可能造成锯齿，所以默认的通常使用偶数大小。字体的颜色选择字体的颜色选择同样是一个重要的细节，但是涉及到配色了，已经超出本文要讨论的范围，所以在这里，我只好简单的说一下有关网页中字体颜色的禁忌。字体的颜色要朴素、正常什
14、么叫朴素正常？通常来说，文章都是白底黑字，黑色的。所以网页中的文字，通常使用黑色，或者浅灰色，这样更加符合大众的口味。如果不是一些很有创意的设计，请不要随便的使用颜色。就像 我爱水煮鱼 博客里面的一篇文章如果我为它加上蓝色，你会怎么想？颜色要与背景有一定的对比度低对比度，容易导致字体看不清楚。所以要用高对比度的颜色，例如白底黑字，黑底白字等。不信看下图：如果你在看一篇文章，字体的颜色是上图中，最下面的那个，你还会再看下去吗？避免特殊颜色这里要避免的一些特殊颜色，是指网页中的一些默认颜色。特别是蓝色，因为蓝色代表着网页中的超链接，如果网页中有一段蓝色的文字，会让人误以为是可以点击的超链接。所以这
15、种颜色要尽量避免。但是有些时候在设计中，必须要用到这种颜色的设计，所以也有一些其他的方法来解决这个问题。例如潜行者m博客的 Qetro 主题，采用了蓝色调，在正文排版布局的时候思考过关于加粗文字的样式。如果使用常规的粗体黑色来说，较多的加粗内容，会导致页面文字的混乱。加粗的目的是为了醒目，告诉浏览者这是段重要的文字。所以我对文字添加蓝色处理。但是这个蓝色恰巧就跟超链接的默认样式颜色相同。非常容易让人迷惑，于是我将超链接的样式带有默认的下划线。当用户看到蓝色的时候，可能会试图放在上面看一下，结果无法点击也没有变成手指。再往下拉，看到超链接的时候，一眼就可以看出下划线是可以点击的超链接。这也是一种
16、还不错的折中方法。与字体有关的 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-
