H5页面很快搭建之高级字体采取实践

H5页面很快搭建之高级字体采取实践

2016/04/15 · HTML5 ·
字体

初稿出处: 天猫前端团队(FED)-
龙驭   

美高梅开户网址 1

根源:Tmall前端团队(FED)- 龙驭

链接:http://taobaofed.org/blog/2016/04/12/webfont-practice/

H5页面很快搭建之高级字体选用实践,h5页面搭建字体

原稿出处: Tmall前端团队(FED)- 龙驭   

美高梅开户网址 2

初稿出处: Taobao前端团队(FED)-
龙驭   

背景

  • 方今在付出3个 H5
    活动页火速搭建平台,可以由此拖拽编辑图片,文字等要素组件,神速搭建出贰个运动端的活动页面,基本交互和产品效果类似
    PPT
    软件。那类活动大批量在微信等楼台上传出,其中会蕴藏各样卡通和特效,而各种高级艺术字体(如:方正陶然亭黑,方正彩云,方正大草,方正剑体等)的采取也非常广泛。
  • 事先用户只好通过 ps
    等软件将文字转化为图片再贴到平台上利用。使用花费很高,修改,调试都拾分拮据,而且图片占用的能源也比较多,为了降低用户的选择开支,基于一站式搭建的观点,大家须要将高级字体的应用透明化,使用户和利用
    PPT 一样一向采用字体选择即可。

美高梅开户网址 3

背景

  • 多年来在付出3个 H5
    活动页火速搭建平台,可以通过拖拽编辑图片,文字等因素组件,快捷搭建出3个运动端的活动页面,基本交互和制品效果类似
    PPT
    软件。那类活动大批量在微信等平台上传来,其中会蕴藏各样卡通和特效,而各队高级艺术字体(如:方正历下亭黑,方正彩云,方正大草,方正剑体等)的施用也10分广阔。
  • 前面用户只好通过 ps
    等软件将文字转化为图片再贴到平台上使用。使用资金很高,修改,调试都丰硕坚苦,而且图片占用的财富也相比较多,为了降低用户的应用资金,基于一站式搭建的看法,大家需要将高级字体的采纳透明化,使用户和选用PPT 一样直接选拔字体采取即可。

美高梅开户网址 4

技能选型

  • 首先种方案是通过用户输入的文字,和甄选的书体,通过服务器生成对应的图纸来拔取。那种方案的优点是逻辑不难,缺点是搭建/修改时扩充了复杂度,调试时不知所措实时预览文字在活动中的效果。而且便于并发大批量冗余图片,最后页面的图形请求也会增多。
  • 其次种方案是调用 iconfont.cn
    的劳务接口,通过传递字体和文字内容来获取字体文件。这种方案的优点是可以直接选择现有成熟平台,开发开支低,可信。缺点是扩大了表面倚重,不但面临合营方同盟的范围,而且无法自动决定可供的精选字体等。
  • 最后使用的的第②种方案是从来行使 iconfont.cn 的 Node.js 模块
    (font-carrier) ,自行解析/生成字体,将转移的书体放在我们友好报名的
    OSS 中蕴藏使用。那种艺术的开发量最大,且要消耗额外的 OSS
    财富,但是凡事工艺流程独立自主,可以穿梭定制优化,自行添加字体等,由于我们的劳务只面向移动端,所以只必要变更
    ttf 大概 woff 一种文件类型即可包容。

背景

技巧选型

  • 率先种方案是透过用户输入的文字,和抉择的字体,通过劳务器生成对应的图形来使用。那种方案的优点是逻辑不难,缺点是搭建/修改时增添了复杂度,调试时心慌意乱实时预览文字在运动中的效果。而且简单出现大批量冗余图片,最后页面的图片请求也会大增。
  • 其次种方案是调用 iconfont.cn
    的劳务接口,通过传递字体和文字内容来博取字体文件。这种方案的优点是可以直接动用现有成熟平台,开发费用低,靠谱。缺点是增多了外部着重,不但面临同盟方合营的界定,而且不大概自行决定可供的挑三拣四字体等。
  • 终极利用的的第1种方案是一直动用 iconfont.cn 的 Node.js 模块
    (font-carrier) ,自行解析/生成字体,将扭转的书体放在大家友好报名的
    OSS 中贮存使用。那种艺术的开发量最大,且要消耗额外的 OSS
    能源,可是凡事工艺流程独立自主,可以不断定制优化,自行添加字体等,由于大家的劳务只面向移动端,所以只须要转移
    ttf 恐怕 woff 一种文件类型即可包容。

背景

  • 方今在支付一个 H5
    活动页快捷搭建平台,可以透过拖拽编辑图片,文字等因素组件,飞速搭建出2个移动端的活动页面,基本交互和制品效果类似
    PPT
    软件。那类活动大批量在微信等楼台上流传,其中会含有种种卡通和特效,而各队高级艺术字体(如:方正沧浪亭黑,方正彩云,方正大草,方正剑体等)的选取也万分常见。
  • 事先用户只好通过 ps
    等软件将文字转化为图片再贴到平台上利用。使用资金很高,修改,调试都10分不便,而且图片占用的能源也正如多,为了降低用户的使用资金,基于一站式搭建的意见,大家必要将高级字体的利用透明化,使用户和选用PPT 一样一向选取字体选取即可。

字体文件分析的基本原理

近年来在付出3个 H5
活动页火速搭建平台,可以由此拖拽编辑图片,文字等要素组件,赶快搭建出二个运动端的活动页面,基本交互和产品效果类似
PPT
软件。那类活动多量在微信等楼台上传出,其中会蕴藏各样卡通和特效,而各个高级艺术字体(如:方正爱晚亭黑,方正彩云,方正大草,方正剑体等)的使用也卓殊广泛。

字体文件分析的基本原理

技术选型

  • 第③种方案是因而用户输入的文字,和挑选的书体,通过劳动器生成对应的图样来利用。那种方案的助益是逻辑简单,缺点是搭建/修改时扩大了复杂度,调试时不可以实时预览文字在活动中的效果。而且简单出现多量冗余图片,最后页面的图纸请求也会增多。
  • 第两种方案是调用 iconfont.cn
    的劳动接口,通过传递字体和文字内容来拿到字体文件。这种方案的助益是足以一贯使用现有成熟平台,开发费用低,可信。缺点是增加了表面倚重,不但面临合营方同盟的范围,而且无法自动决定可供的选项字体等。
  • 最后采纳的的第1种方案是直接利用 iconfont.cn 的 Node.js 模块
    (font-carrier) ,自行解析/生成字体,将转移的字体放在大家有福同享报名的
    OSS 中存储使用。那种措施的开发量最大,且要消耗额外的 OSS
    能源,不过任何工艺流程独立自主,可以不停定制优化,自行添加字体等,由于大家的劳动只面向移动端,所以只必要转变
    ttf 或然 woff 一种文件类型即可包容。

