Css 如何在mdbook中配置生成的书本中自动使用的自定义字体？

几天前我找到了这本书。寻找一个简单，小，不 我是一个静态站点生成器，我很兴奋。它易于使用，简单， 快速和完全良好的设计

尽管设置简单快速，但细节问题仍然存在。我想 在自定义主题中调整字体

在mdBook手册中，仅提及字体配置的可能性 与： “复制字体”配置选项复制“font.css”和相应的字体文件 到要在默认主题中使用的输出目录。 但阅读“默认主题”上面的几个要点被定义为主题颜色 在“更改主题”下拉列表中默认选择的方案

这两者是如何结合的？在我的配置中，自动复制字体文件 不起作用。我编写了一个小bash脚本，在生成书籍输出后进行复制

因此，我想描述一下我所做的配置步骤：

设置一本新书，将默认主题的基本文件复制到 单独的目录：

mdbook init testBook --theme

将“theme”目录重命名为“peters theme”

创建新目录“peters主题/字体”

• 将Libertinus TeX字体复制到此目录中

• 创建一个新的css文件“peters theme/fonts/libertinus sans font.css”

  @font-face {
  font-family: libertinus-sans;
  font-style: normal;
  font-weight: normal;
  src: url('LibertinusSans-Regular.otf') format('opentype');
  }
  
  @font-face {
  font-family: libertinus-sans;
  font-style: italic;
  font-weight: normal;
  src: url('LibertinusSans-Italic.otf') format('opentype');
  }
  
  @font-face {
  font-family: libertinus-sans;
  font-style: normal;
  font-weight: bold;
  src: url('LibertinusSans-Bold.otf') format('opentype');
  }
  

  @font-face {
  font-family: libertinus-sans;
  font-style: normal;
  font-weight: normal;
  src: url('LibertinusSans-Regular.otf') format('opentype');
  }
  
  @font-face {
  font-family: libertinus-sans;
  font-style: italic;
  font-weight: normal;
  src: url('LibertinusSans-Italic.otf') format('opentype');
  }
  
  @font-face {
  font-family: libertinus-sans;
  font-style: normal;
  font-weight: bold;
  src: url('LibertinusSans-Bold.otf') format('opentype');
  }
  

调整文件“peters主题/css/general.css”

• 添加额外的css导入规则

  @import '../fonts/libertinus-sans-font.css'; /* added individually: use 'libertinus sans' fonts */
  

• 更改HTML选择器

  html {
      font-family: libertinus-sans; /* added individually: use 'libertinus sans' fonts */
      color: var(--fg);
      background-color: var(--bg);
      text-size-adjust: none;
  }
  

创建文件“peters主题/fonts/libertinus sans font.css”

@font-face {
font-family: libertinus-sans;
font-style: normal;
font-weight: normal;
src: url('LibertinusSans-Regular.otf') format('opentype');
}

@font-face {
font-family: libertinus-sans;
font-style: italic;
font-weight: normal;
src: url('LibertinusSans-Italic.otf') format('opentype');
}

@font-face {
font-family: libertinus-sans;
font-style: normal;
font-weight: bold;
src: url('LibertinusSans-Bold.otf') format('opentype');
}

@font-face {
font-family: libertinus-sans;
font-style: normal;
font-weight: normal;
src: url('LibertinusSans-Regular.otf') format('opentype');
}

@font-face {
font-family: libertinus-sans;
font-style: italic;
font-weight: normal;
src: url('LibertinusSans-Italic.otf') format('opentype');
}

@font-face {
font-family: libertinus-sans;
font-style: normal;
font-weight: bold;
src: url('LibertinusSans-Bold.otf') format('opentype');
}

将字体文件放入“peters主题/字体”目录

• “peters主题/fonts/LibertinusSans Bold.otf”
• “peters主题/fonts/LibertinusSans Italic.otf”
• “peters主题/fonts/LibertinusSans Regular.otf”

调整文件“peters主题/index.hbs”

<!-- Fonts -->
<link rel="stylesheet" href="{{ path_to_root }}FontAwesome/css/font-awesome.css">
{{#if copy_fonts}}
<!-- added additionally to include custom font CSS -->
<link rel="stylesheet" href="{{ path_to_root }}fonts/libertinus-sans-font.css">
{{/if}}

问候

Peter

其他信息 不幸的是，上面的第一个提示并不能完全解决问题。它会产生一个影响：自定义字体css文件被复制到正确的位置 自动创建子目录。它的新位置是

book/peters-theme/fonts/libertinus-sans-font.css

因此，我更改了文件“peters theme/index.hbs”的位置 因此

<!-- Fonts -->
<link rel="stylesheet" 
href="{{ path_to_root }}FontAwesome/css/font-awesome.css">
{{#if copy_fonts}}
<!-- added additionally to include custom font CSS -->
<link rel="stylesheet" 
href="{{ path_to_root }}peters-theme/fonts/libertinus-sans-font.css">
{{/if}}

此处列出了完整的“book.toml”配置文件：

[book]
title = "Rust Never Sleeps"
description = "An adventure getting in touch with mdBook and Rust"
author = "Peter"
language = "en"
multilingual = false
src = "src"

[output.html]
theme = "peters-theme"
default-theme = "rust"
copy-fonts = true
additional-css = ["peters-theme/fonts/libertinus-sans-font.css"]

[output.html.font]
enable = true
woff = true

此外，我还更改了字体css文件 “peters theme/fonts/libertinus sans font.css”以匹配woff字体类型

@font-face {
font-family: libertinus-sans;
font-style: normal;
font-weight: normal;
src: url('LibertinusSans-Regular.woff') format('woff');
}

@font-face {
font-family: libertinus-sans;
font-style: italic;
font-weight: normal;
src: url('LibertinusSans-Italic.woff') format('woff');
}

@font-face {
font-family: libertinus-sans;
font-style: normal;
font-weight: bold;
src: url('LibertinusSans-Bold.woff') format('woff');
}

woff字体文件位于“peters主题/字体”目录中

• '彼得斯主题/fonts/LibertinusSans Bold.woff'
• '彼得斯主题/fonts/LibertinusSans Italic.woff'
• “peters主题/字体/LibertinusSans Regular.woff”

我希望这些本地字体文件被复制到输出中 目录但这并没有发生

现在我希望得到一个金色的暗示我做错了什么

向你问好

---

彼得

你好@IbraheemAhmed非常非常感谢你的提示。我对你的答案很满意，很快就会尝试的。你好，彼得