Font Rending 的 Hint 机制对排版的影响

                    

Font Rending 的 Hint 机制对排版的影响【转】

在设计一种 Font 时,设计者使用的是一个抽象的单位,叫做 EM,来源于大写 M 的宽度(通常英文字体中大写 M 的宽度最大)。EM 即不同于在屏幕显示时用的像素(Pixel)也不同于打印时用的点(Point; 1/72 inch),他是一种相对单位,随着字体和字号的不同变化。通常对于一个 12 号的字体一个 EM 的长度等于 12pt。

实际设计时会将 EM 分成更小的单位,一般成为 EM Unit,TrueType 中一般是 2048 Units = 1 EM,Type1 中一般是 1000 Unit = 1EM。假设在我们设计的字体中字母 a 的宽度为 998 Units,如果我们用 12 号字显示它,我们得到的字宽为 12 * 998 / 2048 = 5.84765625 Point。如果我们将这个字打印到纸上,在 2000 dpi 的打印机上我们需要放置 5.84765625 / 72 * 2000 = 162.434895833 个 Dot(可以将 Dot 理解成墨滴)。而实际上我们不可能得到 0.43 个 Dot,我们只能用 162 个点来描述字母 a。如果我们将同样的一个字母显示在屏幕上,一般来说屏幕多为 72dpi 或 96dpi,以 96dpi 为例也字母 a 需要 5.84765625 / 72 * 96 = 7.796875 个像素来显示,实际上我们得到的是 8 个。在排版时我们需要根据一个字符的宽度来计算下一个字符的位置,这里的问题是:由于输出设备的限制我们永远也不可能将字母放在理论中的位置,设备的分辨率越低结果偏差的越大。反锯齿能够在一定程度上缓解这个问题,但不总是能的到好的结果。

另外在字体渲染时有时候会出现这样的问题,字母 H 的两个竖笔画不一样粗,这通常跟字母在屏幕上的位置有关,为了解决类似的问题,字体设计时都会提供一些额外的信息来根据输出设备的分辨率调整笔画。这就是 Hint 机制,或者叫 Grid-Fitting。由于 Hint 的存在,同一个字母在不同的设备上输出会有不同的宽度,这对排版有很大影响。所见即所得的排版要求我们在屏幕和纸上有相同的排版结果。如果我们按照理论值排版,在屏幕上我们可能会看到不美观的输出,参见截图。如果我们按照屏幕 Fitting 值排版则不能够最大化的利用字体设计师的工作,他们仔细调整过的字宽不能在纸上还原。

下图是个程序示例(Java),展示了不同的渲染方式会得到不同的字体宽度和不同的渲染结果。图中左右半部分分别是没有使用反锯齿(左)和使用反锯齿(右)的效果,而图中上下半部分分别是使用整数坐标(上)和使用分数坐标(下)的效果。

在图上可以看出使用分数坐标的 M 具有不一致的间距。所有的这些都对实现“所见即所得”的排版软件带来了很大困难,在 FreeType 的主页上有一些有关的文章,参见这里。其中提出了两种解决方案:

There are two ways to achieve this: either use the scaled and unhinted glyph metrics when laying out text both in the rendering and printing processes, or simply use whatever metrics you want and store them with the text in order to get sure they are printed the same on all devices (the latter being probably the best solution, as it also enables font substitution without breaking text layouts).

为了确定主流排版/字处理软件是如何解决这个问题的,我使用同样的基准文档(Tahoma 12pt 大写 M)做了测试。在 MS Word 2007 & MS Word 2003 中的结果如下:

可以看出 MS Word 的渲染结果也有不一致的间距,另外每个 M 字符都完全相同,这意味着 MS Word 是将一个字符渲染出来,然后不断的贴图。这也是常见的做法,优点是速度快,不需要在每个位置重复渲染。

在 Adobe InDesign 中以高质量显示的结果如下:

可以看出 InDesign 的渲染结果也有不一致的间距,但是明显 Adobe 具有更好的反锯齿算法,视觉上很难发现不同,但放大后还是能够看得比较清楚。另外 InDesign 的每个 M 字符都不相同,也就是说 InDesign 是对每个字符单独进行渲染,难怪效果会好。

