马黑教程专版 https://www.huachaowang.com/forum.php?mod=viewthread&tid=94448&pid=2613912&page=1&extra=#pid2613912
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 字体，但它太会我行我素，总会不遗余力地制造一大堆瑕疵。
| 
发表于