字体文件的大旨结构

以 ttf
文件为例,字体文件中根本包罗了字体头表,地方索引表和图元数据表等等,其中最基本的片段就是图元数据表,也等于字形描述表,它可以包括可变多少的图元,每一种图元可以有例外数额的控制点,甚至还足以有数量可变的图元指令,通过岗位索引表对应到每一种字符上,通过图元数据表,使其只包涵必要运用的字符的图元描述。即可最小化字体,使其可用来生产条件的页面中,其余品类的书体文件(如
woff, eot, svg
等)原理也是相差无几,仅仅是减弱方式和字形描述规范差距,也可以相互转化。

事先用户只好通过 ps
等软件将文字转化为图片再贴到平台上应用。使用基金很高,修改,调试都卓绝拮据,而且图片占用的能源也正如多,为了下落用户的行使基金,基于一站式搭建的眼光,大家必要将高级字体的使用透明化,使用户和应用
PPT 一样直接采纳字体采纳即可。

字体文件的中坚结构

以 ttf
文件为例,字体文件中根本含有了字体头表,地方索引表和图元数据表等等,其中最基本的有个别就是图元数据表,相当于字形描述表,它可以分包可变多少的图元,各种图元可以有例外数额的控制点,甚至还足以有多少可变的图元指令,通过岗位索引表对应到各种字符上,通过图元数据表,使其只包括必要利用的字符的图元描述。即可最小化字体,使其可用以生产环境的页面中,其余品种的书体文件(如
woff, eot, svg
等)原理也是开封小异,仅仅是缩减格局和字形描述规范差距,也得以互相转化。

H5页面很快搭建之高级字体采取实践。字体文件分析的基本原理

font-carrier 模块基本原理

font-carrier 模块使用 OpenType 模块分析 ttf
文件,可以文件的情节脚本化,使其改为二个字符 unicode
编码和其字形描述的键值对象。通过对那一个目的的 min
方法,可以使其最小化,并且再逆向生成文件 Buffer 供用户拔取。

技巧选型

font-carrier 模块基本原理

font-carrier 模块使用 OpenType 模块分析 ttf
文件,可以文件的内容脚本化,使其变为多少个字符 unicode
编码和其字形描述的键值对象。通过对这些目标的 min
方法,可以使其最小化,并且再逆向生成文件 Buffer 供用户使用。

字体文件的主题结构

以 ttf
文件为例,字体文件中重点涵盖了字体头表,地方索引表和图元数据表等等,其中最大旨的片段就是图元数据表,也等于字形描述表,它可以蕴含可变多少的图元,每一种图元能够有两样数额的控制点,甚至还能有数据可变的图元指令,通过岗位索引表对应到各个字符上,通过图元数据表,使其只含有要求接纳的字符的图元描述。即可最小化字体,使其可用来生产条件的页面中,其他品类的书体文件(如
woff, eot, svg
等)原理也是几乎,仅仅是减掉方式和字形描述规范不相同,也可以相互转化。

一期兑现流程

  • 在先后运行后透过 font-carrier
    模块将地方的字体文件包装成字体对象,保存在服务器内存中。
  • 用户保存页面时,记录下此运动拥有应用的高等字体和呼应的文字内容
  • 通过 font-carrier 模块找到字体对应的字体对象,使用 min
    命令生成最小化的书体对象
  • 应用 min 命令生成缩短后的书体文件,保存到 OSS,并以活动的 id
    为路径,字体的名字为文件名。
  • 末尾渲染时经过记录的运动使用的书体名拼出 OSS 路径来引用文件

第叁种方案是透过用户输入的文字,和抉择的字体,通过劳务器生成对应的图形来利用。那种方案的优点是逻辑简单,缺点是搭建/修改时增添了复杂度,调试时心慌意乱实时预览文字在移动中的效果。而且便于并发多量冗余图片,最后页面的图片请求也会追加。

一期兑现流程

  • 在程序运营后通过 font-carrier
    模块将当地的字体文件包装成字体对象,保存在服务器内存中。
  • 用户保存页面时,记录下此活动有着应用的尖端字体和相应的文字内容
  • 因此 font-carrier 模块找到字体对应的书体对象,使用 min
    命令生成最小化的字体对象
  • 运用 min 命令生成减弱后的字体文件,保存到 OSS,并以活动的 id
    为路径,字体的名字为文件名。
  • 最后渲染时通过记录的移位采纳的字体名拼出 OSS 路径来引用文件

font-carrier 模块基本原理

font-carrier 模块使用 OpenType 模块分析 ttf
文件,可以文件的内容脚本化,使其成为3个字符 unicode
编码和其字形描述的键值对象。通过对那么些目的的 min
方法,可以使其最小化,并且再逆向生成文件 Buffer 供用户采用。

存在难题

  • 鉴于字体数量较多,运维时将地点字体文件包装成字体对象的时刻不长,可直达数十秒钟。
  • 字体对象常驻内存,占用巨大,甚至恐怕直接吃光内存

第二种方案是调用 iconfont.cn
的服务接口,通过传递字体和文字内容来博取字体文件。这种方案的长处是能够间接行使现有成熟平台,开发花费低,可信。缺点是增多了表面器重,不但面临同盟方合作的限制,而且无法自行决定可供的选料字体等。

留存难题

  • 出于字体数量较多,运行时将地面字体文件包装成字体对象的光阴尤其长,可已毕数十分钟。
  • 字体对象常驻内存,占用巨大,甚至或许一向吃光内存

一期兑现流程

  • 在先后运营后透过 font-carrier
    模块将地方的字体文件包装成字体对象,保存在服务器内存中。
  • 用户保存页面时,记录下此运动拥有应用的高等字体和呼应的文字内容
  • 通过 font-carrier 模块找到字体对应的字体对象,使用 min
    命令生成最小化的书体对象
  • 应用 min 命令生成减少后的字体文件,保存到 OSS,并以活动的 id
    为路径,字体的名字为文件名。
  • 末尾渲染时经过记录的移动拔取的字体名拼出 OSS 路径来引用文件

浅析难题

因为 font-carrier
模块生成的字体对象无法透过文件来持久化保存,只可以生成后常驻内存中,而字体的多少多,大小也大,所以随便是浮动的日子,生成时消耗的属性,生成后占用的内存都非凡巨大。所以难点的关键在于如何把字体的剖析结果持久化保存在服务器中。

