Code@Pig Home

喜欢背着一袋Code傻笑的Pig .. 忧美.欢笑.记忆.忘却 .之. 角落

日志

关于我

kasicass

gamecoder@work

文章分类

[FreeType2] 字体绘制入门 (1)

2009-02-25 23:23:38| 分类： gui_FreeType | 标签： |举报 |字号大中小订阅

下载LOFTER 我的照片书 |

=========================================
                 基础篇
=========================================

font family, 一类字体的总称，包括 look, style, serif 等等
font face, font family 中的某一中特定 style，比如：

Fixed                # font family
Fixed:style=Bold     # font face
Fixed:style=Regular # font face

对于同样的 font family，可以有不同的 font file format (文件格式)，比如：OpenType、TrueType。以 TrueType 为例，不同的 font face 保存在不同的文件中，如：arial.ttf(Arial Regular)、ariali.ttf(Arial Italic)。

=====

glyph, character image, 其实就是一个 bitmap, 对应着某个字(字符)。

=====

dpi (dots per inch) 其实就是 pixel per inch，300x600 dpi 意味着每 inch 宽300pixel, 高600pixel。再如，同样 640x480 的分辨率，在15''和17''的显示器上，per pixel 的大小是不一样的。

point, pt, 几号字体，一个绝对大小。1 point = 1/72 inch
pixel size，像素尺寸，特定 dpi 下，同样字号的字体，使用固定大小的像素尺寸。

pixel_size = point_size * resolution / 72

我们常说的 12pt 就是12号字，但要注意，windows上我们说的12pt字，都是 96dpi 条件下的。如：pixel_size = 12 * 96 / 72 = 16，即普通情况下，显示器通过 16x16 pixels 来显示一个字符(汉字)。这里的 16x16 也就是一个 glyph 的 width x height 了。

=====

矢量化字体 (vectorial representation)

字体的每个 glyph 有一个原始的初始大小，叫做 EM size。不同 point 大小的字体，是通过对原始大小的缩放来进行的。

这一节没太懂。- -# TODO

=====

因为要缩放, 所以缩放后, 可能字体变形严重，就不好看了。所以字体中还包括了一些 grid-fitting (hinting) 信息，比如字母 I, T 的'|'竖线应该在正中间等信息。保证缩放后效果不至于失真太严重。

=====

kerning (字距调整), 比如 A 和 V 之间，应该稍微挨近些 AV，才显得好看。
不过方块汉子似乎没有 kerning 的必要了。

=========================================
                 应用篇
=========================================

言归正传，理论基础补完了，来看看如何用 FreeType2 绘制文字。FreeType2 做了什么事情，其实支持读取不同的 font file format，然后生成 glyph(bitmap) 让你可以绘制出字体。

---------------------------------------
FT_Library    library;
FT_Face       face;
FT_GlyphSlot slot;
FT_ULong      text[] = { 0x4e2d, 0x6587, 'a', 'b' }; // 中国ab
int           base_x = 0, base_y = 0;

// 初始化一个 lib，多线程的话，每个线程应拥有自己的一个 lib
FT_Init_FreeType( &library );

// 打开 wqy-zenhei.ttf 文件
FT_New_Face( library, "wqy-zenhei.ttf", 0, &face );

// 参数：face, char_width, char_height, horz_resolution, vert_resolution
//
// 设置字号，这里 char_height, vert_resolution 设置 0，表示
// 沿用 char_width, horz_resolution 的值。这里设置 12pt 字号，96dpi
// 注意 12 * 64，因为 FreeType2 中所有 float 都是通过变换成整数来做的，这
// 里是 26.6 float format，所以 (12 << 6) == 12.0
FT_Set_Char_Size(face, 12*64, 0, 96, 0);

// 加载一个具体的字符的 glyph，注意第三个参数，不同的参数可以得到不同的效果
// 加载之后，face->glyph 就是加载好的字体的信息了(包括bitmap)
FT_Load_Char(face, text[0], FT_LOAD_RENDER);

slot = face->glyph;

// 绘制 slot->bitmap;
for ( y = base_y, q = 0; y < bitmap->rows+base_y; y++, q++ )
{
for ( x = base_x, p = 0; x < bitmap->width+base_x; x++, p++ )
{
    if ( bitmap->pixel_format == FT_PIXEL_MODE_GRAY )
    {
      // bitmap->buffer 是 256-gray map, one byte / pixel
      offset = y*screen_pitch + x;
      index = q*bitmap->pitch + p;
      screen_buffer[offset] = bitmap->buffer[index];
    }
    else
    {
      // bitmap->buffer 是 2-gray map, one bit / pixel
      offset = y*screen_pitch + x;
      index = q*bitmap->pitch + p;
      flag   = bitmap->buffer[index] & (1<<(7-(p%8)));
      screen_buffer[offset] = flag ? BLACK : BGCOLOR;
    }
}
}

// 绘制这个字符后，应该向右走几个像素
base_x += (slot->advance.x / 64);
---------------------------------------

注意上面 bitmap->pixel_format，其告知了 bitmap->buffer 中信息的格式。对于普通的 TrueType，都是通过样板缩放得到特定大小的 glyph 的。但为了让较小的字符看起来也非常清晰，字体中的某些字号可能会是特殊制作的点阵字符(fixed size)，比如 windows 的宋体(simsun.ttf/ttc)中的 9pt~12pt、文泉驿(wenq.org)正黑的 9pt~12pt。对于点阵字，就是上面 _MONO 那种类型的 pixel format。

=====

FT_Load_Char 的几个常用参数：

