字体渲染

上一篇文章说了freeType移植并编译通过，但是还没有调试并显示字体，今天就讲讲freeType接口的调用。 在调试过程中发现，freeType在解码时对RAM的大小是有要求的，否则会堆栈溢出，这里我们将MCIMX6Y2xxx05_ram.icf文件中的堆空间设置为0x60000,正好是384K，此条件下，调用freeType接口是没有问题的。 创建一个字体的结构体，方便gui进行调用，因为是基于C语言的，为了方便gui后期能够打包为lib库，这里使用回调函数的方式来调用字体渲染函数。 typedef struct { U16 Flags; //取值参考 GUI_TTF_MAP_FILE_MEMERY_MODE GUI_DISPCHAR * pfDispChar; //绘制字形的函数 GUI_GETCHARDISTX * pfGetCharDistX; //获取字形所占的像素个数 GUI_GETFONTINFO * pfGetFontInfo; //获取字号大小，及字体的显示方式 union{ const GUI_TTF_DATA *pTtfData; const GUI_TTF_FONT_MAP *pMap; }p; U8 height; U8 bold;//加粗，0-不加粗 U8 itailc; //斜体 void *matrix; }GUI_FONT; 上篇文章提到

1.字形度量 顾名思义，字形度量是对应每一个字形的特定距离，以此描述如何对文本排版。 通常一个字形有两个度量集：用来排版水平文本排列的字形（拉丁文、西里尔文、阿拉伯文、希伯来文等等）和用来排版垂直文本排列的字形（中文、日文、韩文等等）。 要注意的是只有很少的字体格式提供了垂直度量。你可以使用宏FT_HAS_VERTICAL测试某个给出的face对象是否包含垂直度量，当结果为真时表示包含垂直度量。 每个的字形度量都可以先装载字形到face的字形槽，然后通过face->glyph->metrics结构访问，其类型为FT_Glyph_Metrics。我们将在下面详细讨论它，现在，我们只关注该结构包含如下的字段： Width 这是字形图像的边框的宽度。它与排列方向无关。 Height 这是字形图像的边框的高度。它与排列方向无关。千万不要把它和FT_Size_Metrics的height字段混淆。 horiBearingX 用于水平文本排列，这是从当前光标位置到字形图像最左边的边界的水平距离。 horiBearingY 用于水平文本排列，这是从当前光标位置（位于基线）到字形图像最上边的边界的水平距离。 horiAdvance 用于水平文本排列，当字形作为字符串的一部分被绘制时，这用来增加笔位置的水平距离。 vertBearingX 用于垂直文本排列

转自：http://blog.csdn.net/hgl868/article/details/7254687 1.字形度量 顾名思义，字形度量是对应每一个字形的特定距离，以此描述如何对文本排版。 通常一个字形有两个度量集：用来排版水平文本排列的字形（拉丁文、西里尔文、阿拉伯文、希伯来文等等）和用来排版垂直文本排列的字形（中文、日文、韩文等等）。 要注意的是只有很少的字体格式提供了垂直度量。你可以使用宏FT_HAS_VERTICAL测试某个给出的face对象是否包含垂直度量，当结果为真时表示包含垂直度量。 每个的字形度量都可以先装载字形到face的字形槽，然后通过face->glyph->metrics结构访问，其类型为FT_Glyph_Metrics。我们将在下面详细讨论它，现在，我们只关注该结构包含如下的字段： Width 这是字形图像的边框的宽度。它与排列方向无关。 Height 这是字形图像的边框的高度。它与排列方向无关。千万不要把它和FT_Size_Metrics的height字段混淆。 horiBearingX 用于水平文本排列，这是从当前光标位置到字形图像最左边的边界的水平距离。 horiBearingY 用于水平文本排列，这是从当前光标位置（位于基线）到字形图像最上边的边界的水平距离。 horiAdvance 用于水平文本排列，当字形作为字符串的一部分被绘制时

文本编辑器, 字体, Font Family, 原来是4组, 删除, 改为DejaVu Sans Mono 这个字体是pycharm里的默认字体, 渲染空格也是正确的, 如果用monospace字体, 虽然空格宽度大了, 但渲染空格时是不对的. 来源： CSDN 作者： landian004 链接： https://blog.csdn.net/landian004/article/details/104043359

好的设计应该简单，而且始终可以提供最佳性能。 一、优化原因 谷歌的数据表明，一个有10条数据0.4秒可以加载完的页面，在变成30条数据加载时间为0.9秒后，流量和广告收入减少了20%。当谷歌地图的首页文件大小从100kb减少到70~80kb时，流量在第一周涨了10%，接下来的三周涨了25%。 腾讯的前端工程师根据长期的数据监控也发现页面的一秒钟延迟会造成9.4%的PV的下降，8.3%跳出率的增加以及3.5%转化率的下降。 可以看出，性能优化商业上来说很重要。 但是，更重要的还是屏幕前我们的用户，让用户在使用产品时有更快更舒适的浏览体验，这算是一种前端工程师的自我修养。 二、优化目标 以让用户满意为目标呈现网页是终极的目标。当然页面速度要快，不过快只是构成满意的一个因素。 我们使用Google团队提出的RAIL模型作为优化的目标。 目前国内包括腾讯在内的团队都在使用这个评估方案。 Response:100ms内响应； Animation:10ms内生成一帧； Idle:最大程度增加空闲时间； Load：1000ms内呈现内容； 1）以用户为中心 User-centered 用户是性能优化的中心，一切性能优化皆是为了用户获得更佳的体验。 那么，我们的用户如何评价性能延迟： 0-16ms 用户可以感知每秒渲染 60 帧的平滑动画转场。也就是每帧 16 毫秒 留给应用大约 10

1. 性能设计 在我们的项目中，我们每天都会和设计师和产品负责人讨论关于平衡美观和性能的问题。对于我们自己的网站，这样做是很简单的。简言之，我们认为好的用户体验从快速的内容传输开始，也就意味着 性能 > 美观。 好的内容、布局、图片和交互是吸引用户的重要因素。这每个因素都会影响页面的加载时间和终端用户体验。每一步我们都在探讨如何在获得好的用户体验和保证设计美感的同时，最小化对性能的影响。 内容优先 我们想要把核心内容尽快地呈现给用户，意味着我们要处理好基本的 HTML 和 CSS。每个页面都应该达到基本的目的：传递信息。JS、CSS、网页字体、图片、网站分析等优化都是位居于核心内容之下的。 可控性 给理想网站定义了标准后，我们总结出：要想达到预期效果，就要能对网站各方面的控制都游刃有余。我们选择构建自己的静态站点生成器，包括资源传输，并且由我们自己操控。 静态站点生成器 我们用 Node.js 实现了静态站点生成器。它是采用带有简短 JSON 页面描述标签的 Markdown 文件来生成整个网站结构和它所有的资源。为了包括特殊的页面脚本，也可以附带一个 HTML 文件。以下是一个简单化的描述标签和 markdown 文件，用于博客的发布，用它来生成真正的 HTML。 JSON 描述标签: markdown 文件: 图片传输 平均一个 2406kb 的网页中 1535kb 是图片

18号字体 18号字体放大15倍 基于sdf渲染字体放大15倍 相比常规的渲染方式，基于ＳＤＦ渲染文字可无限放大并保持清晰，几乎没有开销就可实现描边，发光，抗锯齿等效果．且它只需要很小的纹理缓存ＳＤＦ信息即可． 所谓ＳＤＦ（Signed-distance-field），就是将每个像素存储的颜色值换成距离文字轮廓最短距离，当像素在文字内，则用正数距离，在文字外则用负数距离，文字轮廓距离则是零，因此只要判断像素如果是正数，就输出颜色，否则丢弃颜色即可． 该技术由 Valve 开发 半条命2 时提出，当时主要用于渲染图片，之后被广泛用于其他技术中，用于渲染字体仅是其中一项． 相对比常规的渲染方式，除了片段着色器的差别外，主要差别在于生成的纹理缓存． 常规渲染方式的纹理缓存大致如下： 一个纹理只存一个字号 一个纹理存储多个字号 它们都有一个共同点：每个像素存储的信息都是颜色．而ｓｄｆ每个像素存储的是距离，因此它能提供矢量信息．(怎么存储多个字体, 可查看 合并图集 ) ＳＤＦ纹理 ＳＤＦ渲染字体在网上有很多资料，但我翻遍了百度，只找到一个可运行的文字ＳＤＦ生成工具，在我反复调试后，发现这个工具生成的ＳＤＦ是错的，迫不得已我只好花２０分钟重写了一个，算法也简单，无非就是暴搜+阀值控制，生成4096*4096的SDF，i7 7700k大概需要1分钟. 描边 内发光 外发光 效果 来源：

使用Vue进行商品购买列表数量加减时，总价的计算总是很慢，还以为是Vue性能问题，放弃在插值表达式中进行计算改为在自定义函数中算好总价后再直接赋值，问题还是没解决 起个demo发现一切正常，最后才发现是样式问题，总价那里用了-webkit-background-clip实现镂空渐变色字体，需要将color设置为transparent来配合使用，把color设置为黑色后发现其实总价瞬间就渲染完成，但镂空字体要卡顿一下才发生变化 来源： https://www.cnblogs.com/Grani/p/11605740.html

早在5月份，Red Hat的Matthias Clasen共同制定了计划，在近年来相当陈旧的情况下，对Pango布局引擎库进行了一些改进。 这项工作将随着Pango1.44版本的发布而实现，看起来它很快就会有新的特性出现。 Clasen今天就他的Pango hacking分享了一个更新。 一些改进包括弃用PangoScript以支持GUnicodeScript，从PangoFont对象提供对底层Harfbuzz字体对象的访问，以避免将来出现冗余API，减少对FreeType的依赖，现在利用Harfbuzz在所有平台上进行字体整形 ，并提供无提示的渲染支持。 与此Pango工作同步，Clasen还在Cairo中添加了用于未着色渲染的子像素定位。 本文转自： https://www.linuxprobe.com/gnome-pango-linux.html 来源： https://www.cnblogs.com/it-artical/p/11325172.html