自定义FontWithASyntaxHighlighter字体着色风格
<style>@import 'https://638183.freep.cn/638183/web/css/hl.css';
.artBox { margin: 20px auto; font: normal 18px/26px sans-serif; }
.artBox mark { padding: 2px 6px; background: #ccc; }
.artBox blockquote { padding: 14px; border: solid gray; border-width: 0 4px; border-radius: 10px; background: #ddd; }
.artBox p { margin: 10px 0; }
.artBox pre { white-space: pre-wrap; word-wrap: break-word; }
.tMid { text-align: center; }
</style>
<div class="artBox">
<p>FontWithASyntaxHighlighter 字体能够实现CSS、HTML、JS 简单的语法高亮，支持任意能够渲染文本的元素，默认主题是暗色系即黑底白字。该字体可以自定义主题，通过 CSS 的 font-palette 属性完成，步骤如下：</p>
<pre class="hlCode"><style>
/* 第一步 ：引入字体 */
@font-face {
font-family: 'FontWithASyntaxHighlighter';
src: url('https://638183.freep.cn/638183/web/css/hl.woff2') format('woff2');
}
/* 第二步 ：定义主题 - 配置调色板（基于白底黑字） */
@font-palette-values --customPalette {
font-family: 'FontWithASyntaxHighlighter';
override-colors:
0 red, /* keywords, {} */
1 green, /* comments */
2 darkred, /* literals */
3 purple, /* numbers */
4 blue, /* functions, [] */
5 darkorange, /* js others */
6 black, /* not in use */
7 magenta, /* inside quotes, css properties, few chars */
8 navy /* few chars */
;
}
/* 第三步 ：应用字体 - 在特定选择器中设定字体 */
.hlCode {
font-family: 'FontWithASyntaxHighlighter', monospace;
font-palette: --customPalette;
padding: 1rem;
}
</style></pre>
<blockquote>font-palette CSS 属性允许用户代理指定某个字体所包含众多调色板中的其中一个。用户还可以通过使用 @font-palette-values @ 规则来覆盖调色板中的值或创建一个新的调色板。</blockquote>
<p>上面第二步，使用 font-palette 属性的 @font-palette-values 创建新的调色板以覆盖默认的调色规则，override-color 共 9 个，由“索引号 + 空格 + 颜色值” 构成，每一组用逗号隔开，注释为字体作者提供的原始标注，简要说明了对应颜色的作用对象。索引号必须是 0~8，对应颜色值根据预设场景设置（支持各种颜色表达法）。--customPalette 是自定义CSS变量，后续选择器使用该字体自定义主题的接口依据。不必纠结理论层面的问题，即便不理解属性含义也可以按上述模板设计自己的调色规则就好，关键在于调试不同序号对应的颜色以适应预设的着色风格。</p>
<p>这三步，第一步必须，即使不自定义自己的着色风格也少不了；第二步自定义主题，如果使用默认的黑底白字风格可忽略；第三步是应用字体，若使用默认主题，将 font-palette 属性删掉。考虑到使用该字体的 CSS 代码不少，可以将其做成一个 .css 文件，使用时用 <mark>@import</mark> 方法导入。字体应用的最后一步交给 HTML 元素，只需在对应标签代码中加入 <mark>class="hlCode"</mark> 即可。</p>
<p>下面是一个自定义着色风格的 FontWithASyntaxHighlighter 字体应用实例，支持在线预览效果：</p>
<pre id="myPre" class="hlCode">
<style>
@import 'https://638183.freep.cn/638183/web/css/hl.css';
#myTextArea { display: block; width: 600px; height: 300px; font-size: 18px; padding: 10px; margin: 20px auto; }
</style>
<textarea id="myTextArea" class="hlCode" placeholder="输入代码..."><p>Hello World !</p></textarea></pre>
<p class="tMid"><button id="btnOk">点击运行上述代码</button></p>
<p>【其它说明】貌似 EDGE 浏览器可能会因 WOFF 字体引发异常现象，据称，一般表现为：使用了相应 WOFF 字体的页面会在完好打开后不定时出现页面异常警告，错误代码为 <mark>STATUS_BREAKPOINT</mark>，刷新后正常，过一阵子又重复警告。微软的浏览器使用 Chromium 内核后已经有了长足进步且在较早前就已经支持 woff2 字体，但它太会我行我素，总会不遗余力地制造一大堆瑕疵。</p>
</div>
<script type="module">
import { playCode } from 'https://638183.freep.cn/638183/web/mod/playcode.js';
btnOk.onclick = () => playCode(myPre.textContent);
</script> 黑黑老师辛苦，学习了。{:4_187:} 梦江南 发表于 2026-7-13 12:17
黑黑老师辛苦，学习了。
{:4_180:} 厉害了~着色风格实现了自定义，有方法步骤，有实例示范，为马老师点赞{:4_199:} 精彩的分享 马老师下午好~~
昨晚我想试试，就东拉西拽的凑了几行代码在编辑器能显示，就直接贴到论坛上试试，哈哈~~网页变了样，这一页都跟着在变，被我家那个明白人笑我就是“傻“，他说你想玩我给你改一下模板，我说知道原因就可以了，别改！我想玩可以做截图。
https://s3.bmp.ovh/2026/07/13/7LwXI2xo.png 感谢马老师分享，我抱走了，祝安好！{:4_204:}{:4_190:}
霜染枫丹 发表于 2026-7-13 16:59
感谢马老师分享，我抱走了，祝安好！
{:4_180:} 我是 EDGE 浏览器，运行时倒还好，没出问题。
这些可以分类别地设置颜色，厉害了。
感谢黑黑的教学贴，学习了{:4_187:} 红影 发表于 2026-7-13 19:44
我是 EDGE 浏览器，运行时倒还好，没出问题。
这些可以分类别地设置颜色，厉害了。
感谢黑黑的教学贴，学 ...
不出错是好事 马黑黑 发表于 2026-7-14 18:17
不出错是好事
说明运气不错{:4_173:} 红影 发表于 2026-7-14 20:40
说明运气不错
运气是个好东东，所有通称为狗屎运 马黑黑 发表于 2026-7-14 20:58
运气是个好东东，所有通称为狗屎运
这听着咋这么别扭呢{:4_173:} 红影 发表于 2026-7-14 21:52
这听着咋这么别扭呢
但是通俗易懂 马黑黑 发表于 2026-7-15 18:04
但是通俗易懂
还是算了吧，好好的运气和狗屎放一起，怪怪的{:4_173:} 红影 发表于 2026-7-17 17:44
还是算了吧，好好的运气和狗屎放一起，怪怪的
一点也不怪，还特亲切 马黑黑 发表于 2026-7-17 21:51
一点也不怪，还特亲切
我咋觉得那么怪呢{:4_203:} 红影 发表于 2026-7-21 22:35
我咋觉得那么怪呢
估计你是啥二代来着？{:4_170:} 马黑黑 发表于 2026-7-22 18:46
估计你是啥二代来着？
俺是穷二代{:4_173:} 红影 发表于 2026-7-22 21:49
俺是穷二代
穷二代好，没人盯着