css - mdbook中如何配置自定义字体，在生成的书籍中自动使用？

Question

几天前我找到了 mdBook。四处寻找一个容易的，小的，不
重载的静态站点生成器，我很兴奋。它易于使用，简单，
快速且设计精良。
尽管设置简单快速，但细节仍然存在问题。我想要
调整自定义主题中的字体。
在 mdBook 手册中只提到了字体配置的可能性
与 HTML renderer options :
'copy-fonts' 配置选项复制 'fonts.css' 和相应的字体文件
到要在默认主题中使用的输出目录。
但是阅读“默认主题”上方的几个要点被定义为主题颜色
在“更改主题”下拉列表中默认选择的方案。
怎么搭配在一起？在我的配置中字体文件的自动复制
不起作用。我写了一个小 bash 脚本，它在构建图书输出后进行复制。
所以我想描述一下我所做的配置步骤:

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

mdbook init testBook --theme

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

创建新目录 'peters-theme/fonts

将 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');
}

调整文件 '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;
}

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

将字体文件放入“peters-theme/fonts”目录

'peters-theme/fonts/LibertinusSans-Bold.otf'

'peters-theme/fonts/LibertinusSans-Italic.otf'

'peters-theme/fonts/LibertinusSans-Regular.otf'

调整文件“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 }}fonts/libertinus-sans-font.css">
{{/if}}

创建 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

你好
彼得

Answer 1

附加信息
不幸的是，上面的第一个提示并没有完全解决问题。它会导致一个效果:自定义字体 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/fonts”目录。
环顾已完成的拉取请求，我发现
this one .按照说明，我更改了“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-theme/fonts”目录中

'peters-theme/fonts/LibertinusSans-Bold.woff'

'peters-theme/fonts/LibertinusSans-Italic.woff'

'peters-theme/fonts/LibertinusSans-Regular.woff'

我希望这些本地字体文件被复制到输出
目录...但这并没有发生。
现在我希望得到一个黄金提示我做错了什么。
向你问好
彼得