FT_LOAD_RENDER | FT_LOAD_NO_BITMAP | FT_LOAD_FORCE_AUTOHINT
上面说到矢量字体在缩放时会比较难看，可以通过 AUTOHINT 来提高些质量，同时 FT_LOAD_NO_BITMAP 强制不使用点阵字符。
用 wqy-正黑 12pt，效果还行。

FT_LOAD_RENDER | FT_LOAD_MONOCHROME
MONO 是强制输出点阵格式的 bitmap，无论是否此字号有真实对应的点阵字符。没有的话，FreeType2 先通过缩放，然后默认帮你转。

再说下 FT_LOAD_RENDER，指在默认加载 glyph 之后，立即输出 slot->bitmap 的内容，不用之，你不能在 FT_Load_Char 之后，立即使用 slot->bitmap。

=====

下面是 12pt 字绘制效果展示：

宋体(sumsun) fixed size

[FreeType2] 字体绘制入门 (1) - kasicass - Code@Pig Home

正黑(wqy-zenhei) fixed size

宋体(sumsun) no fixed size(矢量图缩放)

正黑(wyq-zenhei) no fixed size(矢量图缩放)

上面的字体都向上对齐了，严重不满足我们的显示要求嘛 ... Em~ 请听下回分解。:-)

ps. iconv 可以用来转换各种编码。

评论这张

转发至微博

阅读(9537)| 评论(7)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_085074084087081071086080085095087095084069085095',
              blogTitle:'[FreeType2] 字体绘制入门 (1)',
              blogAbstract:'=========================================<br\>                 基础篇<br\>=========================================<br\><br\>font family, 一类字体的总称，包括 look, style, serif 等等<br\>font face, font family 中的某一中特定 style，比如：<br\><br\>Fixed                # font family<br\>Fixed:style=Bold     # font face<br\>Fixed:style=Regular  # font face<br\><br\>对于同样的 font family，可以有不同的 font file format (文件格式)，比如：OpenType、TrueType。以 TrueType 为例，不同的 font',
              blogTag:'',
              blogUrl:'blog/static/3956192009125112338305',
              isPublished:1,
              istop:false,
              type:0,
              modifyTime:0,
              publishTime:1235575418305,
              permalink:'blog/static/3956192009125112338305',
              commentCount:7,
              mainCommentCount:4,
              recommendCount:0,
              bsrk:-100,
              publisherId:0,
              recomBlogHome:false,
              currentRecomBlog:false,
              attachmentsFileIds:[],
              vote:{},
              groupInfo:{},
              friendstatus:'none',
              followstatus:'unFollow',
              pubSucc:'',
              visitorProvince:'',
              visitorCity:'',
              visitorNewUser:false,
              postAddInfo:{},
              mset:'000',
              mcon:'',
              srk:-100,
              remindgoodnightblog:false,
              isBlackVisitor:false,
              isShowYodaoAd:false,
              hostIntro:'gamecoder@work',
              hmcon:'1',
              selfRecomBlogCount:'0',
              lofter_single:'<iframe width="140" height="560" style="overflow:hidden;" src="http://www.lofter.com/mailEntry.do?blogad=1&blog" frameBorder="0"></iframe>'
            }

{list a as x}
    {if !!x}
    <div class="iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
      {if x.visitorName==visitor.userName}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        {if x.moveFrom=='wap'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/wapblog.html?frompersonalbloghome"><span title="来自网易手机博客" class="iblock wapIcon"> </span></a>
        {elseif x.moveFrom=='iphone'}
          <a class="noul pnt" target="_blank"><span title="来自iPhone客户端" class="iblock iphoneIcon"> </span></a>
        {elseif x.moveFrom=='android'}
          <a class="noul pnt" target="_blank"><span title="来自Android客户端" class="iblock androidIcon"> </span></a>
        {elseif x.moveFrom=='mobile'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/emsblog.html?frompersonalbloghome"><span title="来自网易短信写博" class="iblock wapIcon"> </span></a>
        {/if}
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
          ${fn(x.visitorNickname,8)|escape}
        </a>
      </div>
    </div>
    {/if}
    {/list}

<#--最新日志，群博日志--> <#--推荐日志-->

<p class="fc06">推荐过这篇日志的人：</p>
    <div>
      {list a as x}
      {if !!x}
      <div class="iblock nbw-fce nbw-f40">
        <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
        <img alt="${x.recommenderNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.recommenderName)}"/>
        </a>
        <div class="cwd thide">
          <a class="fc03 m2a" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
            ${fn(x.recommenderNickname,6)|escape}
          </a>
        </div>
      </div>
      {/if}
      {/list}
    </div>
    {if !!b&&b.length>0}
    <p  class="fc06">他们还推荐了：</p>
    <ul>
    {list b as y}
      {if !!y}
        <li class="rrb"><span class="iblock">·</span><a class="fc03 m2a" target="_blank" href="http://blog.163.com/${y.recommendBlogPermalink}/?from=blog/static/3956192009125112338305">${y.recommendBlogTitle|escape}</a></li>
      {/if}
    {/list}
    </ul>
    {/if}

<#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇，下一篇--> <#-- 热度 -->

{list a as x}
    {if !!x}
    <div class="hotItem iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
      {if x.publisherUsername==visitor.userName}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
          ${fn(x.publisherNickname,8)|escape}
        </a>
      </div>
      <a class="f-myLikeIcons hottype {if x.type==1} js-liketype{elseif x.type==2} js-reblogtype{elseif x.type==3} js-sharetype{else}{/if}" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/"> </a>
    </div>
    {/if}
    {/list}

<#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->

页脚

我的照片书 - 手机博客 - 下载LOFTER APP - 订阅此博客

Code@Pig Home

导航

日志

[FreeType2] 字体绘制入门 (1)

历史上的今天

最近读者

热度

评论

页脚