最终利用的的第一种方案是一直动用 iconfont.cn 的 Node.js 模块
(font-carrier) ,自行解析/生成字体,将转变的字体放在我们和衷共济报名的 OSS
中存储使用。这种措施的开发量最大,且要消耗额外的 OSS
财富,不过凡事流程独立自主,可以不停定制优化,自行添加字体等,由于大家的劳动只面向移动端,所以只要求转移
ttf 大概 woff 一种文件类型即可包容。

解析难点

因为 font-carrier
模块生成的书体对象不只怕透过文件来持久化保存,只可以生成后常驻内存中,而字体的数额多,大小也大,所以无论是变化的日子,生成时消耗的习性,生成后占用的内存都充足巨大。所以难点的关键在于如何把字体的分析结果持久化保存在服务器中。

存在难点

  • 是因为字体数量较多,运维时将本地字体文件包装成字体对象的时光不短,可完成数十分钟。
  • 字体对象常驻内存,占用巨大,甚至大概直接吃光内存

消除方案

在发问了 font-carrier 模块的开发者后,了然到 font-carrier
模块还有生成字体的 svg 片段的措施,可以将字体的图元数据变动为 svg
输出,并可以将 svg 逆向导入到空字体文件中来扭转最后字体文件。
透过将字体分析转译后的 svg
片段结果保存在数据库中,即可持久化分析结果。使用的时候经过创设空字体->配置字符-svg
的对应关系->提取字体->上传到 OSS 的流水线来使用最小化后的字体即可。

字体文件分析的基本原理

解决方案

在提问了 font-carrier 模块的开发者后,了解到 font-carrier
模块还有生成字体的 svg 片段的方法,可以将字体的图元数据变动为 svg
输出,并得以将 svg 逆向导入到空字体文件中来变化最后字体文件。
由此将字体分析转译后的 svg
片段结果保存在数据库中,即可持久化分析结果。使用的时候经过成立空字体->配置字符-svg
的呼应关系->提取字体->上传到 OSS 的流程来利用最小化后的书体即可。

分析难题

因为 font-carrier
模块生成的书体对象无法通过文件来持久化保存,只可以生成后常驻内存中,而字体的数额多,大小也大,所以不管是转变的光阴,生成时用度的属性,生成后占用的内存都格外伟大。所以难题的关键在于怎样把字体的辨析结果持久化保存在服务器中。

二期落成流程

  • 确立提取字体职分,运转时遍历字体文件,提取其中的 svg
    片段存入数据库
JavaScript

var transFont = fontCarrier.transfer(\_\_dirname +
'/../../www/fonts/' + fontInfo.font\_name + '.ttf'); var words =
\[\]; \_.each(transFont.\_\_glyphs, function(n, word) {
words.push({ word: word, fontId: fontInfo.id, svg:
transFont.getSvg(word, { skipViewport: true }) }); });

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6b9a2629c017135023-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6b9a2629c017135023-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6b9a2629c017135023-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6b9a2629c017135023-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6b9a2629c017135023-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6b9a2629c017135023-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f6b9a2629c017135023-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6b9a2629c017135023-8">
8
</div>
<div class="crayon-num" data-line="crayon-5b8f6b9a2629c017135023-9">
9
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6b9a2629c017135023-10">
10
</div>
<div class="crayon-num" data-line="crayon-5b8f6b9a2629c017135023-11">
11
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6b9a2629c017135023-1" class="crayon-line">
var transFont = fontCarrier.transfer(__dirname + '/../../www/fonts/' + fontInfo.font_name + '.ttf');
</div>
<div id="crayon-5b8f6b9a2629c017135023-2" class="crayon-line crayon-striped-line">
var words = [];
</div>
<div id="crayon-5b8f6b9a2629c017135023-3" class="crayon-line">
 _.each(transFont.__glyphs, function(n, word) {
</div>
<div id="crayon-5b8f6b9a2629c017135023-4" class="crayon-line crayon-striped-line">
 words.push({
</div>
<div id="crayon-5b8f6b9a2629c017135023-5" class="crayon-line">
   word: word,
</div>
<div id="crayon-5b8f6b9a2629c017135023-6" class="crayon-line crayon-striped-line">
   fontId: fontInfo.id,
</div>
<div id="crayon-5b8f6b9a2629c017135023-7" class="crayon-line">
   svg: transFont.getSvg(word, {
</div>
<div id="crayon-5b8f6b9a2629c017135023-8" class="crayon-line crayon-striped-line">
     skipViewport: true
</div>
<div id="crayon-5b8f6b9a2629c017135023-9" class="crayon-line">
   })
</div>
<div id="crayon-5b8f6b9a2629c017135023-10" class="crayon-line crayon-striped-line">
 });
</div>
<div id="crayon-5b8f6b9a2629c017135023-11" class="crayon-line">
});
</div>
</div></td>
</tr>
</tbody>
</table>

以下是一段方正喵呜体中的“小编”字提取的 svg 片段

JavaScript