结论

1. 使用设备无关的(高精度的)方式进行排版.

2. 显示效果不好时,使用每个字符单独渲染的策略.

3. 有些时候需要根据输出设备的限制进行 Grid Fitting,比如在 AFP 中对字符的位置/宽度有很大限制.

转载于:https://www.cnblogs.com/songtzu/p/3542301.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/258953.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《SQL初学者指南(第2版)》——2.4 指定列

本节书摘来自异步社区出版社《SQL初学者指南(第2版)》一书中的第2章,第2.4节,作者:【美】Larry Rockoff,更多章节内容可以访问云栖社区“异步社区”公众号查看。 2.4 指定列 到目前为止,我们只…

python从文件中提取特定文本_使用Python从HTML文件中提取文本

我发现最好的一段代码用于提取文本,而不需要javascript或不需要的东西:import urllibfrom bs4 import BeautifulSoupurl "http://news.bbc.co.uk/2/hi/health/2284783.stm"html urllib.urlopen(url).read()soup BeautifulSoup(html)# kill …

mutable、volatile的使用

本文转载自http://blog.csdn.net/tht2009/article/details/6920511 (1)mutable 在C中,mutable是为了突破const的限制而设置的。被mutable修饰的变量,将永远处于可变的状态,即使在一个const函数中,甚至结构体变量或者类对象为const…

文本框点击后文字消失总结

1.文本框显示默认文字&#xff1a; <textarea>白鸽男孩</textarea> <textarea>白鸽男孩</textarea>    2.鼠标点击文本框&#xff0c;默认文字消失&#xff1a; <textarea οnfοcus”if(value’白鸽男孩’) {value’ ‘}”>白鸽男孩</text…

[裴礼文数学分析中的典型问题与方法习题参考解答]4.5.8

需要全部的解答, 请 http://www.cnblogs.com/zhangzujin/p/3527416.html 设 $f(x)$ 在 $[a,\infty)$ 上可微; 且 $x\to\infty$ 时, $f(x)$ 单调递增趋于 $\infty$, 则 $$\bex \int_a^\infty \sin f(x)\rd x,\quad \int_a^\infty \cos f(x)\rd x \eex$$ 都收敛. 证明: 由 $$\be…

《PowerShell V3——SQL Server 2012数据库自动化运维权威指南》——2.13 创建视图...

本节书摘来自异步社区出版社《PowerShell V3—SQL Server 2012数据库自动化运维权威指南》一书中的第2章&#xff0c;第2.13节&#xff0c;作者&#xff1a;【加拿大】Donabel Santos&#xff0c;更多章节内容可以访问云栖社区“异步社区”公众号查看。 2.13 创建视图 本方案展…

python刷抖音_用Python生成抖音字符视频!

抖音字符视频在去年火过一段时间。 反正我是始终忘不了那段极乐净土的音乐... 这一次自己也来实现一波&#xff0c;做一个字符视频出来。 主要用到的库有cv2&#xff0c;pillow库。 原视频如下&#xff0c;直接抖音下载的&#xff0c;妥妥的水印。 不过并不影响本次的操作。 / …

变长参数

转载自&#xff1a;http://blog.csdn.net/tht2009/article/details/7019635 变长参数 设计一个参数个数可变、参数类型不定的函数是可能的&#xff0c;最常见的例子是printf函数、scanf函数和高级语言的Format函数。在C/C中&#xff0c;为了通知编译器函数的参数个数和类型可变…

第十七章 我国农业科学技术

农村改革解说&#xff08;专著&#xff09;第十七章 第十七章 我国农业科学技术 1、为什么说科学技术是生产力&#xff1f; 我们说科学技术是生产力&#xff0c;是因为在构成生产力的两个主要因素中&#xff0c;都包含着科学技术在内。 A、生产力中人的因素是同一定的科学技术紧…

《淘宝网开店 拍摄 修图 设计 装修 实战150招》一一1.2 选购镜头时应注意的事项...

本节书摘来自异步社区出版社《淘宝网开店 拍摄 修图 设计 装修 实战150招》一书中的第1章&#xff0c;第1.2节&#xff0c;作者&#xff1a; 葛存山&#xff0c;更多章节内容可以访问云栖社区“异步社区”公众号查看。 1.2 选购镜头时应注意的事项 面对如此之多的镜头&#xf…

