
使用marktext发现有个问题,在文件→偏好设置→编辑器里设置字体和代码字体只能影响正文和代码框内,frontmatter里的无法影响,也没有找到设置的地方。
先确定问题
MarkText 没有“只给 YAML 段落单独换字体”的原生选项。它的字体是分两档全局生效的——正文(含文章开头的 YAML frontmatter,用—包裹)用一套,代码块用另一套。这里面的两种都不包含开头yaml隐藏的frontmatter。所以修改偏好设置里的两个字体,或者修改 preferences.json 的 editorFontFamily也没用(下面修改只能影响正文和代码):
"editorFontFamily": "Cascadia Code, 'Microsoft YaHei', 'PingFang SC', sans-serif"
那就修改主题CSS
自定义 CSS 强制 frontmatter 字体,如果你一定要让真正的 frontmatter 字体和正文不同,只能走 MarkText 的自定义 CSS(偏好设置 → 主题 → 底部 Custom CSS 框):
TIP
问题:MarkText 对 frontmatter 的 CSS 钩子在不同版本类名不一致、且 WYSIWYG 模式下 frontmatter 往往根本不渲染,所以这条需要先搞清frontmatter在当前版本容器类名。
第一次修改
按照frontmatter类名修改自定义css,并为了保险加了全局UI:
/* 第一招:改 MarkText 的 UI 字体变量,顶部面板很可能跟着变 */
:root {
--mt-font-sans: 'Microsoft YaHei', 'PingFang SC', sans-serif;
}
/* 第二招:通配匹配任何含 frontmatter 字样的容器,提高命中率 */
[class*="frontmatter"] {
font-family: 'Microsoft YaHei', 'PingFang SC', monospace !important;
}
保存后,没有效果,说明类名错了!
第二次修改
既然选择器写错了——frontmatter 在 DOM 里是 <pre functionType="frontmatter">,它不带 “frontmatter” 字样的 class,所以 [class*="frontmatter"] 天然命中不了,那就改一下CSS再试试:
pre[functionType='frontmatter'], pre[functionType='frontmatter'] * {
font-family: inherit !important;
}
意思是:让 frontmatter 块强制继承你在偏好设置里设的编辑器字体,从此和正文一致。
保存后,没有效果,说明类名还是不对!
第三次修改
MarkText(新版 muya 引擎)里,frontmatter 块渲染成 <pre class="mu-frontmatter">,而且它的内置 CSS(blockSyntax.css)里明确写着:
.mu-code-block, .mu-frontmatter, .mu-html-container, ... {
font-size: 90%;
font-family: 'DejaVu Sans Mono', ...;
}
frontmatter 被硬编码成代码字体 DejaVu Sans Mono,Windows 上没装这个字体,中文就回退到系统默认的宋体,这就是和正文不一致的原因。
有了类名,这次直接修改:
pre.mu-frontmatter, pre.mu-frontmatter * {
font-family: 'Open Sans', 'Microsoft YaHei', sans-serif !important;
}
让 frontmatter 用你的编辑器字体 Open Sans,中文回退微软雅黑,和正文视觉一致。
结果
重新启动 MarkText,这次frontmatter 字体变成了Open Sans,修改有效!