<?xml version=”1.0″ encoding=”utf-8″?> <!DOCTYPE svg PUBLIC
“-//W3C//DTD SVG 1.1//EN”
“; <svg
version=”1.1″ xmlns=””
xmlns:xlink=”” x=”0″ y=”0″ width=”100px”
height=”100px” viewBox=”0 0 1000 1000″> <path d=”M324 857Q324 837
332 819 340 801 340 775 317 775 296.5 776.5 276 778 253 778 237 778
224.5 769.5 212 761 212 742 212 731 221 722 230 713 242 712L333 703Q348
703 353 691 357 662 357.5 643 358 624 358 596L358 559Q357 554 353 554
351 554 349 554 313 554 278 558.5 243 563 208 563 193 563 182 557 171
551 171 533.5 171 516 184 507 197 498 217.5 494 238 490 261 489 286 489
306.5 488.5 327 488 342 487 357 486 358 479L358 461Q358 458 356.5 434.5
355 411 352 384 349 357 344.5 335 340 313 333 313 332 313 329 315 326
317 325 318L270 372Q265 377 259 378 255 381 248 381 217 381 217 348 217
340 218 334 219 328 225 322L420 132Q426 125 432 124 438 123 446 123 460
123 469.5 130.5 479 138 479 152 479 160 474 168 471 176 465 181 462 185
452.5 194.5 443 204 432 214.5 421 225 411.5 234.5 402 244 399 247 398
249 397 252 396 255 395 256L395 259 395 260Q402 290 408 315 414 340
417.5 364.5 421 389 423.5 414.5 426 440 428 471L433 479Q433 480 442 480
451 480 456 480 475 480 492 479.5 509 479 528 476L528 449Q528 399 523.5
348.5 519 298 519 247 519 228 523 215 529 201 550 201 565 201 573 209.5
581 218 584 231 587 244 587.5 257.5 588 271 589 281 589 287 591 310 593
335 594 362 595 389 596 412 598 437 598 442 598 447 598 451 598 457 600
462L602 476 611 479 723 479Q742 480 759.5 486.5 777 493 777 515 777 526
770.5 536 764 546 752 546L628 546 615 550Q614 551 614 553 614 557 614
559 614 564 619 583 623 604 629 625 635 646 642.5 663 650 680 656 680
666 680 673 667 682 655 691 639 701 625 714 611 726 599 743 599 756 599
766.5 606.5 777 614 777 629 777 642 764.5 658.5 752 675 736 692 722 709
709 723 697 739 697 747L697 748Q697 749 698 749 704 756 710 764 718 773
726.5 780.5 735 788 745 794 755 800 764.5 800 774 800 782 796 790 794
799 794 812 794 821 805 830 816 830 829 830 851 812 862 796 873 777 873
755 873 736.5 866 718 859 701.5 847 685 835 669.5 821 654 807 640 795
631 800 623.5 806.5 616 813 609 818.5 602 824 593.5 828.5 585 833 575
833 544 833 544 803 544 798 544.5 794.5 545 791 548 786L598 737 598
725Q576 688 562.5 642 549 596 540 554 538 550 532.5 548 527 546 522
546L519 546Q514 546 503 546 493 548 481.5 548.5 470 549 459.5 549.5 449
550 445 550 442 552 438.5 553.5 435 555 433.5 558.5 432 562 429 574 428
588 428 591 428 596 427.5 607.5 427 619 426 632.5 425 646 424 657 424
670 424 674 424 681 426 682 428 683 432 683 444 683 454.5 681 465 679
477.5 679 490 679 500.5 686.5 511 694 511 708 511 727 499 733 486 741
470 744 454 747 439.5 749 425 751 420 761 419 763 417.5 767.5 416 772
416 774 415 779 411.5 791.5 408 804 404.5 817.5 401 831 398 843 396 857
395 861 385 886 357 886 343 886 333.5 878.5 324 871 324 857M668 269Q668
254 677 246 687 240 699 240 716 240 726 251 736 262 743 277 745 281 750
292 755 303 760 316 765 329 769.5 339.5 774 350 777 355L777 369Q777 385
770.5 393.5 764 402 746 402 735 402 721.5 385 708 368 696.5 346 685 324
676 301 668 280 668 269Z”/> </svg>

1
2
3
4
5
<?xml version="1.0" encoding="utf-8"?>
  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="100px" height="100px" viewBox="0 0 1000 1000">
  <path d="M324 857Q324 837 332 819 340 801 340 775 317 775 296.5 776.5 276 778 253 778 237 778 224.5 769.5 212 761 212 742 212 731 221 722 230 713 242 712L333 703Q348 703 353 691 357 662 357.5 643 358 624 358 596L358 559Q357 554 353 554 351 554 349 554 313 554 278 558.5 243 563 208 563 193 563 182 557 171 551 171 533.5 171 516 184 507 197 498 217.5 494 238 490 261 489 286 489 306.5 488.5 327 488 342 487 357 486 358 479L358 461Q358 458 356.5 434.5 355 411 352 384 349 357 344.5 335 340 313 333 313 332 313 329 315 326 317 325 318L270 372Q265 377 259 378 255 381 248 381 217 381 217 348 217 340 218 334 219 328 225 322L420 132Q426 125 432 124 438 123 446 123 460 123 469.5 130.5 479 138 479 152 479 160 474 168 471 176 465 181 462 185 452.5 194.5 443 204 432 214.5 421 225 411.5 234.5 402 244 399 247 398 249 397 252 396 255 395 256L395 259 395 260Q402 290 408 315 414 340 417.5 364.5 421 389 423.5 414.5 426 440 428 471L433 479Q433 480 442 480 451 480 456 480 475 480 492 479.5 509 479 528 476L528 449Q528 399 523.5 348.5 519 298 519 247 519 228 523 215 529 201 550 201 565 201 573 209.5 581 218 584 231 587 244 587.5 257.5 588 271 589 281 589 287 591 310 593 335 594 362 595 389 596 412 598 437 598 442 598 447 598 451 598 457 600 462L602 476 611 479 723 479Q742 480 759.5 486.5 777 493 777 515 777 526 770.5 536 764 546 752 546L628 546 615 550Q614 551 614 553 614 557 614 559 614 564 619 583 623 604 629 625 635 646 642.5 663 650 680 656 680 666 680 673 667 682 655 691 639 701 625 714 611 726 599 743 599 756 599 766.5 606.5 777 614 777 629 777 642 764.5 658.5 752 675 736 692 722 709 709 723 697 739 697 747L697 748Q697 749 698 749 704 756 710 764 718 773 726.5 780.5 735 788 745 794 755 800 764.5 800 774 800 782 796 790 794 799 794 812 794 821 805 830 816 830 829 830 851 812 862 796 873 777 873 755 873 736.5 866 718 859 701.5 847 685 835 669.5 821 654 807 640 795 631 800 623.5 806.5 616 813 609 818.5 602 824 593.5 828.5 585 833 575 833 544 833 544 803 544 798 544.5 794.5 545 791 548 786L598 737 598 725Q576 688 562.5 642 549 596 540 554 538 550 532.5 548 527 546 522 546L519 546Q514 546 503 546 493 548 481.5 548.5 470 549 459.5 549.5 449 550 445 550 442 552 438.5 553.5 435 555 433.5 558.5 432 562 429 574 428 588 428 591 428 596 427.5 607.5 427 619 426 632.5 425 646 424 657 424 670 424 674 424 681 426 682 428 683 432 683 444 683 454.5 681 465 679 477.5 679 490 679 500.5 686.5 511 694 511 708 511 727 499 733 486 741 470 744 454 747 439.5 749 425 751 420 761 419 763 417.5 767.5 416 772 416 774 415 779 411.5 791.5 408 804 404.5 817.5 401 831 398 843 396 857 395 861 385 886 357 886 343 886 333.5 878.5 324 871 324 857M668 269Q668 254 677 246 687 240 699 240 716 240 726 251 736 262 743 277 745 281 750 292 755 303 760 316 765 329 769.5 339.5 774 350 777 355L777 369Q777 385 770.5 393.5 764 402 746 402 735 402 721.5 385 708 368 696.5 346 685 324 676 301 668 280 668 269Z"/>
  </svg>
  • 保留活动时创设空字体,导入需要的字符和其对应的
    svg,并将这么些字体保存到 OSS
