WOFF字体简介（含应用实例）

马黑黑 · 发表于 2026-7-12 16:04

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

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）框架，在其基础上进行全新设计与压缩

使用 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>

关于 FontWithASyntaxHighlighter 字体：

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

彩色字形（OpenType COLR）：为同一个字母（如 o）制作多个不同颜色的版本，比如红色的 o、蓝色的 o 等。

上下文替代（Contextual Alternates）：字体内置了一套匹配规则，能根据字符上下文（比如判断 if 是关键字）自动“变脸”，将其替换成对应颜色的彩色字形，从而实现高亮。

字体详情请参阅：作者 Blog

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

【其它说明】

字体高亮规则有明显局限性，可满足简单高亮需求

字体提供9种高亮颜色规则，可按索引重新设计

字体对中文的支持可能存在一定缺陷