《网页设计中如何渲染网站字体.docxVIP

网页设计中如何渲染网站字体前言我们知道同一种字体在不同浏览器上的表现有可能是不同的，除了浏览器，还有哪些导致表现不同的因素呢？不同系统下字形的渲染也是不一样的，根本原因是什么呢？我们希望各浏览器下字体排版一致，实现的话有完美的方案吗？带着这些问题我们来看看字体渲染的过程：解码了解解码之前，我们稍微先简单回顾下编码的一些知识，常见的名词有：ASCII 、GB2312、Big5、Unicode、UTF-8，它们之前有什么区别或联系呢？简单来说，起初美国国家标准协会ANSI制定了一个标准，规定了常用字符的集合以及每个字符对应的编号，这就是ASCII字符集（Character Set），也称ASCII码，当计算机慢慢发展，人们发现之前的128个的字符不能满足需求了，于是便在原基础上进行扩展，GB2312、Big5等都属于扩展后的编码方式，再后来呢，为了实现在一份文档中可以正确显示所有类型的字符，于是Unicode字符集诞生了，而UTF-8是Unicode的实现方式之一, 与之相似的还有UTF-16和UTF-32。回顾了编码，我们再来看解码，浏览器收到网页内容后，首先需要把这些内容转化为可阅读的文本，上面我们也提到了，不同国家或语言会使用不同的编码方式，那怎么去判断编码方式呢，方法有下面这些（优先匹配前面的规则，如果没有，则按顺序往下匹配）：Web 服务器返回的 HTTP 头中的 Content-Type: text/html; charset=“”的编码网页本身 meta header 中的 charset 部分浏览器菜单里一般允许用户强制指定编码部分浏览器 (比如 Firefox) 可以选择编码自动检测功能，使用基于统计的方法判断未定编码。分段编码方式确定后，网页的内容就被转化为Unicode字符了，分段的过程就是将文本分为由不同语言组成的小段.选择字体下面我们来谈谈字体，字体的分类大致有下面这些:1. 点阵字体（Bitmap Fonts）2. 轮廓字体（Outline Font）2-1. PostScript字体2-2. TrueType字体2-3. OpenType字体3.笔画字体（Stroke-based font）4.METAFONT如何理解点阵字体和轮廓字体的区别呢，其实它们的表现和图片格式中的png8和png24的的区别很类似，点阵字体都是实色，没有过渡色，边缘锐利，而轮廓字体有过渡色，边缘也比较平滑。很多人把“宋体”（simsun）当作点阵字体，其实不是，它和“微软雅黑”（microsoft yahei）一样，都属于轮廓字体，只不多12px~17px的宋体内置了点阵信息而已。如果按照字形来分的话，字体又可以分为：衬线（serif）非衬线（sans-serif）等宽字体（monospace ）书写体（cursive）梦幻体（fantasy）注：其中“serif”表示”字脚”、“装饰”的意思，而“sans”来源于法语，是“无”的意思。常见的衬线有下面这些，字形的末端都会有“脚”：常见的非衬线有：而系统所包含哪些字体跟什么有关呢？当我们想用一种字体，但不确认这个字体是否是系统已有的，怎么去确认呢？首先系统所包含字体不只和系统预装的字体有关，还和系统上安装哪些软件有关，微软操作系统下，详细的系统和一些软件包含的字体可以查看这个索引：Microsoft typography，Mac系统可以查看这个索引：List of typefaces included with OS X再让我们回到网页中，CSS里如果font-family未设置中文字体时，我们知道是根据浏览器默认的字体来显示，找到浏览器对应的设置，你也可以手动修改这些。p{font:12px/24px Tahoma;}p{font:12px/24px Arial;}以上两种写法按照前面我们所说的规则来说，在同一个系统和浏览器中匹配的是唯一的字体，那么它们的显示还会有区别吗？看看下面Windows系统下部分浏览器的测试结果：仔细看，你会发现IE6,IE8,Chrome,Firefox下文字底部不在同一水平线上的。所以由此得知：英文字体不会影响中文的字形，但会影响其位置。可是…为什么会影响位置呢？我们再来看下网页中的文字的位置到底是怎么被控制的：默认的规则是：用行高（line-height）减去内容区（content area）的高度所得到的值一分为二，各放在内容区的上面和下面，但不同浏览器的渲染不同，并且结合上面的测试结果，就算内容区的位置是相同的，文字在内容区的位置还可能不同。而影响文字在内容区的位置的因素有下面几个，也就是说这也不是统一的。字体类型排版引擎浏览器排版引擎总的来说，Mac OS X用户使用CoreText渲染引擎，Windows7 和Windows Vist