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

Font Rending 的 Hint 机制对排版的影响相关推荐

  1. Cassandra1.2文档学习(12)—— hint机制

    参考文档:http://www.datastax.com/documentation/cassandra/1.2/webhelp/index.html#cassandra/dml/dml_about_ ...

  2. ckc交易什么意思_股票熔断是什么意思啊?熔断机制对股民的影响有那些

    股票熔断是什么意思啊?熔断机制对股民的影响有那些 股票熔断机制出现在大家眼前,绝大部分投资者都体会来到它的震撼人心,股票熔断机制来的快去的也快.那么,股票熔断代表什么意思,熔断机制对投资者是好还是坏呢 ...

  3. iOS开发事件分发机制—响应链—手势影响

    1.提纲 什么是iOS的事件分发机制 ? 一个事件UIEvent又是如何响应的? 手势对于响应链有何影响? 2.事件分发机制 2.1.来源 以直接触摸事件为例: 当用户一个手指触摸屏幕是会生成一个UI ...

  4. normandie出错重试与缓存机制对交互的影响,开发者注意

    用户通过交互和产品对话,好的交互非常重要. "错误提醒"在产品交互中也是非常重要的一部分,所以某些情况下app的错误提醒不能只依赖框架的回调. 如果错误提醒只依赖框架回调,在nor ...

  5. android hint属性含义,android:hint属性对TextView的影响

    近期看到同事写的一段代码,非常easy吧就是: android:layout_width="wrap_content" android:layout_height="wr ...

  6. 【Kafka】Kafka的Rebalance机制可能造成的影响及解决方案

    一.kafka的rebalance机制 在Kafka中,当有新消费者加入或者订阅的Topic数发生变化时,会触发Rebalance(再均衡:在同一个消费者组当中,分区的所有权从一个消费者转移到另外一个 ...

  7. 前端笔记(6)css布局机制,浮动,清除浮动,图片格式,ps切片工具及插件

    css样式表/层叠样式表(4) css布局的三种机制 浮动 浮动(float)的扩展 清除浮动 额外标签法(隔墙法) 父级添加overflow属性方法 使用after伪元素清除浮动 使用双伪元素清除浮 ...

  8. 基于 CoreText 的排版引擎:进阶

    基于 CoreText 的排版引擎:进阶 JUN 27TH, 2015 版权说明 原创文章,转载请保留以下信息: 本文节选自我的图书:<iOS 开发进阶 >. 本文涉及的 Demo 工程在 ...

  9. fontdrvhost占用高_迄今为止有关Windows 10安全机制最深入的分析

    概要 微软在北京时间2015年1月22日,公布了其新一代操作系统Windows 10的新技术预览版,并在随后的北京时间1月24日向公众开放了该预览版本的下载(Build:9926).在这个新的Wind ...

最新文章

  1. 实现后台检控并关闭进程的批处理
  2. JVM内幕:Java虚拟机详解
  3. HDU 5389 Zero Escape
  4. 论文盘点:基于图卷积GNN的多目标跟踪算法解析
  5. server 2008 IIS 7下asp.net开发环境部署及配置
  6. 分布式理论(七):一致性协议之 ZAB
  7. linux服务器管理公司用户,在Linux服务器Jenkins中管理用户和角色的方法
  8. table表头固定4种方法_在常见的3种工资条场景中,教你4种批量打印工资条的方法...
  9. OpenShift 4 之Service Mesh教程(2)- 用Kiali监控微服务运行
  10. PHP年龄计算 取得两个时间戳相差的年龄年月日显示
  11. Android 实现图片画画板
  12. GIT安装与使用记录_已迁移
  13. SVN客户端日志无法显示的解决
  14. 使用 软件 vscode 对比文件内容的方法
  15. 机器学习——周志华(1)
  16. GoLang之取地址符、指针
  17. 开发用的到java数组吗_java数组
  18. dw自动滚动图片_Dreamweaver实现滚动图片文字
  19. 小程序源码:全新独立后台修复登录在线答题
  20. 举个栗子!Tableau 技巧(93):用 热图标记 地图或散点图

热门文章

  1. 同步、异步、阻塞、非阻塞、BIO、NIO、AIO
  2. Leetcode 107. 二叉树的层次遍历 II 解题思路及C++实现
  3. CC2530-Zstack 协议栈MAC层中的mac_rx.c程序解读
  4. 解决mysql“Access denied for user root@localhost”
  5. pip安装ipython_Python -- 关于pip安装Ipython
  6. Spring Security 应用详解 集成SpringBoot —— 简单入门
  7. 块级作用域(es5没闭包-有闭包-let对比)
  8. spring中的依赖注入——构造函数注入、set方法注入( 更常用的方式)、复杂类型的注入/集合类型的注入
  9. c++ 用指针将函数作为参数传参
  10. 将excel的数据导入到mysql数据表