• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >div/css > 浏览器渲染文本过程分析

浏览器渲染文本过程分析

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-06-02

本文主要包含浏览器文本模式,浏览器的文本栏,ie浏览器文本模式,360浏览器文本模式,ie浏览器文本模式杂项等相关知识,佚名 希望在学习及工作中可以帮助到您
浏览器是我们最常用的软件之一,文本又是网页中最主要的元素,在浏览器显示文本的过程中有许多有趣的细节,值得展开来讲讲,或许能减少一些误解。这是一个比较粗略的,概括性的介绍,尽可能不涉及过多的技术细节和具体实现,而立足于给 Web 开发者和设计师提供一些正确的概念。
下面的介绍主要根据我对 WebKit 和 Gecko (Firefox) 的印象来谈,其他的浏览器也大致相同,如有阙漏之处欢迎指出。

当浏览器收到来自 Web 服务器的网页数据之后,第一步是要把它解码成可以阅读的文本,因为历史原因,不同区域和语言的网页可能会使用不同的编码方式,而浏览器判断编码主要是依据以下方法:
1.Web 服务器返回的 HTTP 头中的 Content-Type: text/html; charset= 信息,这一般有最高的优先级;
2.网页本身 meta header 中的 Content-Type 信息的 charset 部分,对于 HTTP 头未指定编码或者本地文件,一般是这么判断;
3.假如前两条都没有找到,浏览器菜单里一般允许用户强制指定编码;
4.部分浏览器 (比如 Firefox) 可以选择编码自动检测功能,使用基于统计的方法判断未定编码。

编码确定后,网页就被解码成了 Unicode 字符流,可以进行进一步的处理,比如 HTML 解析了,不过我们这里跳过 HTML/XML 解析的细节,单讲得到了解析后的文本元素之后该怎么处理。
因为我们得到的文本可能是很多种语言混杂的,里面可能有中文、有英文,它们可能要用不同的字体显示;也可能有阿拉伯文、希伯来文这种从右到左书写的文字;也有可能涉及印度系文字这样涉及复杂布局规则的文字;另外,还可能有网页内自己指定的文本语言,比如 <span lang="jp">日本语</span> 这样的标记,使得日文汉字可以使用日文字体显示 (因为 Han Unification 导致这些汉字和中文里的汉字使用同样的代码点,尽管很多写法不同),"lang" 属性也可以在 HTTP 头、<meta> 或者 <html> 出现,用于标记整个文档的全局语言,通常这是一种好的习惯,方便浏览器进行字体匹配。
为了统一处理所有这些复杂的情况,我们要将文本分为由不同语言组成的小段,在有的文本布局引擎里,这个步骤称为“itemize”,分解后的文本段常被称作“text run”,但是具体划分的规则可能根据不同的引擎有所区别,比如 HarfBuzz 和 ICU 一般是根据要使用的不同排版类来划分 (常称作“shaper”),比如英语和法语可能使用同一个 shaper 排版,那么相邻的英语和法语文本就会划分到同一个 run 里,而希伯来文需要另一个 shaper,就划分到它自己的 run 里,以 HarfBuzz 为例,它有这样一些 shaper:
通用的 (适用于中文、英文等等大多数布局规则简单的语言)
阿拉伯文
希伯来文
印度系文字
高棉文
缅文
谚文

不少浏览器还会在这个划分下面,在确定具体使用的字体之后,根据使用字体的不同划分更细的 run,这种 run 可能称作“SimpleTextRun”,每个都会使用和相邻不同的字体,最后把它们逐一交给 shaper 进行排版得到要绘制的字形,这样一来,shaper 的工作就被简化为在确定的语言、确定的字体下排版确定的文本,生成对应的字形和它们应该放置的位置、占用的空间。下面先详细说说确定字体的步骤。
说到字体,首先必须提到的就是 CSS 里的 font 和 font-family 等规则。比如这样的规则:

3.然后列出中文字体,原则相同,多个平台共有的字体应该尽量放在后边,独有的字体放在前面,还需要照顾到 Mac OS X/Linux 下一般用户习惯用(细)黑体作为默认字体,Windows 下习惯以宋体作为默认字体的情况,比如 STXihei, SimSun 这样的写法比较常见,如果写作 SimSun, STXihei

您可能想查找下面的文章:

  • 浏览器渲染文本过程分析

相关文章

  • 2017-06-02页面内嵌样式表中使用url(), 出现页面多次载入问题解决
  • 2017-06-02基于CSS实现的4级下拉菜单效果代码
  • 2017-06-02区别div和span、relative和absolute、display和visibility
  • 2017-06-02不定宽高的文字在div中垂直居中实现方法
  • 2017-06-02固定宽高且DIV绝对居中实现思路及示例
  • 2017-06-02div 背景透明度 如何设置一个div的背景透明度
  • 2017-06-02SPAN和DIV,Class与ID的区别汇总
  • 2017-06-02div+css实现蓝色vista风格css导航菜单效果
  • 2017-06-02css实现div自动添加滚动条(图片或文字等超出时显示)
  • 2017-08-31EasyUI入门7 datagrid根据列值设置checkbox的绑定状态

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • div ul li 嵌套后如何解决增加多个li后DIV高度自适应问题
    • 学习DIV+CSS网页布局之混合布局
    • Div+CSS仿微信公众平台登录页面
    • div+css实现圆角即网页上常用的圆角效果
    • firefox中div+css的外层背景色不见的解决方法
    • 使用绝对定位+负外边距让DIV层水平垂直居中页面
    • 仿网易nec首页动画效果(实现原理+代码)
    • HTML与CSS练习——js选择器
    • css,html几个知识点
    • div+css相对定位和绝对定位用法实例详解

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有