JavaScript

//创建空白字体,使用 svg 生成字体 var font = fontCarrier.create();
values.forEach(function(v) { font.setSvg(v.word,v.svg); }); return
font.output({ types:\['woff'\] })\['woff'\];

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6b9a262ac266100752-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6b9a262ac266100752-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6b9a262ac266100752-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6b9a262ac266100752-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6b9a262ac266100752-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6b9a262ac266100752-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f6b9a262ac266100752-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6b9a262ac266100752-8">
8
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6b9a262ac266100752-1" class="crayon-line">
//创建空白字体,使用 svg 生成字体
</div>
<div id="crayon-5b8f6b9a262ac266100752-2" class="crayon-line crayon-striped-line">
var font = fontCarrier.create();
</div>
<div id="crayon-5b8f6b9a262ac266100752-3" class="crayon-line">
values.forEach(function(v) {
</div>
<div id="crayon-5b8f6b9a262ac266100752-4" class="crayon-line crayon-striped-line">
  font.setSvg(v.word,v.svg);
</div>
<div id="crayon-5b8f6b9a262ac266100752-5" class="crayon-line">
});
</div>
<div id="crayon-5b8f6b9a262ac266100752-6" class="crayon-line crayon-striped-line">
return font.output({
</div>
<div id="crayon-5b8f6b9a262ac266100752-7" class="crayon-line">
  types:['woff']
</div>
<div id="crayon-5b8f6b9a262ac266100752-8" class="crayon-line crayon-striped-line">
})['woff'];
</div>
</div></td>
</tr>
</tbody>
</table>

  • 末尾渲染时经过的记录的位移使用的书体名拼出 OSS 路径来引用文件

字体文件的主导结构

二期落成流程

  • 树立提取字体职务,运维时遍历字体文件,提取其中的 svg
    片段存入数据库
                JavaScript  

    1 2 3 4 5 6 7 8 9 10 11 var transFont = fontCarrier.transfer(__dirname + ‘/../../www/fonts/’ + fontInfo.font_name + ‘.ttf’); var words = []; _.each(transFont.__glyphs, function(n, word) { words.push({   word: word,   fontId: fontInfo.id,   svg: transFont.getSvg(word, {     skipViewport: true   }) }); });

以下是一段方正喵呜体中的“小编”字提取的 svg 片段

            JavaScript  

1 2 3 4 5 <?xml version="1.0" encoding="utf-8"?>   <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">   <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="100px" height="100px" viewBox="0 0 1000 1000">   <path d="M324 857Q324 837 332 819 340 801 340 775 317 775 296.5 776.5 276 778 253 778 237 778 224.5 769.5 212 761 212 742 212 731 221 722 230 713 242 712L333 703Q348 703 353 691 357 662 357.5 643 358 624 358 596L358 559Q357 554 353 554 351 554 349 554 313 554 278 558.5 243 563 208 563 193 563 182 557 171 551 171 533.5 171 516 184 507 197 498 217.5 494 238 490 261 489 286 489 306.5 488.5 327 488 342 487 357 486 358 479L358 461Q358 458 356.5 434.5 355 411 352 384 349 357 344.5 335 340 313 333 313 332 313 329 315 326 317 325 318L270 372Q265 377 259 378 255 381 248 381 217 381 217 348 217 340 218 334 219 328 225 322L420 132Q426 125 432 124 438 123 446 123 460 123 469.5 130.5 479 138 479 152 479 160 474 168 471 176 465 181 462 185 452.5 194.5 443 204 432 214.5 421 225 411.5 234.5 402 244 399 247 398 249 397 252 396 255 395 256L395 259 395 260Q402 290 408 315 414 340 417.5 364.5 421 389 423.5 414.5 426 440 428 471L433 479Q433 480 442 480 451 480 456 480 475 480 492 479.5 509 479 528 476L528 449Q528 399 523.5 348.5 519 298 519 247 519 228 523 215 529 201 550 201 565 201 573 209.5 581 218 584 231 587 244 587.5 257.5 588 271 589 281 589 287 591 310 593 335 594 362 595 389 596 412 598 437 598 442 598 447 598 451 598 457 600 462L602 476 611 479 723 479Q742 480 759.5 486.5 777 493 777 515 777 526 770.5 536 764 546 752 546L628 546 615 550Q614 551 614 553 614 557 614 559 614 564 619 583 623 604 629 625 635 646 642.5 663 650 680 656 680 666 680 673 667 682 655 691 639 701 625 714 611 726 599 743 599 756 599 766.5 606.5 777 614 777 629 777 642 764.5 658.5 752 675 736 692 722 709 709 723 697 739 697 747L697 748Q697 749 698 749 704 756 710 764 718 773 726.5 780.5 735 788 745 794 755 800 764.5 800 774 800 782 796 790 794 799 794 812 794 821 805 830 816 830 829 830 851 812 862 796 873 777 873 755 873 736.5 866 718 859 701.5 847 685 835 669.5 821 654 807 640 795 631 800 623.5 806.5 616 813 609 818.5 602 824 593.5 828.5 585 833 575 833 544 833 544 803 544 798 544.5 794.5 545 791 548 786L598 737 598 725Q576 688 562.5 642 549 596 540 554 538 550 532.5 548 527 546 522 546L519 546Q514 546 503 546 493 548 481.5 548.5 470 549 459.5 549.5 449 550 445 550 442 552 438.5 553.5 435 555 433.5 558.5 432 562 429 574 428 588 428 591 428 596 427.5 607.5 427 619 426 632.5 425 646 424 657 424 670 424 674 424 681 426 682 428 683 432 683 444 683 454.5 681 465 679 477.5 679 490 679 500.5 686.5 511 694 511 708 511 727 499 733 486 741 470 744 454 747 439.5 749 425 751 420 761 419 763 417.5 767.5 416 772 416 774 415 779 411.5 791.5 408 804 404.5 817.5 401 831 398 843 396 857 395 861 385 886 357 886 343 886 333.5 878.5 324 871 324 857M668 269Q668 254 677 246 687 240 699 240 716 240 726 251 736 262 743 277 745 281 750 292 755 303 760 316 765 329 769.5 339.5 774 350 777 355L777 369Q777 385 770.5 393.5 764 402 746 402 735 402 721.5 385 708 368 696.5 346 685 324 676 301 668 280 668 269Z"/>   </svg>

 

  • 保存活动时创制空字体,导入需求的字符和其相应的
    svg,并将这些字体保存到 OSS
              JavaScript  

    1 2 3 4 5 6 7 8 //创建空白字体,使用 svg 生成字体 var font = fontCarrier.create(); values.forEach(function(v) {   font.setSvg(v.word,v.svg); }); return font.output({   types:[‘woff’] })[‘woff’];

  • 最终渲染时经过的记录的移位使用的字体名拼出 OSS 路径来引用文件

