注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Code@Pig Home

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

 
 
 

日志

 
 

[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
[FreeType2] 字体绘制入门 (1) - kasicass - Code@Pig Home

宋体(sumsun) no fixed size(矢量图缩放)
[FreeType2] 字体绘制入门 (1) - kasicass - Code@Pig Home

正黑(wyq-zenhei) no fixed size(矢量图缩放)
[FreeType2] 字体绘制入门 (1) - kasicass - Code@Pig Home

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

ps. iconv 可以用来转换各种编码。
  评论这张
 
阅读(7373)| 评论(7)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017