语法高亮区块，基本上都是代码，而我最爱的代码字体就是JetBrains Mono这个字体了。记录下如何配置自定义字体。
下载字体
第一步要下载字体到服务器，不使用在线字体，避免字体获取失败。
查看网页源代码，确认字体已加载
<style class="wp-fonts-local">
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100;font-display:fallback;src:url('https://njujiang.tech/wp-content/uploads/fonts/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yK1jOFmUsaaDhw.woff2') format('woff2');}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:200;font-display:fallback;src:url('https://njujiang.tech/wp-content/uploads/fonts/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8SKxjOFmUsaaDhw.woff2') format('woff2');}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:300;font-display:fallback;src:url('https://njujiang.tech/wp-content/uploads/fonts/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8lqxjOFmUsaaDhw.woff2') format('woff2');}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:fallback;src:url('https://njujiang.tech/wp-content/uploads/fonts/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxjOFmUsaaDhw.woff2') format('woff2');}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:fallback;src:url('https://njujiang.tech/wp-content/uploads/fonts/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8-qxjOFmUsaaDhw.woff2') format('woff2');}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:600;font-display:fallback;src:url('https://njujiang.tech/wp-content/uploads/fonts/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8FqtjOFmUsaaDhw.woff2') format('woff2');}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:700;font-display:fallback;src:url('https://njujiang.tech/wp-content/uploads/fonts/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8L6tjOFmUsaaDhw.woff2') format('woff2');}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:800;font-display:fallback;src:url('https://njujiang.tech/wp-content/uploads/fonts/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8SKtjOFmUsaaDhw.woff2') format('woff2');}
@font-face{font-family:"JetBrains Mono";font-style:italic;font-weight:100;font-display:fallback;src:url('https://njujiang.tech/wp-content/uploads/fonts/tDba2o-flEEny0FZhsfKu5WU4xD-IQ-PuZJJXxfpAO-Lf1OVk6OThxPA.woff2') format('woff2');}
@font-face{font-family:"JetBrains Mono";font-style:italic;font-weight:200;font-display:fallback;src:url('https://njujiang.tech/wp-content/uploads/fonts/tDba2o-flEEny0FZhsfKu5WU4xD-IQ-PuZJJXxfpAO8LflOVk6OThxPA.woff2') format('woff2');}
@font-face{font-family:"JetBrains Mono";font-style:italic;font-weight:300;font-display:fallback;src:url('https://njujiang.tech/wp-content/uploads/fonts/tDba2o-flEEny0FZhsfKu5WU4xD-IQ-PuZJJXxfpAO_VflOVk6OThxPA.woff2') format('woff2');}
@font-face{font-family:"JetBrains Mono";font-style:italic;font-weight:400;font-display:fallback;src:url('https://njujiang.tech/wp-content/uploads/fonts/tDba2o-flEEny0FZhsfKu5WU4xD-IQ-PuZJJXxfpAO-LflOVk6OThxPA.woff2') format('woff2');}
@font-face{font-family:"JetBrains Mono";font-style:italic;font-weight:500;font-display:fallback;src:url('https://njujiang.tech/wp-content/uploads/fonts/tDba2o-flEEny0FZhsfKu5WU4xD-IQ-PuZJJXxfpAO-5flOVk6OThxPA.woff2') format('woff2');}
@font-face{font-family:"JetBrains Mono";font-style:italic;font-weight:600;font-display:fallback;src:url('https://njujiang.tech/wp-content/uploads/fonts/tDba2o-flEEny0FZhsfKu5WU4xD-IQ-PuZJJXxfpAO9VeVOVk6OThxPA.woff2') format('woff2');}
@font-face{font-family:"JetBrains Mono";font-style:italic;font-weight:700;font-display:fallback;src:url('https://njujiang.tech/wp-content/uploads/fonts/tDba2o-flEEny0FZhsfKu5WU4xD-IQ-PuZJJXxfpAO9seVOVk6OThxPA.woff2') format('woff2');}
@font-face{font-family:"JetBrains Mono";font-style:italic;font-weight:800;font-display:fallback;src:url('https://njujiang.tech/wp-content/uploads/fonts/tDba2o-flEEny0FZhsfKu5WU4xD-IQ-PuZJJXxfpAO8LeVOVk6OThxPA.woff2') format('woff2');}
</style>
修改全局CSS
通过设置自定义CSS，定义.syntaxhighlighter这个class使用自定义字体
.syntaxhighlighter code,
.syntaxhighlighter .line,
.syntaxhighlighter .line td,
.syntaxhighlighter .gutter .line {
font-family: "JetBrains Mono", ui-monospace, monospace !important;
font-size: 14px !important;
line-height: 1.6 !important;
}
效果展示
修改之前的展示效果
修改之后
