WOFF字体简介（含应用实例）转自马黑博客

admin

马黑博客    https://mahei.ccccocccc.cc/art/?st=1&id=1783855571

WOFF 是 Web Open Font Format（网页开放字体）的简称，是专为网页设计的压缩字体格式，2009年有 Mozilla（开发火狐浏览器的公司）主导开发，2012年成为 W3C 标准。

两个版本

WOFF 1.0 ：字体文件后缀名为 .woff，比 TTF 小约 40%，IE9+、Chrome 6+、Firefox 3.6+、Safari5.1+ 完美支持

WOFF 2.0 ：字体文件后缀名为 .woff2，采用谷歌开发的 Brotli 算法压缩，压缩率再提升 30%~50%，现代浏览器完美支持

【注】WOFF字体基于 TTF（TrueType Font）或 OTF（OpenType Font）框架，在其基础上进行全新设计与压缩

admin

使用 WOFF 字体，可以在 CSS 中 通过 @font-face 自定义字体。假设我们拥有一个名为 mywoff.woff 的字体文件、其定义的字体名称为 myfont，可以这样加载和自定义：

/* 加载和定义字体 */@font-face {    font-family: 'myfont';    src: url('../mywoff.woff') format('woff');}/* pre 选择器应用自定义字体 */pre {    font-family: myfont;}

下面以基于 WOFF2 的字体 FontWithASyntaxHighlighter 为例给出一个应用实例。该字体，顾名思义，是一个语法高亮字体，针对 CSS、HTML 和 JS 进行设计，通过字体里的语法解析器智能高亮代码中的相关字符。下面演示加载字体和具体应用：

<style>    @font-face {        font-family: 'FontWithASyntaxHighlighter';        src: url('https://638183.freep.cn/638183/web/css/hl.woff2') format('woff2');    }    .hl {        font-family: "FontWithASyntaxHighlighter", monospace;        width: 600px;        height: 300px;        overflow: auto;        background: #000;        color: #eee;        font-size: 18px;        padding: 1rem;        display: block;        margin: auto;    }    .tMid { text-align: center; }</style><h2 class="tMid">下面的 textarea 编辑器可以继续输入代码</h2><textarea id="codeBox" class="hl"><div>世界你嚎</div></textarea>   

下面的 textarea 编辑器可以继续输入代码<div>世界你嚎</div>   

点我查看效果

关于 FontWithASyntaxHighlighter 字体：

该字体之所以能高亮代码，秘密全在特制的字体文件里，主要依靠两项OpenType技术：

• 彩色字形（OpenType COLR）：为同一个字母（如 o）制作多个不同颜色的版本，比如红色的 o、蓝色的 o 等。
• 上下文替代（Contextual Alternates）：字体内置了一套匹配规则，能根据字符上下文（比如判断 if 是关键字）自动“变脸”，将其替换成对应颜色的彩色字形，从而实现高亮。
  

字体详情请参阅：作者 Blog

该字体默认以黑底白字为设计基础，若不喜欢，可以通过字体提供的调色板机制重设高亮颜色（具体操作可能会另文介绍）。

【其它说明】

• 字体高亮规则有明显局限性，可满足简单高亮需求
• 字体提供9种高亮颜色规则，可按索引重新设计
• 字体对中文的支持可能存在一定缺陷