• 字体是如何渲染的?影响字体渲染的因素


    字体是如何渲染的

    解码

    1. Web 服务器返回的 HTTP 头中的 Content-Type: text/html; charset= 信息,这一般有最高的优先级;
    2. 网页本身 meta header 中的 Content-Type 信息的 charset 部分,对于 HTTP 头未指定编码或者本地文件,一般是这么判断;
    3. 假如前两条都没有找到,浏览器菜单里一般允许用户强制指定编码;

    分段

    编码确定后,网页就被解码成了 Unicode 字符流。因为我们得到的文本可能是很多种语言混杂的,里面可能有中文、有英文,它们可能要用不同的字体显示;

    为了统一处理所有这些复杂的情况,我们要将文本分为由不同语言组成的小段,在有的文本布局引擎里,这个步骤称为“itemize”,分解后的文本段常被称作“text run”,但是具体划分的规则可能根据不同的引擎有所区别。

    字体匹配

    分段之后,则要根据设置的不同 font-family 对每一段文字进行字体匹配。这里遵循字体的 fallback 机制。

    fallback 机制:在操作系统介面和网页等现代排版环境下,如果指定用字体 A 来显示某字符 x 但该字体并不支持这个字符(甚至该字体当前不可用),排版引擎通常不会直接放弃,它会根据一个预先记好的列表来尝试寻找能显示字符 x 的字体,如果找到字体 B 能行,那就用字体 B 来显示字符 x。字体 B 就是当前这个情况的 fallback。

    以 font-family: Helvetica, Arial; 为例,Arial 字体就是一种 fallback ,当指定的第一选择字体 Helvetica 不可用时,则尝试去寻找 Arial 是否可用。

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

    首先系统所包含字体不只和系统预装的字体有关,还和系统上安装哪些软件有关,

    • 微软操作系统下,详细的系统和一些软件包含的字体可以查看这个索引:Microsoft typography,
    • Mac 系统可以查看这个索引:List of typefaces included with OS X

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

    渲染

    当确定了字体以后,就可以将文本、字体等等参数一起交给具体的排版引擎,生成字形和位置,然后根据不同的平台调用不同的字体 rasterizer 将字形转换成最后显示在屏幕上的图案,一般浏览器都会选择平台原生的 rasterizer,比如 Mac OS X 下用 Core Graphics,Linux/X11 下用 FreeType,Windows 下用 GDI/DirectWrite 等等。

    广州vi设计http://www.maiqicn.com 办公资源网站大全 https://www.wode007.com

    影响字体渲染的因素

    影响字体的渲染是因素有很多,总的来说:

    • Web页面的 lang, charset 和浏览器设置都会对默认字体产生影响
    • 不同操作系统、不同浏览器都默认中文、英文字体的设置都有区别

    serif 和 sans-serif 不总是生效

    serif 和 sans-serif 不总是生效,这个受到很多因素的影响。

    Web页面的 lang, charset 和浏览器设置都会对默认字体产生影响。

    以 font-family: sans-serif 为例,希望浏览器选择一款非衬线字体展示文字。但是我们可以通过修改浏览器的默认配置来使得 sans-serif 展示一款 serif 字体。

    在 Chrome 的高级设置,自定义字体中,可以进行设置。设置了这个,此时用户代理,也就是浏览器会以用户设置的字体为准。

  • 相关阅读:
    前端开发者进阶之ECMAScript新特性--Object.create
    JS事件:target与currentTarget区别
    30分钟掌握ES6/ES2015核心内容
    百度跨域搜索demo
    <a>标签的SEO优化细节
    jQuery之异步Ajax请求使用
    小tips: zoom和transform:scale的区别
    JSP页面静态化总结之一使用URLRewrite实现url地址伪静态化
    web前端安全机制问题全解析
    【转】Asp.net MVC Comet推送
  • 原文地址:https://www.cnblogs.com/ypppt/p/13684064.html
Copyright © 2020-2023  润新知