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

Question

几天前我发现了mdBook。四处寻找一个简单的，小的，不是oveloaded静态站点生成器，我很兴奋。它易于使用，简单，快速且设计完美。

尽管设置简单快捷，但细节本身就存在问题。我想要以调整自定义主题中的字体。

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

这是怎么结合在一起的？在我的配置中，字体文件的自动复制不起作用。我写了一个小bash脚本，在构建书籍输出后进行复制。

所以我想描述一下我所做的配置步骤：

1. 通过将默认主题的基本文件复制到一个单独的目录：

   mdbook init testBook --theme
   

2. 将"主题"目录重命名为"彼得斯主题">

3. 创建新目录的peters主题/字体

• 将LibertinusTeX字体复制到此目录中

• 创建一个新的css文件"peters-theme/fonts/libertinuss-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');
  }
  

4. 调整文件'peters theme/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;
  }
  

5. 创建文件'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');
   }
   

6. 将字体文件放入"peters主题/字体"目录

• 'peters-theme/fonts/LibertinusSans-Bold.otf'
• 'peters theme/fonts/LibertinusSans Italic.otf'
• 'peters theme/fonts/LibertinusSans Regular.otf'

7. 调整文件'peters主题/索引.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}}
   

8. 创建bash脚本"build-book.sh"(将复制作为解决方法(

   #!/bin/bash
   #
   # Author: Peter
   # Date: 2020-11-20
   #
   ROOTFOLDER='/home/peter/Documents/Peter/Notes/mdBook/testBook/'
   #
   # change to book directory
   cd $ROOTFOLDER
   #
   # clean up old book files
   mdbook clean
   #
   # build the book
   mdbook build
   #
   # copy fonts for custom theme
   cp -r ./peters-theme/fonts/ ./book/
   #
   # display book in browser
   mdbook serve --open
   

问候

Peter

Answer 1

其他信息

不幸的是，上面的第一个提示并不能完全解决问题。它造成一个影响：自定义字体css文件被复制到正确的子目录。它的新位置是

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

因此，我更改了文件"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 }}peters-theme/fonts/libertinus-sans-font.css">
{{/if}}

但问题的一部分仍然存在。本地字体文件不会复制到目标"book/fonts"目录。

环顾四周，我发现这个。根据描述，我更改了"book.toml"配置文件并添加了一个新的"output.html.font"部分。

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

此处列出了完整的"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主题/字体"目录中

• 'peters-theme/fonts/LibertinusSans-Bold.woff'
• 'peters theme/fonts/LibertinusSans Italic.woff'
• 'peters theme/fonts/LibertinusSans Regular.woff'

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

现在，我希望得到一个黄金的提示，我做错了什么。

问候你

Peter