论坛 › 马黑黑教程专版 › WOFF字体简介（含应用实例）

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

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

<style>
    @font-face { font-family: 'FontWithASyntaxHighlighter'; src: url('https://638183.freep.cn/638183/web/css/hl.woff2') format('woff2'); }
    .artBox { margin: 20px auto; font: normal 18px/26px sans-serif; max-width: 1200px; }
    .artBox blockquote { padding: 14px; border: solid gray; border-width: 0 4px; border-radius: 10px; background: #ddd; }
    .artBox p { margin: 10px 0; }
    .tMid { text-align: center; }
    .woff { font-family: 'FontWithASyntaxHighlighter', monospace; background: #333; color: #eee; white-space: pre-wrap; word-break: break-all;padding: 1rem; }
</style>

<div class="artBox">
    <p>WOFF 是 Web Open Font Format（网页开放字体）的简称，是专为网页设计的压缩字体格式，2009年有 Mozilla（开发火狐浏览器的公司）主导开发，2012年成为 W3C 标准。</p>
    <blockquote>
      <h3>两个版本</h3>
      <p>WOFF 1.0 ：字体文件后缀名为 .woff，比 TTF 小约 40%，IE9+、Chrome 6+、Firefox 3.6+、Safari5.1+ 完美支持</p>
      <p>WOFF 2.0 ：字体文件后缀名为 .woff2，采用谷歌开发的 Brotli 算法压缩，压缩率再提升 30%~50%，现代浏览器完美支持</p>
      <p>【注】WOFF字体基于 TTF（TrueType Font）或 OTF（OpenType Font）框架，在其基础上进行全新设计与压缩</p>
    </blockquote>
    <p>使用 WOFF 字体，可以在 CSS 中 通过 @font-face 自定义字体。假设我们拥有一个名为 mywoff.woff 的字体文件、其定义的字体名称为 myfont，可以这样加载和自定义：</p>
    <pre class="woff">/* 加载和定义字体 */
@font-face {
    font-family: 'myfont';
    src: url('../mywoff.woff') format('woff');
}

/* pre 选择器应用自定义字体 */
pre {
    font-family: myfont;
}</pre>
    <p>下面以基于 WOFF2 的字体 FontWithASyntaxHighlighter 为例给出一个应用实例。该字体，顾名思义，是一个语法高亮字体，针对 CSS、HTML 和 JS 进行设计，通过字体里的语法解析器智能高亮代码中的相关字符。下面演示加载字体和具体应用：</p>
    <pre id="codePre" class="woff">
&lt;style&gt;
    @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; }
&lt;/style&gt;

&lt;h2 class="tMid"&gt;下面的 textarea 编辑器可以继续输入代码&lt;/h2&gt;
&lt;textarea id="codeBox" class="hl"&gt;&lt;div&gt;世界你嚎&lt;/div&gt;&lt;/textarea&gt;
    </pre>
    <p class="tMid"><button onclick="showRes()">点我查看效果</button></p>
    <blockquote>
      <h3>关于 FontWithASyntaxHighlighter 字体：</h3>
      <p>该字体之所以能高亮代码，秘密全在特制的字体文件里，主要依靠两项OpenType技术：</p>
      <ol>
            <li>彩色字形（OpenType COLR）：为同一个字母（如 o）制作多个不同颜色的版本，比如红色的 o、蓝色的 o 等。</li>
            <li>上下文替代（Contextual Alternates）：字体内置了一套匹配规则，能根据字符上下文（比如判断 if 是关键字）自动“变脸”，将其替换成对应颜色的彩色字形，从而实现高亮。</li>
      </ol>
      <p>字体详情请参阅：<a href="https://blog.glyphdrawing.club/font-with-built-in-syntax-highlighting/" target="_blank">作者 Blog</a></p>
      <p>该字体默认以黑底白字为设计基础，若不喜欢，可以通过字体提供的调色板机制重设高亮颜色（具体操作可能会另文介绍）。</p>
      <p>【其它说明】</p>
      <ul>
            <li>字体高亮规则有明显局限性，可满足简单高亮需求</li>
            <li>字体提供9种高亮颜色规则，可按索引重新设计</li>
            <li>字体对中文的支持可能存在一定缺陷</li>
      </ul>
    </blockquote>
</div>

<script>
    function showRes() {
      var str = document.getElementById('codePre').textContent;
      var previewWindow = window.open('', 'pccc1', 'width=1280,height=720');
      previewWindow.document.open();
      previewWindow.document.write(str);
      previewWindow.document.close();
    }
</script>

马黑黑 发表于 2026-7-12 16:08

FontWithASyntaxHighlighter 字体高亮Web代码关键字无需借助 JS 的任何操作，并且可以实时高亮，支持任何能输出文本的标签（包括纯文本容器 input 和 textarea），很神奇

马黑黑 发表于 2026-7-12 17:33

一楼的代码演示其实也用到了 FontWithASyntaxHighlighter 高亮字体

梦江南 发表于 2026-7-12 17:53

马黑黑 发表于 2026-7-12 17:33
一楼的代码演示其实也用到了 FontWithASyntaxHighlighter 高亮字体

黑黑老师，这代码字体设置，在电脑里要有字体才能显示啊。

马黑黑 发表于 2026-7-12 19:19

梦江南 发表于 2026-7-12 17:53
黑黑老师，这代码字体设置，在电脑里要有字体才能显示啊。

不需要。这类字体是 Web 制作者提供的有效字体，会下载到浏览器缓存然后产生作用。之前，论坛里 @亚伦影音工作室 有在帖子中使用了网络字体

红影 发表于 2026-7-12 20:33

还有语法高亮字体，真的想不到啊。
感谢黑黑的讲解{:4_187:}

小辣椒 发表于 2026-7-12 21:41

小辣椒欣赏加学习{:4_187:}

霜染枫丹 发表于 2026-7-12 21:58

马老师晚上好~~

感谢您的分享，这个教程很实用，值得好好学习记住。周末快乐{:4_204:}{:4_190:}

马黑黑 发表于 2026-7-12 22:22

霜染枫丹 发表于 2026-7-12 21:58
马老师晚上好~~

感谢您的分享，这个教程很实用，值得好好学习记住。周末快乐

晚上好

马黑黑 发表于 2026-7-12 22:22

小辣椒 发表于 2026-7-12 21:41
小辣椒欣赏加学习

{:4_190:}

马黑黑 发表于 2026-7-12 22:23

红影 发表于 2026-7-12 20:33
还有语法高亮字体，真的想不到啊。
感谢黑黑的讲解

确实想不到

杨帆 发表于 2026-7-12 23:24

很神奇，高亮字体看代码很清爽，谢谢马老师精彩分享{:4_190:}

马黑黑 发表于 2026-7-12 23:54

杨帆 发表于 2026-7-12 23:24
很神奇，高亮字体看代码很清爽，谢谢马老师精彩分享

它不完美，不过完全可以一用。下面的链接是在 textarea 中实现高亮的简易编辑器，基于 mhta.js:

http://mhh.52qingyin.cn/api/pencilcode/

杨帆 发表于 2026-7-13 12:29

马黑黑 发表于 2026-7-12 23:54
它不完美，不过完全可以一用。下面的链接是在 textarea 中实现高亮的简易编辑器，基于 mhta.js:

http: ...

谢谢马老师~我打开这个链接后，代码怎么不会着色呢{:4_190:}

马黑黑 发表于 2026-7-13 12:33

杨帆 发表于 2026-7-13 12:29
谢谢马老师~我打开这个链接后，代码怎么不会着色呢

可能你浏览器的缓存里保留着以前的资源（CSS和JS），需要硬刷新：Ctrl + F5 更新才能看到效果。

刷新后在编辑框输入代码，会实时着色，特别是在按了回车之后

杨帆 发表于 2026-7-13 13:08

本帖最后由 杨帆 于 2026-7-13 14:03 编辑

马黑黑 发表于 2026-7-13 12:33
可能你浏览器的缓存里保留着以前的资源（CSS和JS），需要硬刷新：Ctrl + F5 更新才能看到效果。

刷新 ...
问题解决，大佬威武，若选择的关键字能实现高亮就更好了~谢谢老师{:4_180:}

马黑黑 发表于 2026-7-14 18:25

杨帆 发表于 2026-7-13 13:08
问题解决，大佬威武，若选择的关键字能实现高亮就更好了~谢谢老师
从前几天的文章中看到，这是可以实现的：加一个div层，背景透明、文字透明，匹配选中文字高亮其下文本背景（或用 span 或 用 ::highlights() 伪元素）。

但是，行号已经加了一个 div 层，而且它的主体设计为 visibility: hidden，其伪元素用于显示行号。这意味着，如果要实现高亮匹配被选中文本，得再加一个 div 层。这会让编辑器变得非常复杂了。

当然预想中的两个 div 层可以合并成一个，但这得大刀阔斧改变现有机制，也是非常复杂。

理论上可行的，真要去做，复杂度可能远超想象。

红影 发表于 2026-7-14 20:02

马黑黑 发表于 2026-7-12 22:23
确实想不到

感谢黑黑带来这些代码知识{:4_187:}

杨帆 发表于 2026-7-14 20:42

马黑黑 发表于 2026-7-14 18:25
从前几天的文章中看到，这是可以实现的：加一个div层，背景透明、文字透明，匹配选中文字高亮其下文本背 ...

有思路就行，实操复杂就不必做了，谢谢马老师{:4_190:}

马黑黑 发表于 2026-7-14 20:57

杨帆 发表于 2026-7-14 20:42
有思路就行，实操复杂就不必做了，谢谢马老师

本身就是着眼于简单，所以，基于 textarea 的能上色就以及超出预期了

查看完整版本: WOFF字体简介（含应用实例）