如何在Quarto网页中使用.tff格式的CaskaydiaCove Nerd Font字体?
在Quarto网站中使用本地.ttf格式的CaskaydiaCove Nerd Font
当然可以用.ttf版本的CaskaydiaCove Nerd Font来配置Quarto网站,具体操作步骤如下:
准备字体文件
获取CaskaydiaCove Nerd Font的.ttf格式文件,将其放到Quarto项目根目录下新建的fonts文件夹中(无此目录则手动创建)。配置Quarto加载自定义样式
打开项目根目录的_quarto.yml文件,在html格式配置中添加自定义CSS引用:
format: html: css: styles.css
- 编写自定义CSS规则
在项目根目录创建styles.css文件,添加以下代码(注意替换字体文件名与你实际使用的文件一致):
/* 声明自定义字体 */ @font-face { font-family: 'CaskaydiaCove Nerd Font'; src: url('fonts/CaskaydiaCoveNerdFont-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } /* 若需要粗体、斜体版本,添加对应规则 */ @font-face { font-family: 'CaskaydiaCove Nerd Font'; src: url('fonts/CaskaydiaCoveNerdFont-Bold.ttf') format('truetype'); font-weight: bold; font-style: normal; font-display: swap; } /* 设置全局等宽元素使用该字体 */ code, pre, kbd, samp { font-family: 'CaskaydiaCove Nerd Font', monospace !important; } /* 覆盖Quarto默认等宽字体变量 */ :root { --bs-font-monospace: 'CaskaydiaCove Nerd Font', monospace; }
- 验证效果
运行quarto preview启动本地预览,检查页面中的代码块、内联代码是否已使用目标字体,同时确认所需特殊字形能正常显示。
内容的提问来源于stack exchange,提问作者Jakub Jędrusiak
相关产品推荐
相关产品推荐

