浅谈字体渲染

由于某个需求,我需要了解一下关于字体渲染相关知识,以前没有接触过这个,所以启蒙就只能靠Google了。我先后找到了《认识字体渲染》和《一笔一划间蕴藏的学问 浅谈计算机字体》,有一点明白了,但只是看文章感觉很缥缈。那么我就来根据我自己的理解来实现和总结一下字体的一些概念。

字体种类

常用的是点阵字体和矢量字体,具体见Computer_font

点阵字体:

后缀名一般为fon或者是C语言头文件形式。看讲字体渲染文章都是吐槽的,但是没有人以身边例子说明一下。它的英语原型为Bitmap fonts,直译过来就是位图字体。所有的字都是一个个的图片。电脑上虽然已经不使用了,但是在其它地方还广泛使用。

它的应用场合有:

1.Linux字符界面

2.Windows启动过程中的字符显示

3.Android的Recovery模式的字符显示 见《Android的Recovery中font_10x10.h字库文件制作

4.路边商家门头上的滚动LED显示屏

5.工业中常用的12864点阵显示屏

矢量字体:

后缀名一般为ttf。由于点阵字体不方便缩放的特点,就有了矢量字体。但是也会有一些其它问题需要解决,如果锯齿现象。

字体优化

字体的优化是一般包括反锯齿和平滑。这里以比较常用的Win7系统中的雅黑字体来说明。结合Windows的“相对完美”的显示效果以及Linux的“可订制性强”的特点来实验出同一字体在不同的渲染策略中将会呈现什么样的显示效果。

这张Win7系统桌面的部分截图显示的雅黑字体的Windows风格的最佳效果了。如果想要看到反锯齿和平滑的不同参数组合带来的最直接的感受就要到Linux系统下来调整看看了。调试不同的渲染效果一般采用Ubuntu tweak工具来设置调试:

参数中英对照

Font hinting(微调/平滑):

1.No hinting.   无微调

2.Basic        一般

3.Moterate     适中

4.Maximum    最大

Antialiasing(反锯齿_也指渲染策略):

1.No antialiasing        无边缘平滑

2.Grayscale antialiasing  灰度边缘平滑

3.Subpixel antialiasing   次/亚像素平滑

通过调节对比Windows上是Hinting:Maximum和Antialiasing:subpixel antialiasing是达到最好的效果的。

这里也同时看看不现组合带来的不同效果:

极端组合效果:

个人评价:再好的字体不使用好的渲染也是渣。

个人评价:Hinting作用比较大,效果明显。

个人评价:字体模糊/发虚等问题的根本。

个人评价:次像素是目前各个操作系统都在使用的方式,Hinting对字体的显示效果有很大的影响。

小结:字体最终的显示效果和字体的类型以及优化程度同时有很大的关系。是向以清晰为目的的Windows看齐还是以真实为效果的iOS/Android/Ubuntu看齐就要因地制宜了。在万恶的1366x768以及低PPI上显示器上我会选择前者,因为后者真心就是一坨。在今后的Retina显示屏会有第三个选项选择,那就是不再使用次像素反锯齿了。另:有些知识过了很长时间会被串起来的。

浅谈字体渲染,布布扣,bubuko.com

时间: 2024-11-23 13:57:47

浅谈字体渲染的相关文章

Unity3D 开发之shader教程(浅谈GPU渲染入门)

这篇随笔,就不按照各种专业的解释来描述了,完全看自己发挥吧,写到哪儿算哪儿.若是哪里有说的不对的地方,请各位看官直说无妨! 说到游戏研发,就不可避免会提到图形学,图形学里面细去研究,就会牵涉到各种各样的数学知识,向量,矩阵之类的!而到这儿,咱们先开始从shader谈起,什么是shader?咱们通常说写个shader,其实也就是写了一个执行某种功能的程序,跟你写个普通的程序原理上说一样的,而不同之处在于,shader是写个GPU执行的,说到GPU执行,那么就得谈到3D游戏里面的那些人物啊,花鸟啊,

Unity3D 开发之shader教程(浅谈GPU渲染之shader language概述)

尊重他人智慧成果,欢迎转载,请注明作者 心若透明 地址  http://www.cnblogs.com/ubanck/p/4110618.html 在上一篇博客里,大致讲解了一下3D渲染的原理,即从一个简单的模型到渲染到屏幕的过程!其中提到了重要的坐标变换方式,说的不够清楚!今天来谈谈shader语言的执行过程 从硬件上讲,GPU内部有顶点着色器与片段着色器,从渲染管线来看,顶点着色器控制这顶点的坐标转换过程,片段着色器控制像素的颜色计算过程.顶点着色器将顶点转换完成,输入到片段着色器进行处理(

