CN112232023A - 一种在线位图字体生成系统及方法 - Google Patents
一种在线位图字体生成系统及方法 Download PDFInfo
- Publication number
- CN112232023A CN112232023A CN202011134760.3A CN202011134760A CN112232023A CN 112232023 A CN112232023 A CN 112232023A CN 202011134760 A CN202011134760 A CN 202011134760A CN 112232023 A CN112232023 A CN 112232023A
- Authority
- CN
- China
- Prior art keywords
- font
- module
- characters
- bitmap
- gray scale
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 21
- 238000009877 rendering Methods 0.000 claims abstract description 29
- 230000006835 compression Effects 0.000 claims abstract description 7
- 238000007906 compression Methods 0.000 claims abstract description 7
- 230000000694 effects Effects 0.000 abstract description 5
- 230000003993 interaction Effects 0.000 abstract description 5
- 238000010586 diagram Methods 0.000 description 3
- 239000011159 matrix material Substances 0.000 description 2
- 241001270131 Agaricus moelleri Species 0.000 description 1
- 230000004075 alteration Effects 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/103—Formatting, i.e. changing of presentation of documents
- G06F40/109—Font handling; Temporal or kinetic typography
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T11/00—2D [Two Dimensional] image generation
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Health & Medical Sciences (AREA)
- Artificial Intelligence (AREA)
- Audiology, Speech & Language Pathology (AREA)
- Computational Linguistics (AREA)
- General Health & Medical Sciences (AREA)
- General Engineering & Computer Science (AREA)
- Document Processing Apparatus (AREA)
Abstract
本发明公开了一种在线位图字体生成系统，包括字体解析模块，解析要生成的字体参数；布局模块，将要生成的字符布局在一张画布上；渲染模块，将生成的字符按序在画布上渲染出来；压缩模块，根据灰度的实际需求压缩灰度，生成最终的位图字体。还公开了一种在线生成位图字体的方法，包括以下步骤：用户输入要生成的字体的参数；字体解析模块解析字体参数；布局模块根据字体最后一个字符的编码进行字体文件的格栅布局；渲染模块从第一个字符到最后一个字符根据其编码，在其对应格栅的位置绘制出256级灰度的字符。本发明通过设计和实现一在线生成位图字体的方法和系统来实现人机交互界面统一的字体渲染效果。
Description
技术领域
本发明涉及人机交互界面字体显示领域，具体为一种在线位图字体生成系统及方法。
背景技术
位图字体是一种每个字都是一组像素表示的字体，也称为光栅化字体，因为每个字其实都是光栅化的图像。位图字体的有点有很多：1.很方便、快速地进行字体渲染；2.比其他类型的字体更容易创建；3.未拉伸的位图字体可以提供在不同平台一致的渲染效果。位图字体的缺点包括拉伸后容易失真，以及每一种大小或样式的相同字体就需要提供一份不同的字体，大大提升了内存开销。
在人机交互界面的设计方面，为了实现不同平台对同一个人机交互界面能够有着同样的显示效果，所以需要不同平台对同样的字体能够有着同样的显示效果。在实际开发中，对于矢量字体的解析和渲染，不同平台的解析往往不同，就导致了显示的差异。此外，一些平台特别是嵌入式平台，对于矢量字体的开销太大，导致不能够采用矢量字体。
专利号为CN103559271A中国专利公开了一种带灰度等级的点阵字库生成方法。该专利提供了一种基于Window GDI(图形设备接口)的生成带最大65级灰度的点阵字库的方法。这种方法基于Window GDI，使用限制在Window系统上、并且最大灰度只有65级。此外，需要自定义表格才能显示生成的字体。
为此我们提出一种在线位图字体生成系统及方法用于解决上述问题。
发明内容
本发明的目的在于提供一种在线位图字体生成系统及方法，以解决上述背景技术中提出的问题。
为实现上述目的，本发明提供如下技术方案：一种在线位图字体生成系统，包括：
字体解析模块，解析要生成的字体参数；
布局模块，将要生成的字符布局在一张画布上；
渲染模块，将生成的字符按序在画布上渲染出来；
压缩模块，根据灰度的实际需求压缩灰度，生成最终的位图字体。
优选的，字体解析模块根据字体参数解析出的字体参数包括Font Family、FontVariant、Font Weight、Font Size和Font Style等，以及需要生成的字体的灰度级。
优选的，所述画布为正方形，所述字符按照格栅排列成正方形。
优选的，所述渲染模块调用HTML5 Canvas的fillText方法，根据字符的charCode在指定格栅的位置绘制字符，每个字符渲染在字符实际渲染区域中，边缘是内衬区域。
优选的，所述渲染模块绘制出的字符是256级灰度，根据需要的灰度可以向下放缩，调用HTML5 Canvas的toDataUrl方法生成最终的位图字体。
一种在线生成位图字体的方法，包括以下步骤：
S1：用户输入要生成的字体的参数，包括Font Family、Font Variant、FontWeight、Font Size和Font Style，以及需要生成的字体的灰度级；
S2：字体解析模块解析字体参数；
S3：布局模块根据字体最后一个字符的编码进行字体文件的格栅布局；
S4：渲染模块从第一个字符到最后一个字符根据其编码，在其对应格栅的位置绘制出256级灰度的字符；
S5：在所有字符都绘制好后，根据实际灰度需要，从256级灰度放缩到实际灰度，并生成最终字体的位图文件。
与现有技术相比，本发明的有益效果是：本发明通过设计和实现一在线生成位图字体的方法和系统来实现人机交互界面统一的字体渲染效果，具有以下优点：1.在线跨平台，不依赖特定平台；2.最大256级灰度；3.生成方便，支持各种参数的字体；4.字体的显示无需额外辅助表格或文件。
附图说明
图1为本发明中在线位图字体生成系统架构示意图；
图2为本发明中布局模块格栅画布示意图；
图3为本发明中单个渲染字符示意图；
图4为本发明中工作流程示意图。
图中：1在线位图字体生成系统、2字体解析模块、3.布局模块、4渲染模块、5压缩模块、6布局模块格栅画布、7单个字符实际渲染区域、8单个字符渲染区域、9内衬区域、10字体模块解析字体参数、11布局模块布局格栅画布、12渲染模块渲染字符、13判断是否渲染完毕、14压缩模块根据实际灰度放缩、15压缩模块生成最终位图文件。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
请参阅图1-4，本发明提供一种技术方案：一种在线位图字体生成系统，系统基于HTML5的Canvas技术，采用Canvas进行字符的渲染。因此一方面可以实现在线跨平台，因为Canvas技术主流浏览器包括IE 9+、Chrome、Safari和Firefox浏览器等都支持。此外，Canvas技术支持的灰度可达256级。
本发明中在线位图字体生成系统包括：
字体解析模块，解析要生成的字体参数；
布局模块，将要生成的字符布局在一张画布上；
渲染模块，将生成的字符按序在画布上渲染出来；
压缩模块，根据灰度的实际需求压缩灰度，生成最终的位图字体。
字体解析模块根据字体参数解析出的字体参数包括Font Family、Font Variant、Font Weight、Font Size和Font Style等，以及需要生成的字体的灰度级。
所述画布为正方形，所述字符按照格栅排列成正方形。
所述渲染模块调用HTML5 Canvas的fillText方法，根据字符的charCode在指定格栅的位置绘制字符，每个字符渲染在字符实际渲染区域中，边缘是内衬区域。
所述渲染模块绘制出的字符是256级灰度，根据需要的灰度可以向下放缩，调用HTML5 Canvas的toDataUrl方法生成最终的位图字体。
一种在线生成位图字体的方法，包括以下步骤：
S1：用户输入要生成的字体的参数，包括Font Family、Font Variant、FontWeight、Font Size和Font Style，以及需要生成的字体的灰度级；
S2：字体解析模块解析字体参数；
S3：布局模块根据字体最后一个字符的编码进行字体文件的格栅布局；
S4：渲染模块从第一个字符到最后一个字符根据其编码，在其对应格栅的位置绘制出256级灰度的字符；
S5：在所有字符都绘制好后，根据实际灰度需要，从256级灰度放缩到实际灰度，并生成最终字体的位图文件。
尽管已经示出和描述了本发明的实施例，对于本领域的普通技术人员而言，可以理解在不脱离本发明的原理和精神的情况下可以对这些实施例进行多种变化、修改、替换和变型，本发明的范围由所附权利要求及其等同物限定。
Claims (6)
1.一种在线位图字体生成系统，其特征在于，包括：
字体解析模块，解析要生成的字体参数；
布局模块，将要生成的字符布局在一张画布上；
渲染模块，将生成的字符按序在画布上渲染出来；
压缩模块，根据灰度的实际需求压缩灰度，生成最终的位图字体。
2.根据权利要求1所述的一种在线位图字体生成系统，其特征在于：字体解析模块根据字体参数解析出的字体参数包括Font Family、Font Variant、Font Weight、Font Size和Font Style等，以及需要生成的字体的灰度级。
3.根据权利要求1所述的一种在线位图字体生成系统，其特征在于：所述画布为正方形，所述字符按照格栅排列成正方形。
4.根据权利要求1所述的一种在线位图字体生成系统，其特征在于：所述渲染模块调用HTML5 Canvas的fillText方法，根据字符的charCode在指定格栅的位置绘制字符，每个字符渲染在字符实际渲染区域中，边缘是内衬区域。
5.根据权利要求1所述的一种在线位图字体生成系统，其特征在于：所述渲染模块绘制出的字符是256级灰度，根据需要的灰度可以向下放缩，调用HTML5 Canvas的toDataUrl方法生成最终的位图字体。
6.一种在线生成位图字体的方法，其特征在于，包括以下步骤：
S1：用户输入要生成的字体的参数，包括Font Family、Font Variant、Font Weight、Font Size和Font Style，以及需要生成的字体的灰度级；
S2：字体解析模块解析字体参数；
S3：布局模块根据字体最后一个字符的编码进行字体文件的格栅布局；
S4：渲染模块从第一个字符到最后一个字符根据其编码，在其对应格栅的位置绘制出256级灰度的字符；
S5：在所有字符都绘制好后，根据实际灰度需要，从256级灰度放缩到实际灰度，并生成最终字体的位图文件。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011134760.3A CN112232023A (zh) | 2020-10-21 | 2020-10-21 | 一种在线位图字体生成系统及方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011134760.3A CN112232023A (zh) | 2020-10-21 | 2020-10-21 | 一种在线位图字体生成系统及方法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112232023A true CN112232023A (zh) | 2021-01-15 |
Family
ID=74108966
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011134760.3A Pending CN112232023A (zh) | 2020-10-21 | 2020-10-21 | 一种在线位图字体生成系统及方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112232023A (zh) |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US5943063A (en) * | 1995-10-23 | 1999-08-24 | Adobe Systems, Inc. | Method and apparatus for rendering characters |
| CN102279841A (zh) * | 2011-08-31 | 2011-12-14 | 深圳市茁壮网络股份有限公司 | 一种实现多字体显示的方法、用户端及服务器 |
| CN109670427A (zh) * | 2018-12-07 | 2019-04-23 | 腾讯科技（深圳）有限公司 | 一种图像信息的处理方法、装置及存储介质 |
| CN111209721A (zh) * | 2018-11-16 | 2020-05-29 | 北京京东尚科信息技术有限公司 | 位图字体实现方法、装置、电子设备及存储介质 |
| CN111221596A (zh) * | 2018-11-23 | 2020-06-02 | 北京方正手迹数字技术有限公司 | 字体渲染方法、装置及计算机可读存储介质 |
-
2020
- 2020-10-21 CN CN202011134760.3A patent/CN112232023A/zh active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US5943063A (en) * | 1995-10-23 | 1999-08-24 | Adobe Systems, Inc. | Method and apparatus for rendering characters |
| CN102279841A (zh) * | 2011-08-31 | 2011-12-14 | 深圳市茁壮网络股份有限公司 | 一种实现多字体显示的方法、用户端及服务器 |
| CN111209721A (zh) * | 2018-11-16 | 2020-05-29 | 北京京东尚科信息技术有限公司 | 位图字体实现方法、装置、电子设备及存储介质 |
| CN111221596A (zh) * | 2018-11-23 | 2020-06-02 | 北京方正手迹数字技术有限公司 | 字体渲染方法、装置及计算机可读存储介质 |
| CN109670427A (zh) * | 2018-12-07 | 2019-04-23 | 腾讯科技（深圳）有限公司 | 一种图像信息的处理方法、装置及存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US8102397B2 (en) | Method for improving uniform width character strokes using multiple alignment zones | |
| CN103177709B (zh) | 字符显示方法和装置 | |
| US7505041B2 (en) | Iteratively solving constraints in a font-hinting language | |
| US20140085311A1 (en) | Method and system for providing animated font for character and command input to a computer | |
| US6661417B1 (en) | System and method for converting an outline font into a glyph-based font | |
| CN106407179B (zh) | 汉字字形相似度计算方法及其系统 | |
| US6005588A (en) | System and method for rapidly displaying text in a graphical user interface | |
| CN107562480B (zh) | 一种pos机多国语言的实现方法及其系统 | |
| CN111915705B (zh) | 图片可视化编辑方法、装置、设备和介质 | |
| US20040227771A1 (en) | Dynamic selection of anti-aliasing procedures | |
| US11886795B2 (en) | Aesthetic marking of text in digital typography | |
| JP2013061660A (ja) | 低解像度ディスプレイのためのストロークベースのフォント文字を生成する方法 | |
| US9881395B2 (en) | Rendering multi-part glyphs | |
| JP2017003987A (ja) | 文字を囲む枠の少なくとも１つの区分の大きさを変更することによるフォント変形方法 | |
| CN112232023A (zh) | 一种在线位图字体生成系统及方法 | |
| US6701023B1 (en) | Reducing appearance differences between coded and noncoded units of text | |
| US7006107B2 (en) | Anisotropic anti-aliasing | |
| CN112434763A (zh) | 一种基于计算机的汉字骨架生成方法 | |
| KR100933707B1 (ko) | 사용자 필적 조합 시스템 | |
| CN113934339A (zh) | 一种基于rem的页面自适应布局的方法及装置 | |
| JP6108105B2 (ja) | 記事画像再構成装置 | |
| JP2726951B2 (ja) | 文字・図形描画装置 | |
| JP2017125934A (ja) | 文字描画装置及び文字描画方法、コンピュータプログラム | |
| CN108304356B (zh) | 一种字符显示方法及装置 | |
| Banjanin et al. | Font hinting techniques and the importance of applying these techniques for high-quality display of fonts on the output device screen |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |