关闭

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

时间: 2019-01-22阅读: 1262标签: 字体

字体是如何渲染的

解码

  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 是否可用。

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

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

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

渲染

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


影响字体渲染的因素

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

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

serif 和 sans-serif 不总是生效

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

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

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

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


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1862

关闭

css3 文字闪烁效果_html实现文字闪烁代码的多种形式

这篇文章总整理了3种文字闪烁效果,主要使用到css3的animation属性,闪烁效果包括:通过改变透明度来实现文字的渐变闪烁、通过设置text-shadow的值,来实现文字阴影闪烁的效果、利用背景图片或者背景渐变,实现文字颜色的闪烁效果

javascript怎么禁止输入汉字?

JavaScript禁止中文输入可以通过设置输入框的css样式的ime-mode属性来实现。也可以通过控制输入字符来禁止输入中文。.

前端开发你该知道的字体 font-family

小小的字体其实有大大的学问,可能与字体相关的很多知识都偏设计,不过俗话说技多不压身,艺高人胆大,多了解了解总归没错。就 Web 常用的一些字体而言,经常听说的字体类型,大致可以分为这几种

CSS 字体样式

我们学习 HTML 的时候学过一些用于字体加粗、倾斜的标签,但是使用标签来实现的效果肯定没有我们通过 CSS 中的样式来的方便。

vue项目引入外部字体

UI设计图有华文黑体,担心客户端没有该字体,将huawen.ttf字体文件,放入项目中:创建一个font.scss(或font.css)文件:在main.js中引入就可以直接使用了

前端浏览器字体小于12px的解决办法

最近做项目时,UI设计的字体10px,看效果图时发现字体仍然蛮大,改变12px时字体还是那么大,改变到14px时,字体变大了,发现规律,才知道原来浏览器为了让用户字体看的清楚,最小设置为12px。怎么办?设计就是10px?

CSS字体样式属性

font-size:字体大小,说明用于设置字号,属性的值推荐使用像素单位px或者em;font-family:字体用于设置字体类型,网页中常用的字体有宋体、微软雅黑(microsoft yahei)、黑体等。

css实现字体小于12px

大家都知道设置font-size小于12px;的时候,显示都为12px。无法实现更小的字体了,但是面对UI图的时候出现小于10px的字体,第一想到的就是把字体直接作为图片显示到页面

如何设置css中字体大小?

如何设置css中字体大小?下面本篇文章就来给大家介绍一下使用CSS设置字体大小的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

css中导入外部字体不生效的原因是什么?

css中可以使用@font-face引入外部字体,使用@font-face规则,网页设计师再也不必使用的web-safe的字体之一。有时使用@font-face规则引入外部字体不生效是什么原因?

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!