H5页面超快搭建之高端字体接收施行

H5页面非常快搭建之高档字体接纳施行

2016/04/15 · HTML5 · 字体

原著出处: Tmall前端团队(FED卡塔 尔(阿拉伯语:قطر‎- 龙驭   

图片 1

来源:Tmall前端团队(FED卡塔 尔(英语:State of Qatar)- 龙驭

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

背景

  • 方今在支付贰个 H5 活动页火速搭建平台,能够透过拖拽编辑图片,文字等成分组件,快速搭建出多少个平移端的活动页面,基本交互作用和成品效果相符PPT 软件。那类活动一大波在微信等平台上传播,当中会包涵各个卡通和特效,而各种高端艺术字体(如:方正湖心亭黑,方正彩云,方正大草,方正剑体等卡塔 尔(英语:State of Qatar)的运用也要命普及。
  • 事先客商只可以通过 ps 等软件将文字转变为图片再贴到平台上运用。使用资金相当高,改过,调节和测量试验都不行不方便,而且图片占用的能源也比很多,为了缩小客户的应用资金,基于一条龙搭建的意见,大家须求将高等字体的选拔透明化,使顾客和选取PPT 同样直接选取字体接收就能够。

图片 2

技术选型

  • 首先种方案是经过客户输入的文字,和甄选的书体,通过服务器生成对应的图纸来采用。这种方案的独特之处是逻辑轻便,弱点是搭建/校正时扩展了复杂度,调节和测量试验时力不胜任实时预览文字在活动中的效果。何况轻易并发大批量冗余图片,最后页面包车型客车图纸诉求也会增添。
  • 其次种方案是调用 iconfont.cn 的服务接口,通过传递字体和文字内容来博取字体文件。这种方案的优点是能够从来利用现存成熟平台,开拓花销低,可信赖。瑕玷是充实了表面信任,不但面前碰着合营方同盟的范围,并且不能够活动决定可供的选项字体等。
  • 最后采用的的第三种方案是直接使用 iconfont.cn 的 Node.js 模块 (font-carrier卡塔尔 ,自行分析/生成字体,将扭转的书体放在大家同心合力报名的 OSS 中蕴藏使用。这种方法的开拓量最大,且要消耗额外的 OSS 财富,不过整个工艺流程独当一面,能够不停定制优化,自行增加字体等,由于大家的劳动只面向移动端,所以只必要转移 ttf 只怕 woff 生龙活虎种文件类型就能够包容。

背景

字体文件解析的基本原理

近年在开垦一个 H5 活动页快捷搭建平台,能够由此拖拽编辑图片,文字等要素组件,神速搭建出叁个移动端的活动页面,基本交互作用和产物效果相同PPT 软件。那类活动大批量在Wechat等平台上盛传,个中会蕴藏各样卡通和特效,而各队高端艺术字体(如:方正湖心亭黑,方正彩云,方正大草,方正剑体等卡塔尔国的利用也非常布满。

字体文件的宗旨结构

以 ttf 文件为例,字体文件中注重满含了字体头表,地方索引表和图元数据表等等,此中最宗旨的一些正是图元数据表,约等于字形描述表,它能够富含可变多少的图元,每种图元能够有区别数量的调控点,以至还足以有多少可变的图元指令,通过岗位索引表对应到每一种字符上,通过图元数据表,使其只含有要求运用的字符的图元描述。就能够最小化字体,使其可用来坐褥条件的页面中,别的品类的书体文件(如 woff, eot, svg 等卡塔 尔(英语:State of Qatar)原理也是千篇生机勃勃律,仅仅是裁减方式和字形描述标准差别,也足以相互转变。

事先客商只可以通过 ps 等软件将文字转变为图片再贴到平台上应用。使用资金相当的高,改进,调节和测验都十一分劳碌,何况图片占用的财富也比超多,为了减弱客户的接纳资金,基于一条龙搭建的思想,大家必要将高档字体的应用透明化,使客商和应用 PPT 相似直接选用字体接收就可以。

font-carrier 模块基本原理

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

技巧选型

生机勃勃期兑现流程

  • 在程序运行后透过 font-carrier 模块将地面包车型大巴字体文件包装成字体对象,保存在服务器内部存款和储蓄器中。
  • 顾客保存页面时,记录下此运动具有应用的高级级字体和呼应的文字内容
  • 通过 font-carrier 模块找到字体对应的书体对象,使用 min 命令生成最小化的字体对象
  • 运用 min 命令生成降低后的字体文件,保存到 OSS,并以活动的 id 为路径,字体的名为文件名。
  • 谈到底渲染时通过记录的位移采用的字体名拼出 OSS 路线来引用文件

第生龙活虎种方案是透过客商输入的文字,和抉择的字体,通过劳务器生成对应的图形来使用。这种方案的助益是逻辑简单,劣势是搭建/改革时扩大了复杂度,调节和测验时无可奈何实时预览文字在活动中的效果。何况轻巧现身多量冗余图片,最后页面包车型地铁图样诉求也会扩展。

留慰劳题

  • 是因为字体数量非常多,运维时将本地字体文件包装成字体对象的大运非常短,可高达数十一分钟。
  • 字体对象常驻内部存款和储蓄器,占用宏大,以致恐怕直接吃光内部存款和储蓄器

第三种方案是调用 iconfont.cn 的服务接口,通过传递字体和文字内容来获取字体文件。这种方案的亮点是足以一贯行使现存成熟平台,开采花费低,可相信。瑕疵是充实了外部信赖,不但直面合作方协作的限量,况兼不可能活动决定可供的选项字体等。

分析难题

因为 font-carrier 模块生成的字体对象不能通过文件来长久化保存,只好生成后常驻内部存款和储蓄器中,而字体的多寡多,大小也大,所以无论是变化的时日,生成时消耗的质量,生成后占用的内部存款和储蓄器都足够了不起。所以难题的关键在于如何把字体的深入分析结果长久化保存在服务器中。

最后采用的的第二种方案是直接使用 iconfont.cn 的 Node.js 模块 (font-carrier卡塔 尔(阿拉伯语:قطر‎ ,自行深入解析/生成字体,将转移的书体放在大家安危与共报名的 OSS 中蕴藏使用。这种艺术的开荒量最大,且要消耗额外的 OSS 能源,可是全部工艺流程白手成家,能够不停定制优化,自行增添字体等,由于大家的劳动只面向移动端,所以只需求转移 ttf 恐怕 woff 风流洒脱种文件类型就可以包容。

建设方案

在发问了 font-carrier 模块的开荒者后,掌握到 font-carrier 模块还会有生成字体的 svg 片段的不二秘诀,能够将字体的图元数据变化为 svg 输出,并得以将 svg 逆向导入到空字体文件中来变化最后字体文件。
经过将字体深入分析转译后的 svg 片段结果保存在数据库中,就可以长久化深入分析结果。使用的时候经过创办空字体->配置字符-svg 的对应关系->提取字体->上传到 OSS 的流水生产线来行使最小化后的书体就可以。

字体文件分析的基本原理

二期完成流程

  • 树立提取字体职责,运维时遍历字体文件,提取当中的 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 路线来引用文件

字体文件的骨干结构

新的题目

在健康运维了生龙活虎段时间后,客商反馈了新的难点,编辑和预览时的字宽度不宽容,现象为具有的字符都成为了全角格局,数字,字母和标记,都挤占了三个汉字的岗位。如图:

图片 3

以 ttf 文件为例,字体文件中首要满含了字体头表,地点索引表和图元数据表等等,当中最主题的片段正是图元数据表,也正是字形描述表,它能够包涵可变多少的图元,各个图元能够有两样数额的调节点,以至还足以有数据可变的图元指令,通过岗位索引表对应到每一种字符上,通过图元数据表,使其只蕴涵须要动用的字符的图元描述。即可最小化字体,使其可用以坐蓐碰着的页面中,别的门类的书体文件(如 woff, eot, svg 等卡塔尔国原理也是连镳并轸,仅仅是削减方式和字形描述标准差异,也能够相互转变。

深入分析难题

通过每种检测,最后发掘原因在于调换 svg 片段时,模块给那么些 svg 加上了宽和高,那是不供给的,在显示汉字等全角字符时,一切符合规律,而在显示半角字符时,则会引致两侧出现空当。

font-carrier 模块基本原理

解决方案

在不恐怕改观 font-carrier 模块的前提下,只好在我们团结的流程中加补丁,作者在读取 svg 使用前,额外增添了轮换代码将宽高删除,表明能够解决该难点。其它笔者也知会了模块开采者,在现在的版本中期维修复此主题材料。修复后效果如图:

图片 4

font-carrier 模块使用 OpenType 模块深入分析 ttf 文件,能够文件的内容脚本化,使其改为叁个字符 unicode 编码和其字形描述的键值对象。通过对那么些目的的 min 方法,能够使其最小化,何况再逆向生成文件 Buffer 供客户选取。

前途张望

  • 日前大家利用援用字体文件的主意来定义高等字体,而近些日子公司的有线端最好实施的要求,有线端使用的字体将字体文件 base 64 化,以减弱要求数,未来大家也将改换成这种格局,不但相符最好施行的须要,同期仍能节省 OSS 存款和储蓄的能源。
  • 下少年老成阶段大家将科研 svg 在移动端的宽容性和属性,以后开垦的插入几何样子效能将思谋选取这一能力,同是我们也会尝试直接用 svg 绘制字体,产生更加多的恐怕(比如 svg 动漫等卡塔尔国,需求思谋包容性和鲁人持竿方案。

    1 赞 1 收藏 评论

图片 5

豆蔻梢头期兑现流程

在前后相继运营后通过 font-carrier 模块将当地的书体文件包装成字体对象,保存在服务器内部存款和储蓄器中。

客商保存页面时,记录下此活动具备应用的高端字体和相应的文字内容

经过 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 路线来援引文件

新的难点

在常规运营了生龙活虎段时间后,顾客举报了新的标题,编辑和预览时的字宽度不相称,现象为富有的字符都形成了全角方式,数字,字母和标识,都占领了三个汉字的职责。如图:

分析难题

经过排查核对和测量试验,最后开掘原因在于转换 svg 片段时,模块给这几个 svg 加上了宽和高,那是无需的,在体现汉字等全角字符时,一切寻常,而在显示半角字符时,则会促成两边现身空当。

杀鸡取蛋方案

在不能够改观 font-carrier 模块的前提下,只可以在咱们协和的流程中加补丁,我在读取 svg 使用前,额外扩充了轮流代码将宽高删除,表明能够解决该难点。别的小编也知会了模块开拓者,在今后的版本中期维修复此主题素材。修复后效果如图:

图片 6

前途远望

当前大家利用援引字体文件的办法来定义高端字体,而近年来共青团和少先队的无线端最棒实行的供给,有线端使用的字体将字体文件 base 64 化,以收缩央求数,未来大家也将更正成这种办法,不但相符最好执行的供给,同不平日候还足以节省 OSS 存款和储蓄的财富。

下生龙活虎阶段大家将实验研讨 svg 在移动端的宽容性和性质,现在支付的插入几何样子功效将思量选拔这一手艺,同是大家也会尝试直接用 svg 绘制字体,产生越来越多的恐怕(比方 svg 动漫等卡塔尔,须求思索包容性和安分守纪方案。

咱俩是一批热爱IT的青少年人,纵然你也爱IT、爱运动端支出,迎接参预大家,让大家风流罗曼蒂克道为梦想发声。

关切蓝鸥(lanou3g),推送IT新知识与谍报,让您天天升高级中学一年级丝丝。

PS:喜欢你就点个赞,有用你就收进后宫,认知技术员你就转载一下辣。

本文由星彩网app下载发布于前端技术,转载请注明出处:H5页面超快搭建之高端字体接收施行

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。