自定义FontWithASyntaxHighlighter字体着色风格

马黑黑

FontWithASyntaxHighlighter 字体能够实现CSS、HTML、JS 简单的语法高亮，支持任意能够渲染文本的元素，默认主题是暗色系即黑底白字。该字体可以自定义主题，通过 CSS 的 font-palette 属性完成，步骤如下：

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

font-palette CSS 属性允许用户代理指定某个字体所包含众多调色板中的其中一个。用户还可以通过使用 @font-palette-values @ 规则来覆盖调色板中的值或创建一个新的调色板。

上面第二步，使用 font-palette 属性的 @font-palette-values 创建新的调色板以覆盖默认的调色规则，override-color 共 9 个，由“索引号 + 空格 + 颜色值” 构成，每一组用逗号隔开，注释为字体作者提供的原始标注，简要说明了对应颜色的作用对象。索引号必须是 0~8，对应颜色值根据预设场景设置（支持各种颜色表达法）。--customPalette 是自定义CSS变量，后续选择器使用该字体自定义主题的接口依据。不必纠结理论层面的问题，即便不理解属性含义也可以按上述模板设计自己的调色规则就好，关键在于调试不同序号对应的颜色以适应预设的着色风格。

这三步，第一步必须，即使不自定义自己的着色风格也少不了；第二步自定义主题，如果使用默认的黑底白字风格可忽略；第三步是应用字体，若使用默认主题，将 font-palette 属性删掉。考虑到使用该字体的 CSS 代码不少，可以将其做成一个 .css 文件，使用时用 @import 方法导入。字体应用的最后一步交给 HTML 元素，只需在对应标签代码中加入 class="hlCode" 即可。

下面是一个自定义着色风格的 FontWithASyntaxHighlighter 字体应用实例，支持在线预览效果：

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

点击运行上述代码

【其它说明】貌似 EDGE 浏览器可能会因 WOFF 字体引发异常现象，据称，一般表现为：使用了相应 WOFF 字体的页面会在完好打开后不定时出现页面异常警告，错误代码为 STATUS_BREAKPOINT，刷新后正常，过一阵子又重复警告。微软的浏览器使用 Chromium 内核后已经有了长足进步且在较早前就已经支持 woff2 字体，但它太会我行我素，总会不遗余力地制造一大堆瑕疵。

梦江南

黑黑老师辛苦，学习了。

马黑黑

梦江南 发表于 2026-7-13 12:17
黑黑老师辛苦，学习了。

杨帆

厉害了~着色风格实现了自定义，有方法步骤，有实例示范，为马老师点赞