图标字体化浅谈[转]

在做手机端Web App项目中,经常会遇到小图标在手机上显示比较模糊的问题,经过实践发现了一种比较好的解决方案,图标字体化.在微社区项目中,有很多小的Icon(图标),如分享.回复.赞.返回.话题.访问.箭头等,这些Icon(图标)一般都是纯色的.开始制作时考虑用双倍大小的Sprite图,通过CSS样式设置只显示二分之一尺寸,这样在Retina屏上显示的大小是正常的,一旦放大屏幕后图标又变得模糊不清,测试的效果不是很理想,后来又考虑多套图标适配方案.SVG矢量图等,都因为种种原因放弃掉了(如多套

图标字体化浅谈

在做手机端Web App项目中,经常会遇到小图标在手机上显示比较模糊的问题,经过实践发现了一种比较好的解决方案,图标字体化.在微社区项目中,有很多小的Icon(图标),如分享.回复.赞.返回.话题.访问.箭头等,这些Icon(图标)一般都是纯色的.开始制作时考虑用双倍大小的Sprite图,通过CSS样式设置只显示二分之一尺寸,这样在Retina屏上显示的大小是正常的,一旦放大屏幕后图标又变得模糊不清,测试的效果不是很理想,后来又考虑多套图标适配方案.SVG矢量图等,都因为种种原因放弃掉了(如多套

浅谈设置字体大小

浅谈设置字体大小 前言 如果设置字体用的是[UIFontsystemFontOfSize:20.0];这种方式 看一下文档会发现这里的后边的字体的参数单位是point即pt 那么如果是UI设计师给我们的标注也是pt为单位的话直接设置就好(有一个基准,别的机型做相应的增量处理),如果是给我们的标注是px(像素)的话,我们该要怎么写呢 举个例子 比如说是iPhone6的机型(这里暗含所有的scale为2的机型),字体30px 那么设置字体的时候写多少合适呢? 见到网上给出了一个公式是px ÷ 96

转:浅谈CSS在前端优化中一些值得注意的关键点

前端优化工作中要考虑的元素多种多样,而合理地使用CSS脚本可以在很大程度上优化页面的加载性能,以下我们就来浅谈CSS在前端优化中一些值得注意的关键点: 当谈到Web的“高性能”时,很多人想到的是页面加载时间,但其实性能不仅仅是指加载时间,还包括浏览器性能.网络性能.开发效率.在Web前端开发中,性能是一个非常重要的需要考虑的点.本文将介绍一些开发原则和性能准则,这些都是提高Web前端性能的基础. 1. 开发原则 1.1 编写符合当代浏览器性能的代码如果想提高前端性能,就必须理解浏览器的工作原理,

浅谈前端性能优化(移动端)

上一篇讲了PC端的部分:前端性能优化(PC端),这次继续说移动端的.相对于PC端的,移动web浏览器上有一些明显的特点:设备的屏幕小.新特性兼容性较好.支持一些比较新的HTML5和CSS3.需要与Native应用交互等.但移动端可用的CPU资源和网络资源极为有限,因此要做好移动端web上的优化往往需要考虑做更多的事情.首先在移动web的前端页面渲染中,PC的优化规则同样适用,此外针对浏览器也要做一些更细节的优化达到更好的效果.需要注意的是,并不是移动端的优化在PC端不适用,而是由于兼容性的原因,

前端知识 | React Native Animated动画浅谈

在移动开发中,动画能有效的提高用户体验.在 React Native 中,也有相应的 API 供我们做动画.这里着重说一下 Animated 动画库,它可以让我们非常简便的去实现各式各样的动画和交互方式,而且具备很高的性能.Animated 目前只封装了四个可以动画化的组件:View.Text.Image.ScrollView,不过你也可以用 Animated.createAnimatedComponent() 来封装你自己的组件. 话不多说,我们来举个栗子: 步骤拆解 1.创建 Animate

浅谈——页面静态化

现在互联网发展越来越迅速,对网站的性能要求越来越高,也就是如何应对高并发量.像12306需要应付上亿人同时来抢票,淘宝双十一--所以,如何提高网站的性能,是做网站都需要考虑的. 首先网站性能优化的方面有很多:1,使用缓存,最传统的一级二级缓存:2,将服务和数据库分开,使用不同的服务器,分工更加明确,效率更加高:3,分布式,提供多台服务器,利用反向代理服务器nginx进行反向代理,将请求分散开来:4,数据库的读写分离,不同的数据库,将读操作和写操作分开,并实时同步即可:5,分布式缓存,使用memc