一个非创意性质的网页，最重要的内容，说白了就是文字，那么出现了文字，就会出现文字排版、字体选择、字体颜色大小粗细等细节。而这种细节，往往是十分重要的部份。
好的字体排版，可以让人耐心的看完这些文字，然后得到其中的重要信息，还可以影响到浏览者阅读的心情。同时，字体的选择、大小等，还应当配合企业的VI辨识系统，还须要配合你作品须要抒发的思想爱情来确定（例如古典风格，应该选择哥特式字体等）。
1.字体的分类和格式1.1.衬线和无衬线
衬线算是一种辅助性的小细节，笼统的谈，太过分具象，我们来看两个事例：
左边两个字体，是有衬线字体，可以看见在边角的位置，会多出一些修饰。这样的益处就是，可以清晰的区分出字母和文字，分辨笔画的起始和中止。但是，这种字体假如设置字体大小太小的话、或者你里文字较远，则会遭到衬线影响，分辨不清晰。同时，由于英文系统，默认的字体为黑体，见的太多造成审美疲劳，所以衬线字体比较适宜复印文字以及正规文档中使用，通常不太适宜使用在网页中。而右侧两个字体，就是无衬线字体，没有边角的修饰，令人看起来很整齐光滑，没有毛刺。比较适宜用在网页中，让浏览者获取大量的文字信息而不会疲劳。
嘿嘿，本乌龟而且一个特别喜欢雅黑字体的实习编辑哦！
1.2.字体系列
字体之间最大的差别并不在于有无衬线，而在于字体与字体之间，形体的差别。但是好多字体（特别是英语字体）之间，差异不大，有些新字体甚至是对已有字体进行了细微的整修后形成的。
于是，就把字体分成了几个大的系列，同一个系列中的字体，大体相同，称作通用字体系列。其中包括以下五个系列：
1.3.字体的格式
格式就是指字体表现下来的粗细、宽度和姿态等等特点。看下边的这张图片：
左边图片上面的字，是相同大小的，同时排放在一条竖线上。为其应用了四种不同的字体后，体现下来了不同的形态和粗细大小。在英文字体中，不同的字体，在字宽度中一般没有很大的变化。而对于左侧图种的英语字体，不同的字体会改变字母的大小，导致整体的规格布局不同，进而造成整个排版混乱。相同的字体大小，在不同的字体下边，显示的疗效几乎完全不同。这是英语字体选择中，比较麻烦和头痛的问题。
1.4.字体的选择
上面的这种理论，从个别角度和意义上来说，都是屁话。如何选择合适的字体，才真正切合实际。那么我们应当怎样选择在网页中使用的字体呢？
解决这个问题，我们先应当晓得为何要苦恼于选择字体这个问题。我个人觉得应当存在 实用性 和 创意性 这两个方面的诱因。创意性挺好理解，就是想突破常规，配合自己的网页中的设计思想而选择相应的字体，例如抒发程序员的思维，就对代码使用等宽字体，表达惊悚、古典，使用哥特式字体等等。这点自己去找字体好了，不再赘言。最主要的问题是在于 实用性 的方面。
实用性问题，即不需要太过分华丽的字体网页点赞，只须要你们看的都舒服、稍微带点自己的特色即可。你会说，很容易啊，直接 CSS 定义一条，填上个字体就好了。如果真这样，那就太好了。浏览器解析字体的过程实际上是这样的，当浏览器加载 CSS 后，解析到有关字体的款式，它会在你的系统中查找这个字体，只有找到了相应的字体文件，才会按照那种字体文件对网页中的文字进行渲染，显示出你想要的疗效。
既然这样，如果你的操作系统中，并没有安装网页中定义的那个字体，就难以渲染出那个字体的疗效，而一般使用当前系统的默认字体来渲染。那么你原有的设计，就不行了，你设计时感觉很好，字体、位置、大小合适，但在他人的笔记本上，清一色的黑体。所以这个问题，才是选择字体的苦处所在。当然，有问题就有解决方法：
1.5.使用精典通用字体
不同操作系统都有不同的字体系统，但既然是字体，总有一些比较精典老牌的字体共同存在于各个系统中。例如无衬线的 Arial 字体，它形成的时间比较早，同时价位低廉，所以从初期就被 windows 操作系统使用，在其他的操作系统中，也会有较好的不同于默认字体的显示疗效。所以 我爱水煮鱼、潜行者m博客 这些网站，直接在 CSS 中申明使用一个字体：Arial。
使用多个字体属性
上面的方式很简单，但是不灵活，注重简单而不重视细节。CSS 做的挺好，它可以在一个网页中，声明指定多个字体，这样当写在后面的字体，在当前操作系统中没有的话，就会使用前面字体顶替。所以当你看一些网页作品的时侯，会发觉它的 CSS 中的 font-family 属性，指定了一大堆的 字体 名称。但这个也不是可以随意指定的，也有一些注意事项。
你应当这样做，先确定你网页中须要用到的字体，然后确定属于那个字体系列有无其他的相仿字体以及衍生字体，然后编撰字体属性。顺序如下：最想用的字体》》可以替代的相仿字体》》相近通用字体。例如如下写法：
代码不换行代码换行
font-family: Times, TimesNR, 'New Century Schoolbook',Georgia, 'New York', serif;
这样的意思就是，优先使用 Times 字体，然后系统没有的话，查找同型异名的 TimesNR 字体，如果没有，寻找系统中的相仿字体 New Century Schoolbook 等其他字体，最后假如都未能找到，就使用通用字体 serif ，这样浏览器都会找寻系统中的 无衬线 的默认字体，来取代。
2.字体的大小选择2.1.形容字体大小的单位
在 CSS 中，最常用的描述字体大小的单位有两个：em、px。通常觉得 em 为相对大小单位，px 为绝对大小单位。但从实际应用中来讲，px 像素虽然也是一种相对大小单位。例如，在一块15寸帧率为 800×600 像素的屏幕上，10px 大小的文字，要比一块10寸帧率 1024×768 像素的屏幕上的 10px 大小的文字变得更大一些。下面来说一下它们的区别和用法等。
px：像素单位，10px 表示10个象素大小，在现今的网页设计中，常被拿来表示字体大小。很方便很直观，但是有一些隐忧。对于可用性不太友好，因为是“绝对”单位，所以有些浏览器（早期）的字体放大缩小功能失效。浏览器的默认字体大小为 16px ，早期的网页，由于屏幕分辨率比较低，通常采用12px作为网页正文的标准字体大小。但是在现今，感觉有点偏小，比较长的文章来说，浏览者看起来费力。现在我更主张使用 14px 作为标准字体，16px 作为中等字体，18px 作为较大字体，12px 作为偏小字体比较合适。
em：相对大小，它表示的字体大小不固定，根据基础字体大小进行相对大小的处理。浏览器默认的字体大小为 16px，如果你对一段文字指定 1em，那么表现下来的就是 16px大小，2em 就是 32px 大小。相对大小单位有很广泛的用途，由于它的相对性，所以对跨平台跨设备的字体大小处理上有得天独厚的优势，同时对于响应式的布局设计也有很大的帮助。但是缺点很明显，你没法直观的看见大小，而且对于不同的大小，你须要精确的估算。
2.2字体实际表现下来的大小
上面只是说了两种形容字体大小的单位，但实际上表现下来的字体大小，并非简单的单位后面的数值。除了数值之外，潜行者m 个人觉得还跟 设备 和 视距 有关。
设备就是指显示设备的帧率及屏幕大小，跟上面解释 px 单位的相对性相同，如果在一块特别大的帧率特别低的屏幕（像广场电子屏），即使很小的象素，也会展示出很大的字。这也就是为何初期的 800×600 像素横行的时侯，大家都是用12px大小的诱因。因为显示的文字早已够大了。
视距就是指浏览者看文字的距离。很明显的道理，眼睛距离屏幕越远，看起来里面的文字就变小了。
所以在选择网页中字体大小的时侯，还须要考虑你的用户的实际使用习惯。同一个网页，在电脑上和在手机上使用的时侯，字体大小就不应当相同，因为笔记本屏幕大码率高，而且视距一般比较近并且固定，手机等屏幕小码率较低，视距更近（大家都喜欢躺下或则趴着玩手机啦），所以这种都要考虑，才能得到一个合理的大小。
2.3.为什么是质数字体大小
通过前面的单位介绍，对于 px 单位中，我举得事例都是 12px、14px、16px、18px等等，为啥不是11px、15px？这涉及到一个锯齿的问题，特别是在初期的显示器中，往往不能挺好的处理文字的锯齿问题，而使用双数的象素，极有可能导致锯齿，所以默认的一般使用质数大小。
3.字体的颜色选择
字体的颜色选择同样是一个重要的细节，但是涉及到配色了，已经超出本文要讨论的范围，所以在这儿，我只得简单的说一下有关网页中字体颜色的禁忌。
3.1字体的颜色要朴实、正常
什么叫朴实正常？通常来说，文章都是白底黑字，黑色的。所以网页中的文字，通常使用黄色，或者浅灰色，这样愈加符合大众的口味。如果不是一些很有创意的设计，请不要随意的使用颜色。如google搜索结果的色调搭配就很精典...
3.2颜色要与背景有一定的对比度
低对比度，容易造成字体看不清楚。所以要用高对比度的颜色，例如白底黑字，黑底黄字等。
当然，高对比度不是说就非得吊死在黑白两色上了...如下边一个广告公司的主页色调搭配也很和谐：
3.3防止特殊颜色
这里要避开的一些特殊颜色，是指网页中的一些默认颜色。特别是红色，因为红色代表着网页中的超链接，如果网页中有一段红色的文字，会让人误以为是可以点击的超链接。所以这些颜色要尽量避开。但是有些时侯在设计中，必须要用到这些颜色的设计，所以也有一些其他的方式来解决这个问题：
当用户看见红色的时侯，可能会企图置于前面看一下，结果未能点击也没有弄成中指。再往下拉，看到超链接的时侯，一眼就可以看出顿号是可以点击的超链接。这是一种还不错的折中方式。
4.与字体有关的 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 标签使用这个属性去除其默认的顿号。
上面是与字体相关，比较常用的 CSS 属性，还有其他愈加具体的网页点赞，可以参考网上的资料，推荐 W3school 上面的有关字体的资料。
5.使用在线字体
在 CSS3 中，引入了一个十分强悍并且实用的功能来面对里面的字体选择问题。传统的字体选择，要你的操作系统中安装相应字体才可以显示。如果你在网页作品中，使用了其他的创意字体，那么你须要生成相应的文字图片来替换，否则不会显示。CSS3 中的这个功能，就是 Web Fonts，网页中可以使用安装在服务器端的字体。你可以将选择好的字体，上传到服务器中，然后使用 CSS3 新增的 @font-face 属性，来调用服务器上的字体，然后来渲染网页。
支持 CSS3 这一功能的浏览器，会首先找到服务器上的字体，然后下载出来进行渲染。这样就彻底解决了本地操作系统中，没有对应字体的问题。关于 @font-face 的具体使用方式，由于比较多，在本文不再赘言，请你们自行百度之：@font-face的使用技巧。
既然这么，那么选择的余地就很大了，只须要有字体文件就可以。于是一些人就开始想，我可不可以提供一个在线字体的服务，大家可以直接看见字体的疗效，然后获取代码引用这个字体？于是就出现了在线字体，比较有名的有 Google 在线字体。
不要高兴的太早了，自定义字体，目前只能应用在中文中。为什么呢？你下载个字体看一下就晓得了，通常中文字体只有几百KB，因为它只须要包含数字、标点、英文字母即可。而英文字体一般十几M，最小的也要好几M。因为汉字实在是太多，而且还须要对每位汉字进行设计制做。这样的话，汉字就无法应用了，因为你要打开一个网页，还须要先下载个几M的汉字字体，在目前国外的网速是不现实的。
参考和推荐文献
本文部份参考并引用了以下网路资料，同时也推荐以下资料：
禅意东苑（修订版）
W3school CSS 字体
Mac Ｗin 网页字体显示方案