缓解方案

在咨询了 font-carrier 模块的开发者后,明白到 font-carrier
模块还有生成字体的 svg 片段的主意,可以将字体的图元数据变化为 svg
输出,并得以将 svg 逆向导入到空字体文件中来变化最后字体文件。
经过将字体分析转译后的 svg
片段结果保存在数据库中,即可持久化分析结果。使用的时候经过创造空字体->配置字符-svg
的应和关系->提取字体->上传到 OSS 的流程来接纳最小化后的字体即可。

新的难点

在例行运转了一段时间后,用户举报了新的标题,编辑和预览时的字宽度不般配,现象为保有的字符都变成了全角情势,数字,字母和标记,都占据了二个中国字的职责。如图:

美高梅开户网址 5

以 ttf
文件为例,字体文件中相当首要涵盖了字体头表,地方索引表和图元数据表等等,其中最主旨的一对就是图元数据表,相当于字形描述表,它可以包涵可变多少的图元,逐个图元可以有两样数额的控制点,甚至仍是可以有数据可变的图元指令,通过岗位索引表对应到每一个字符上,通过图元数据表,使其只含有必要采用的字符的图元描述。即可最小化字体,使其可用来生产条件的页面中,其他品类的书体文件(如
woff, eot, svg
等)原理也是各有千秋,仅仅是压缩情势和字形描述规范分裂,也足以互相转化。

新的题材

在健康运转了一段时间后,用户反馈了新的难点,编辑和预览时的字宽度不匹配,现象为持有的字符都改成了全角方式,数字,字母和标志,都占有了贰个汉字的地点。如图:

美高梅开户网址 6

二期达成流程

  • 树立提取字体职务,运营时遍历字体文件,提取其中的 svg
    片段存入数据库
     

     

     

     

     

     

    JavaScript

    美高梅开户网址 , 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var transFont = fontCarrier.transfer(__dirname + ‘/../../www/fonts/’ + fontInfo.font_name + ‘.ttf’);
    var words = [];
    _.each(transFont.__glyphs, function(n, word) {
    words.push({
      word: word,
      fontId: fontInfo.id,
      svg: transFont.getSvg(word, {
        skipViewport: true
      })
    });
    });

以下是一段方正喵呜体中的“笔者”字提取的 svg 片段

 

 

 

 

 

 

JavaScript

 

1
2
3
4
5
<?xml version="1.0" encoding="utf-8"?>
  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="100px" height="100px" viewBox="0 0 1000 1000">
  <path d="M324 857Q324 837 332 819 340 801 340 775 317 775 296.5 776.5 276 778 253 778 237 778 224.5 769.5 212 761 212 742 212 731 221 722 230 713 242 712L333 703Q348 703 353 691 357 662 357.5 643 358 624 358 596L358 559Q357 554 353 554 351 554 349 554 313 554 278 558.5 243 563 208 563 193 563 182 557 171 551 171 533.5 171 516 184 507 197 498 217.5 494 238 490 261 489 286 489 306.5 488.5 327 488 342 487 357 486 358 479L358 461Q358 458 356.5 434.5 355 411 352 384 349 357 344.5 335 340 313 333 313 332 313 329 315 326 317 325 318L270 372Q265 377 259 378 255 381 248 381 217 381 217 348 217 340 218 334 219 328 225 322L420 132Q426 125 432 124 438 123 446 123 460 123 469.5 130.5 479 138 479 152 479 160 474 168 471 176 465 181 462 185 452.5 194.5 443 204 432 214.5 421 225 411.5 234.5 402 244 399 247 398 249 397 252 396 255 395 256L395 259 395 260Q402 290 408 315 414 340 417.5 364.5 421 389 423.5 414.5 426 440 428 471L433 479Q433 480 442 480 451 480 456 480 475 480 492 479.5 509 479 528 476L528 449Q528 399 523.5 348.5 519 298 519 247 519 228 523 215 529 201 550 201 565 201 573 209.5 581 218 584 231 587 244 587.5 257.5 588 271 589 281 589 287 591 310 593 335 594 362 595 389 596 412 598 437 598 442 598 447 598 451 598 457 600 462L602 476 611 479 723 479Q742 480 759.5 486.5 777 493 777 515 777 526 770.5 536 764 546 752 546L628 546 615 550Q614 551 614 553 614 557 614 559 614 564 619 583 623 604 629 625 635 646 642.5 663 650 680 656 680 666 680 673 667 682 655 691 639 701 625 714 611 726 599 743 599 756 599 766.5 606.5 777 614 777 629 777 642 764.5 658.5 752 675 736 692 722 709 709 723 697 739 697 747L697 748Q697 749 698 749 704 756 710 764 718 773 726.5 780.5 735 788 745 794 755 800 764.5 800 774 800 782 796 790 794 799 794 812 794 821 805 830 816 830 829 830 851 812 862 796 873 777 873 755 873 736.5 866 718 859 701.5 847 685 835 669.5 821 654 807 640 795 631 800 623.5 806.5 616 813 609 818.5 602 824 593.5 828.5 585 833 575 833 544 833 544 803 544 798 544.5 794.5 545 791 548 786L598 737 598 725Q576 688 562.5 642 549 596 540 554 538 550 532.5 548 527 546 522 546L519 546Q514 546 503 546 493 548 481.5 548.5 470 549 459.5 549.5 449 550 445 550 442 552 438.5 553.5 435 555 433.5 558.5 432 562 429 574 428 588 428 591 428 596 427.5 607.5 427 619 426 632.5 425 646 424 657 424 670 424 674 424 681 426 682 428 683 432 683 444 683 454.5 681 465 679 477.5 679 490 679 500.5 686.5 511 694 511 708 511 727 499 733 486 741 470 744 454 747 439.5 749 425 751 420 761 419 763 417.5 767.5 416 772 416 774 415 779 411.5 791.5 408 804 404.5 817.5 401 831 398 843 396 857 395 861 385 886 357 886 343 886 333.5 878.5 324 871 324 857M668 269Q668 254 677 246 687 240 699 240 716 240 726 251 736 262 743 277 745 281 750 292 755 303 760 316 765 329 769.5 339.5 774 350 777 355L777 369Q777 385 770.5 393.5 764 402 746 402 735 402 721.5 385 708 368 696.5 346 685 324 676 301 668 280 668 269Z"/>
  </svg>

 

  • 保留活动时成立空字体,导入需要的字符和其对应的
    svg,并将这几个字体保存到 OSS
     

     

     

     

     

    JavaScript

     

    1
    2
    3
    4
    5
    6
    7
    8
    //创建空白字体,使用 svg 生成字体
    var font = fontCarrier.create();
    values.forEach(function(v) {
      font.setSvg(v.word,v.svg);
    });
    return font.output({
      types:[‘woff’]
    })[‘woff’];

  • 最终渲染时经过的笔录的移动使用的书体名拼出 OSS 路径来引用文件

