You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.22 06:10:05