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 指定列 到目前为止,我们只…

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

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

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

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

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

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

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

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

OpenCV坐标体系的初步认识

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

在Visual Studio上开发Node.js程序

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

mpls工作原理通俗解释_用这两种方法向最终用户解释NLP模型的工作原理还是不错的...

点击上方关注,All in AI中国上周,我看了一个关于“NLP的实践特性工程”的演讲。主要是关于LIME和SHAP在文本分类可解释性方面是如何工作的。我决定写一篇关于它们的文章,因为它们很有趣、易于使用,而且视觉上很吸引人。所有的机器…

三层架构——配置文件

1、配置文件是什么? 配置文件是随安装程序一起被安装到计算机上的文件,里面存放着安装好的应用程序执行时所须要的參数。 应用程序配置文件是标准的XML文件,XML标记和属性是区分大写和小写的。它能够按须要更改,开发者可使用配置文…

《嵌入式系统开发之道——菜鸟成长日志与项目经理的私房菜》——02-04项目范围(Scope)管理...

本节书摘来异步社区《嵌入式系统开发之道——菜鸟成长日志与项目经理的私房菜》一书中的第2章,第2.4节,作者:邱毅凌,更多章节内容可以访问云栖社区“异步社区”公众号查看 02-04项目范围(Scope)管理 嵌入式…

flex(入门)之timer的使用,键盘,鼠标的监听

package {import flash.display.Shape;import flash.display.Sprite;import flash.events.Event;import flash.events.KeyboardEvent;import flash.events.MouseEvent;import flash.events.TimerEvent;import flash.utils.Timer;import mx.controls.Label;//窗体大小&#xff0…

python 线程超时设置_python 条件变量Condition(36)

文章首发微信公众号,微信搜索:猿说python对于线程与线程之间的交互我们在前面的文章已经介绍了 python 互斥锁Lock / python事件Event , 今天继续介绍一种线程交互方式 – 线程条件变量Condition.一.线程条件变量Condition相关函数介绍acquire() — 线程…

MsWord 操作总结

转自(http://www.cnblogs.com/eye-like/p/4121219.html) Msdn上的word操作api(不过只有英文版,英文差的先闪过) Word2007的API:http://msdn.microsoft.com/en-us/library/bb257531(voffice.12).aspxWord201…

两数之和 python_同一屏幕播放两个视频 视频左右两个画面或视频上下两个画面如何制作...

咱们在网上经常可以看到一些视频画面是可以在同一屏幕播放两个视频,有的是视频左右两个画面或视频上下两个画面这些是如何制作的呢,其实熟悉视频编辑软件的网友应该会比较了解这些操作,好嘞,来,现在就让小编来演示一下…

dlib人脸特征点对齐

前面我们介绍了使用dlib进行人脸检测&#xff0c;下面我们给出如何使用dlib进行人脸特征点检测。我们直接贴出代码。我们的代码包括如下几部分功能&#xff1a; 检测单张图片检测一个视频检测一个camera 先给出代码&#xff1a; #include <dlib/image_processing/frontal_…

《LoadRunner 12七天速成宝典》—第2章2.6节第二个性能测试案例

本节书摘来自异步社区《LoadRunner 12七天速成宝典》一书中的第2章&#xff0c;第2.6节第二个性能测试案例&#xff0c;作者陈霁&#xff0c;更多章节内容可以访问云栖社区“异步社区”公众号查看。 2.6 第二个性能测试案例云云&#xff1a;烤鱼吃得很爽。 恋恋&#xff1a;就…

MongoDB_1

突然想去看下MongoDB的东西&#xff0c;于是有了这篇文章。其实很早以前就看过一些关于NoSql的文章&#xff0c;还记得当时里面有介绍MongoDB的&#xff0c;多瞅了2眼&#xff0c;并且在Window下安装了MongoDB的驱动&#xff0c;小玩了会。今天重新翻出来&#xff0c;没成想在命…

pyqt5从子目录加载qrc文件_实战PyQt5: 045-添加资源文件

添加资源文件在使用PyQt进行图形界面开发的时候不免要用到一些外部资源&#xff0c;比如图片&#xff0c;qss配置文件等。在前面代码中&#xff0c;遇到这类问题&#xff0c;我们使用绝对路径的方式来解决&#xff0c;这种方式&#xff0c;本身有其不方便之处(比如&#xff0c;…

西门子ddc_铁门关西门子两通电动阀VVF42.25-10C+SKD60西

铁门关西门子两通电动阀西SIEMENS/西门子电动温控阀、控制箱、电动蝶阀、电动球阀、超声波热量表、超声波流量计、电磁流量计阀体灰口铸铁 EN-GJL-2502.霍尼韦尔主营&#xff1a;楼宇资料系统、热网自控系统、风机盘管电动两通阀、空气压差开关、水流开关、电动执行器、风阀执行…

JS-键盘事件之方向键移动元素

注意三点&#xff1a; 1&#xff1a;事件名称onkeydown。 2&#xff1a;事件加给document&#xff0c;而非window。 3&#xff1a; 把元素的top&#xff0c;left值分别用offsetTop&#xff0c;offsetLeft来设定。 <!DOCTYPE html> <html><head><meta char…