浅析难题

透过排查和测试,最终发现原因在于转变 svg 片段时,模块给那么些 svg
加上了宽和高,那是不要求的,在浮现汉字等全角字符时,一切平常,而在显示半角字符时,则会造成两边出现空当。

font-carrier 模块基本原理

解析难点

因此排查和测试,最后发现原因在于转变 svg 片段时,模块给这一个 svg
加上了宽和高,那是不须要的,在突显汉字等全角字符时,一切不奇怪,而在展现半角字符时,则会导致两边出现空当。

新的难题

在健康运维了一段时间后,用户反映了新的题材,编辑和预览时的字宽度不般配,现象为具备的字符都变成了全角形式,数字,字母和符号,都占据了3个中国字的义务。如图:

美高梅开户网址 7

杀鸡取卵方案

在无法转移 font-carrier
模块的前提下,只可以在大家自个儿的流程中加补丁,作者在读取 svg
使用前,额外增添了交替代码将宽高删除,声明可以消除该难点。此外作者也知会了模块开发者,在以后的版本中修复此难题。修复后效果如图:

美高梅开户网址 8

font-carrier 模块使用 OpenType 模块分析 ttf
文件,可以文件的故事情节脚本化,使其成为三个字符 unicode
编码和其字形描述的键值对象。通过对这么些目的的 min
方法,可以使其最小化,并且再逆向生成文件 Buffer 供用户使用。

解决方案

在不可以改观 font-carrier
模块的前提下,只幸好大家协调的流水线中加补丁,小编在读取 svg
使用前,额外增添了交替代码将宽高删除,注明可以化解该难题。别的作者也知会了模块开发者,在现在的版本中修复此难题。修复后效果如图:

美高梅开户网址 9

分析难点

因而排查和测试,最终发现原因在于转变 svg 片段时,模块给那个 svg
加上了宽和高,那是不须求的,在体现汉字等全角字符时,一切不荒谬,而在呈现半角字符时,则会导致两边出现空当。

前途展望

  • 当下大家运用引用字体文件的主意来定义高级字体,而近年来团队的有线端最佳实践的渴求,有线端使用的字体将字体文件
    base 64
    化,以压缩请求数,未来大家也将改造成那种艺术,不但符合最佳实践的须求,同时还足以节省
    OSS 存储的能源。
  • 下一阶段大家将调研 svg
    在移动端的包容性和属性,未来开发的插入几何样子功效将考虑使用这一技能,同是大家也会尝试直接用
    svg 绘制字体,爆发更加多的只怕(比如 svg
    动画等),要求考虑包容性和渐进方案。

    1 赞 1 收藏
    评论

美高梅开户网址 10

一期兑现流程

前景展望

  • 时下大家拔取引用字体文件的方法来定义高级字体,而如今集团的有线端最佳实践的渴求,有线端使用的书体将字体文件
    base 64
    化,以缩减请求数,今后咱们也将改造成这种措施,不但符合最佳实践的渴求,同时仍能节约
    OSS 存储的能源。
  • 下一阶段大家将调研 svg
    在运动端的包容性和性质,以后支出的插入几何样子功用将考虑使用这一技能,同是大家也会尝试直接用
    svg 绘制字体,爆发愈多的大概(比如 svg
    动画等),须求考虑包容性和渐进方案。

QQ技术沟通群290551701 

原文出处:Tmall前端团队(FED)- 龙驭 背景 近期在开发多少个 H5
活动页快速搭建平台,…

化解方案

在不可以改观 font-carrier
模块的前提下,只能在我们温馨的流水线中加补丁,作者在读取 svg
使用前,额外伸张了交替代码将宽高删除,讲明可以缓解该难题。其余作者也知会了模块开发者,在今后的本子中修复此难题。修复后效果如图:

美高梅开户网址 11

在先后运行后通过 font-carrier
模块将地点的书体文件包装成字体对象,保存在服务器内存中。

前景展望

  • 当下我们利用引用字体文件的艺术来定义高级字体,而近期公司的有线端最佳实践的需要,有线端使用的字体将字体文件
    base 64
    化,以缩短请求数,今后大家也将改造成那种方法,不但符合最佳实践的须要,同时仍能节省
    OSS 存储的能源。
  • 下一阶段我们将调研 svg
    在移动端的兼容性和品质,以后开发的插入几何样子作用将考虑采取这一技能,同是大家也会尝试直接用
    svg 绘制字体,暴发越多的大概(比如 svg
    动画等),必要考虑包容性和规行矩步方案。

QQ技术交换群290551701 

用户保存页面时,记录下此运动有所应用的高等字体和呼应的文字内容

透过 font-carrier 模块找到字体对应的字体对象,使用 min
命令生成最小化的书体对象

利用 min 命令生成减少后的字体文件,保存到 OSS,并以活动的 id
为路径,字体的名字为文件名。

说到底渲染时通过记录的移位选择的字体名拼出 OSS 路径来引用文件

留存难点

出于字体数量较多,运行时将地面字体文件包装成字体对象的小时非常短,可达到数十分钟。

字体对象常驻内存,占用巨大,甚至或许直接吃光内存

浅析难点

因为 font-carrier
模块生成的字体对象不能够透过文件来持久化保存,只可以生成后常驻内存中,而字体的多寡多,大小也大,所以随便是浮动的时日,生成时消耗的习性,生成后占用的内存都分外巨大。所以难题的关键在于怎么着把字体的辨析结果持久化保存在服务器中。

竭泽而渔方案

在发问了 font-carrier 模块的开发者后,明白到 font-carrier
模块还有生成字体的 svg 片段的主意,可以将字体的图元数据变动为 svg
输出,并可以将 svg 逆向导入到空字体文件中来扭转最后字体文件。

透过将字体分析转译后的 svg
片段结果保存在数据库中,即可持久化分析结果。使用的时候经过创办空字体->配置字符-svg
的照应关系->提取字体->上传到 OSS
的流程来拔取最小化后的书体即可。

二期已毕流程

建立提取字体任务,运营时遍历字体文件,提取其中的 svg 片段存入数据库

