马黑黑《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">
<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>
</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>
代码高亮，看起来更清爽呢
页:
[1]