OpenCV中的神器Image Watch

Image Watch是在VS2012上使用的一款OpenCV工具&#xff0c;能够实时显示图像和矩阵Mat的内容&#xff0c;跟Matlab很像&#xff0c;方便程序调试&#xff0c;相当好用。跟VS2012配合使用&#xff0c;简直就是一款神器&#xff01;让我一下就爱上它了&#xff01; 下面介绍一些链…

python异步_Python通过Thread实现异步

当long函数耗时较长时&#xff0c;需要程序先向下执行&#xff0c;这就需要异步&#xff0c;改写代码如下&#xff1a; import _thread import time def long(cb): print (long execute) def fun(callback): time.sleep(5) result long end callback(result) _thread.start_ne…

SAM4E单片机之旅——13、LCD之ASF初步

在Atmel Studio 6中&#xff0c;集成了Atmel Software Framework&#xff08;ASF框架&#xff09;。通过它提供的库&#xff0c;可以很快速地完成新的项目。 这次的最终目标使用ASF在LCD上显示出文字“Hello World!”&#xff0c;现阶段目标是点亮LCD的背光&#xff0c;学习目标…

《HTML5与CSS3实战指南》——2.2 基本的HTML5模板

本节书摘来自异步社区《HTML5与CSS3实战指南》一书中的第2章&#xff0c;第2.2节,作者&#xff1a; 【美】Estelle Weyl , Louis Lazaris , Alexis Goldstein 更多章节内容可以访问云栖社区“异步社区”公众号查看。 2.2 基本的HTML5模板 在您学习HTML5和新技术时&#xff0c;您…

c# Message const

typeTMsg packed recordhwnd: HWND; //窗口句柄message: UINT;//消息常量标识符wParam: WPARAM ;// 32位消息的特定附加信息lParam: LPARAM ;// 32位消息的特定附加信息time: DWORD;//消息创建时的时间pt: TPoint; //消息创建时的鼠标位置end ; 消息中有什么&#xff1f;是否觉…

OpenCV坐标体系的初步认识

实验基础本次实验通过一个简短的例子&#xff0c;主要来说明下面4个问题&#xff1a; 1. 坐标体系中的零点坐标为图片的左上角&#xff0c;X轴为图像矩形的上面那条水平线&#xff1b;Y轴为图像矩形左边的那条垂直线。该坐标体系在诸如结构体Mat,Rect,Point中都是适用的。&…

python爬取知乎live_Python爬虫 - 简单抓取百度指数

前言有点忙&#xff0c;没空写东西&#xff0c;这是之前写的&#xff0c;加了些配图而已 这次要爬的网站是百度指数 正文 一、分析 打开网站(百度指数)&#xff0c;呈现出来是这样的 如果搜索的话就需要登陆了&#xff0c;如果没有什么特别频繁的请求的话&#xff0c;直接登陆复…

在Visual Studio上开发Node.js程序

在Visual Studio上开发Node.js程序 原文:在Visual Studio上开发Node.js程序【题外话】 最近准备用Node.js做些东西&#xff0c;于是找找看能否有Visual Studio上的插件以方便开发。结果还真找到了一个&#xff0c;来自微软的Node.js Tools for Visual Studio&#xff08;NTVS&a…

Oracle ASM 翻译系列第十一弹:高级知识 Offline or drop?

Offline or drop? 当一个ASM磁盘不可用时&#xff0c;ASM会把它从磁盘组里移除&#xff0c;对吗&#xff1f;要看情况&#xff0c;通常取决于ASM版本和磁盘组的冗余级别。因为一个external冗余的磁盘组会直接被dismount&#xff0c;所以主要关注normal和high冗余磁盘组的情况。…

net与树莓派的情缘-安装与卸载MySql(五)

安装MySql sudo apt-get install mysql-server 删除 mysql sudo apt-get autoremove --purge mysql-server-5.0sudo apt-get remove mysql-serversudo apt-get autoremove mysql-serversudo apt-get remove mysql-common //这个很重要上面的其实有一些是多余的。 清理残留数据 …