为什么要截取字体?

众所周知,相对于英文字体,中文字体天生是“庞然大物”。英文字体两三百KB已经很大了,而中文字体几MB十几MB都算小的。一方面,中文字体包含的字形数量极多,动辄数以千计甚至万计,而英文字体则只需包含几十个基本字符和符号,哪怕支持多种语言及字符变体,容量达到三千多个字形已经算非常庞大的了。另一方面,中文字形的曲折变化复杂度高,在基于轮廓的矢量字体设计中,用于控制中文字形曲线的控制点普遍比英文更多,因而需要的数据量更大,也会导致字体文件膨胀。

前端开发实践中,为了实现一些特殊视觉效果,经常需要使用某些特殊字体,而用户电脑上几乎不太可能安装这些字体,这时候通常需要使用Web字体技术,让浏览器动态下载我们的自定义字体。可是中文字体非常庞大,很多时候“全量”加载某个字体文件是不现实的。特别是对于一些动态页面且每个页面只有少量字符用到该字体的情况下。当然,也不是每个页面都会用到一个字体文件中的所有字符,全量加载本身也极其浪费。

研究表明,3500常用中文汉字(中国义务教育9年级需要掌握的汉字数量)即可覆盖日常使用汉字的99.8%:

  • 500 字(78.53202%)
  • 1000字(91.91527%)
  • 1500字(96.47563%)
  • 2000字(98.38765%)
  • 2500字(99.24388%)
  • 3000字(99.63322%)
  • 3500字(99.82015%)

可见,最常用的前500个汉字的覆盖率已经达到78%。因此,“全量”加载某个字体,特别是中文字体,在当前网络环境下不仅浪费流量和时间,而且也是完全没有必要的。这时候,我们可以根据网页用到的字符来截取字体的片段,这个技术英文叫subset,也就是“取子集”。

本文首先简单回顾Web自定义字体的技术规范,然后通过实例介绍两种前端常用的截取字体的技术。首先是CSS中的unicode-range属性,我们称之为“软截取技术”,因为它只是在本地既有字体或者浏览器已经下载的字体基础上做一个指向子集的“软链接”,并不能真正减小浏览器下载文件的大小。其次是Node命令行工具glyphhanger,我们称之为“硬截取技术”,即在服务端从“全量”字体中分离出一个体积相对极小的字体子集,做成Web字体通过Web服务器或CDN下发给浏览器。

无论是“软截取”,还是“硬截取”,都会用到Web字体和@font-face规则。因此,我们需要先来了解一下这个基础的Web标准语法。

- 阅读剩余部分 -

Web应用基于C/S(Client/Server)服务模型搭建:客户端发送请求,服务端负责响应。一般客户端就是浏览器,但可以向服务器发送请求的软件则远远不限于浏览器。Web服务器通常以公开的域名接收请求并提供服务,需要应对任何来源的请求。

保障Web应用的安全需要前后端配合,但主要还是服务端。服务端需要全面分析项目所实现的功能,对任何可能暴露漏洞、引发攻击的接口,都要提前拟定防御措施,由前后端共同配合实施,落实到位。

本文总结了Web应用最常见的6种漏洞,并对这些漏洞的危害、成因以及解决方案进行了简要分析。

  • SQL注入
  • 权限绕过
  • XSS
  • CSRF
  • SSRF
  • 邮件/短信轰炸

- 阅读剩余部分 -

ES7(ECMAScript 2016)推出了Async函数(async/await),实现了以顺序、同步代码的编写方式来控制异步流程,彻底解决了困扰JavaScript开发者的“回调地狱”问题。比如,之前需要嵌套回调的异步逻辑:

const result = [];
// pseudo-code, ajax stand for an asynchronous request
ajax('url1', function(err, data){
    if(err) {...}
    result.push(data)
    ajax('url2', function(err, data){
        if(err) {...}
        result.push(data)
    })
})
console.log(result)

现在可以写成如下同步代码的样式了:

async function example() {
  const r1 = await new Promise(resolve =>
    setTimeout(resolve, 500, 'slowest')
  )
  const r2 = await new Promise(resolve =>
    setTimeout(resolve, 200, 'slow')
  )
  return [r1, r2]
}

example().then(result => console.log(result))
// ['slowest', 'slow']

Async函数需要在function前面添加async关键字,同时内部以await关键字来“阻塞”异步操作,直到异步操作返回结果,然后再继续执行。在没有Async函数以前,我们无法想象下面的异步代码可以直接拿到结果:

const r1 = ajax('url')
console.log(r1)
// undefined

这当然是不可能的,异步函数的结果只能在回调里拿到。可以说,Async函数是JavaScript程序员在探索如何高效异步编程过程中踩“坑”之后的努力“自救”获得的成果——不是“糖果”。然而,读者小哥哥小姐姐可能有所不知,Async函数实际上是一个语法糖(果然是“糖果”吗?),它的背后是ES6(ECMAScript 2015)中推出的Promise、Iterator和Generator,我们简称“PIG”。本文就带各位好好品尝品尝这块语法糖,感受一个PIG是如何成就Async函数的。

- 阅读剩余部分 -

计算机科学领域有几个概念,乍一听很相似,但实际上差别非常大,它们是:迭代、遍历、枚举、递归、循环。

这些概念,对于写码为生的人而言,大部分都应该不陌生。但如果让谁确切地说出它们的含义,恐怕还真没有几个能够全都说对的。时间关系,本文就简单地对这些概念做一番梳理,供大家参考。

1. 迭代(iteration)

迭代,是一个重复的过程,目的是为了输出一系列值(可能是无穷序列)。每次重复的过程也叫一次“迭代”,一次迭代的结果,可以作为下一次迭代的起点。

2. 遍历(traversal)

遍历,一般是指对树形数据结构的操作,比如树遍历(也叫树搜索),就是对树形数据结构每个节点进行访问(为了检查和/或更新),且每个节点只访问一次。这种遍历是按照访问节点的顺序分类的,比如深度优先或宽度优先。

- 阅读剩余部分 -

Flexbox已经得到主流浏览器较新版本的广泛支持。对于某些需要兼容的旧版本浏览器,只要调整一下语法或提供商前缀,基本上也没问题。

两套属性

Flexbox有两套属性,一套针对可伸缩容器(flexible container),一套针对容器的直接子元素,或可伸缩项(flexible item)。

Flex容器,即应用display:flex;display: inline-flex规则的元素,可以接受如下属性:

  • flex-direction:指定主轴方向是水平还是垂直
  • flex-wrap:指定可伸缩项是否折行
  • flex-flow:以上两个属性的简写形式
  • justify-content:指定可伸缩项在主轴方向上的对齐方式
  • align-items:指定可伸缩项在辅轴方向上的对齐方式
  • align-content:指定多行可伸缩项在辅轴方向上的对齐方式

容器的直接子元素或者可伸缩项,可以接受如下属性:

  • flex-grow:指定当前项如何扩展
  • flex-shrink:指定当前项如何收缩
  • flex-basis:指定分配剩余空间之前当前项的初始大小
  • flex:以上三个属性的简写形式
  • order:指定当前项在容器中出现的次序

针对容器的属性非常容易理解,而针对可伸缩项的属性则不好理解。更确切地说,是flex-growflex-shrinkflex-basis属性不好理解。只有理解了这三个属性,你才能说自己真正理解了Flexbox。

- 阅读剩余部分 -