var transFont = fontCarrier.transfer(__dirname + ‘/../../www/fonts/’

  • fontInfo.font_name + ‘.ttf’);

var words = [];

_.each(transFont.__glyphs, function(n, word) {

words.push({

 word: word,

 fontId: fontInfo.id,

 svg: transFont.getSvg(word, {

   skipViewport: true

 })

});

});

以下是一段方正喵呜体中的“作者”字提取的 svg 片段

<?xml version=”1.0″ encoding=”utf-8″?>

  <!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN”
“;

  <svg version=”1.1″ xmlns=””
xmlns:xlink=”” x=”0″ y=”0″ width=”100px”
height=”100px” viewBox=”0 0 1000 1000″>

  <path d=”M324 857Q324 837 332 819 340 801 340 775 317 775 296.5
776.5 276 778 253 778 237 778 224.5 769.5 212 761 212 742 212 731 221
722 230 713 242 712L333 703Q348 703 353 691 357 662 357.5 643 358 624
358 596L358 559Q357 554 353 554 351 554 349 554 313 554 278 558.5 243
563 208 563 193 563 182 557 171 551 171 533.5 171 516 184 507 197 498
217.5 494 238 490 261 489 286 489 306.5 488.5 327 488 342 487 357 486
358 479L358 461Q358 458 356.5 434.5 355 411 352 384 349 357 344.5 335
340 313 333 313 332 313 329 315 326 317 325 318L270 372Q265 377 259
378 255 381 248 381 217 381 217 348 217 340 218 334 219 328 225
322L420 132Q426 125 432 124 438 123 446 123 460 123 469.5 130.5 479
138 479 152 479 160 474 168 471 176 465 181 462 185 452.5 194.5 443
204 432 214.5 421 225 411.5 234.5 402 244 399 247 398 249 397 252 396
255 395 256L395 259 395 260Q402 290 408 315 414 340 417.5 364.5 421
389 423.5 414.5 426 440 428 471L433 479Q433 480 442 480 451 480 456
480 475 480 492 479.5 509 479 528 476L528 449Q528 399 523.5 348.5 519
298 519 247 519 228 523 215 529 201 550 201 565 201 573 209.5 581 218
584 231 587 244 587.5 257.5 588 271 589 281 589 287 591 310 593 335
594 362 595 389 596 412 598 437 598 442 598 447 598 451 598 457 600
462L602 476 611 479 723 479Q742 480 759.5 486.5 777 493 777 515 777
526 770.5 536 764 546 752 546L628 546 615 550Q614 551 614 553 614 557
614 559 614 564 619 583 623 604 629 625 635 646 642.5 663 650 680 656
680 666 680 673 667 682 655 691 639 701 625 714 611 726 599 743 599
756 599 766.5 606.5 777 614 777 629 777 642 764.5 658.5 752 675 736
692 722 709 709 723 697 739 697 747L697 748Q697 749 698 749 704 756
710 764 718 773 726.5 780.5 735 788 745 794 755 800 764.5 800 774 800
782 796 790 794 799 794 812 794 821 805 830 816 830 829 830 851 812
862 796 873 777 873 755 873 736.5 866 718 859 701.5 847 685 835 669.5
821 654 807 640 795 631 800 623.5 806.5 616 813 609 818.5 602 824
593.5 828.5 585 833 575 833 544 833 544 803 544 798 544.5 794.5 545
791 548 786L598 737 598 725Q576 688 562.5 642 549 596 540 554 538 550
532.5 548 527 546 522 546L519 546Q514 546 503 546 493 548 481.5 548.5
470 549 459.5 549.5 449 550 445 550 442 552 438.5 553.5 435 555 433.5
558.5 432 562 429 574 428 588 428 591 428 596 427.5 607.5 427 619 426
632.5 425 646 424 657 424 670 424 674 424 681 426 682 428 683 432 683
444 683 454.5 681 465 679 477.5 679 490 679 500.5 686.5 511 694 511
708 511 727 499 733 486 741 470 744 454 747 439.5 749 425 751 420 761
419 763 417.5 767.5 416 772 416 774 415 779 411.5 791.5 408 804 404.5
817.5 401 831 398 843 396 857 395 861 385 886 357 886 343 886 333.5
878.5 324 871 324 857M668 269Q668 254 677 246 687 240 699 240 716 240
726 251 736 262 743 277 745 281 750 292 755 303 760 316 765 329 769.5
339.5 774 350 777 355L777 369Q777 385 770.5 393.5 764 402 746 402 735
402 721.5 385 708 368 696.5 346 685 324 676 301 668 280 668 269Z”/>

  </svg>

保留活动时成立空字体,导入须求的字符和其相应的 svg,并将以此字体保存到
OSS

//创立空白字体,使用 svg 生成字体

var font = fontCarrier.create();

values.forEach(function(v) {

  font.setSvg(v.word,v.svg);

});

return font.output({

  types:[‘woff’]

})[‘woff’];

最后渲染时通过的记录的活动选择的字体名拼出 OSS 路径来引用文件

新的标题

在常规运维了一段时间后,用户反馈了新的难题,编辑和预览时的字宽度不匹配,现象为持有的字符都改成了全角情势,数字,字母和标志,都挤占了2个汉字的职位。如图:

解析难点

由此排查和测试,最终发现原因在于转变 svg 片段时,模块给那几个 svg
加上了宽和高,那是不须求的,在突显汉字等全角字符时,一切日常,而在体现半角字符时,则会导致两边出现空当。

缓解方案

在不能更改 font-carrier
模块的前提下,只可以在大家友好的流程中加补丁,作者在读取 svg
使用前,额外伸张了交替代码将宽高删除,注脚方可搞定该难题。其余小编也知会了模块开发者,在未来的版本中修复此题材。修复后效果如图:

美高梅开户网址 12

前景展望

眼前大家运用引用字体文件的措施来定义高级字体,而多年来组织的无线端最佳实践的须求,有线端使用的字体将字体文件
base 64
化,以压缩请求数,今后我们也将改造成那种措施,不但符合最佳实践的须要,同时还足以省去
OSS 存储的能源。

下一阶段大家将调研 svg
在活动端的包容性和天性,今后支出的插入几何样子功用将考虑接纳这一技巧,同是大家也会尝试直接用
svg 绘制字体,暴发更加多的或许性(比如 svg
动画等),须求考虑包容性和安分守己方案。

我们是一群热爱IT的年青人,假使你也爱IT、爱运动端支出,欢迎参与我们,让大家一齐为希望发声。

关怀蓝鸥(lanou3g),推送IT新知识与情报,让您天天进步一点点。

PS:喜欢你就点个赞,有用你就收进后宫,认识程序员你就转会一下辣。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图