期货超短线

窍门网日常生活电脑网络医疗保健电子数码美容健身社交礼仪家居家电房产车辆花草宠物休闲娱乐教育培训求职招骋婚嫁育儿灾害求生艺术收藏文化民俗旅游观光理财投资宗教信仰
您的位置:主页 > 电脑网络 > 网站建设 > 分析CSS设置字体到网站字体解析渲染过程

分析CSS设置字体到网站字体解析渲染过程

所属栏目:网站建设 更新时间:2013-11-07 浏览次数:...

分析CSS设置字体到网站字体解析渲染过程

前言

我们知道同一种字体在不同浏览器上的表现有可能是不同的,除了浏览器,还有哪些导致表现不同的因素呢?不同系统下字形的渲染也是不一样的,根本原因是什么呢?我们希望各浏览器下字体排版一致,实现的话有完美的方案吗?

带着这些问题我们来看看字体渲染的过程:

解码

了解解码之前,我们稍微先简单回顾下编码的一些知识,常见的名词有:ASCII 、GB2312、Big5、Unicode、UTF-8,它们之前有什么区别或配资开户 呢?简单来说,起初美国国家标准协会ANSI制定了一个标准,规定了常用字符的集合以及每个字符对应的编号,这就是ASCII字符集(Character Set),也称ASCII码,当计算机慢慢发展,人们发现之前的128个的字符不能满足需求了,于是便在原基础上进行扩展,GB2312、Big5等都属于扩展后的编码方式,再后来呢,为了实现在一份文档中可以正确显示所有类型的字符,于是Unicode字符集诞生了,而UTF-8是Unicode的实现方式之一, 与之相似的还有UTF-16和UTF-32。

回顾了编码,我们再来看解码,浏览器收到网页内容后,首先需要把这些内容转化为可阅读的文本,上面我们也提到了,不同国家或语言会使用不同的编码方式,那怎么去判断编码方式呢,方法有下面这些(优先匹配前面的规则,如果没有,则按顺序往下匹配):

  1. 期货超短线Web 服务器返回的 HTTP 头中的 Content-Type: text/html; charset=“”的编码

  2. 期货超短线网页本身 meta header 中的 charset 部分

  3. 浏览器菜单里一般允许用户强制指定编码

  4. 部分浏览器 (比如 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”来源于法语,是“无”的意思窍门天下fbhgs.wang

常见的衬线有下面这些,字形的末端都会有“脚”:

分析CSS设置字体到网站字体解析渲染过程

常见的非衬线有:

分析CSS设置字体到网站字体解析渲染过程

而系统所包含哪些字体跟什么有关呢?当我们想用一种字体,但不确认这个字体是否是系统已有的,怎么去确认呢?

首先系统所包含字体不只和系统预装的字体有关,还和系统上安装哪些软件有关,微软操作系统下,详细的系统和一些软件包含的字体可以查看这个索引:Microsoft typography,Mac系统可以查看这个索引:List of typefaces included with OS X

期货超短线再让我们回到网页中,CSS里如果font-family未设置中文字体时,我们知道是根据浏览器默认的字体来显示,找到浏览器对应的设置,你也可以手动修改这些。

1p{font:12px/24px Tahoma;}
2p{font:12px/24px Arial;}

期货超短线以上两种写法按照前面我们所说的规则来说,在同一个系统和浏览器中匹配的是唯一的字体,那么它们的显示还会有区别吗?看看下面Windows系统下部分浏览器的测试结果:

分析CSS设置字体到网站字体解析渲染过程

期货超短线仔细看,你会发现IE6,IE8,Chrome,Firefox下文字底部不在同一水平线上的。所以由此得知:英文字体不会影响中文的字形,但会影响其位置。可是…为什么会影响位置呢?我们再来看下网页中的文字的位置到底是怎么被控制的:

分析CSS设置字体到网站字体解析渲染过程

默认的规则是:用行高(line-height)减去内容区(content area)的高度所得到的值一分为二,各放在内容区的上面和下面,但不同浏览器的渲染不同,并且结合上面的测试结果,就算内容区的位置是相同的,文字在内容区的位置还可能不同。

期货超短线而影响文字在内容区的位置的因素有下面几个,也就是说这也不是统一的。

  • 字体类型

  • 排版引擎

  • 浏览器

分享到:
免责声明:各类窍门、技巧未经测试,其可用性请自行鉴别,对使用后产生的一切后果,本站不承担任何责任。
相关栏目
热门网站建设文章

期货超短线