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

Question

几天前我发现了mdBook。环顾四周，寻找一个简单的，小的，没有速度的静态站点生成器，我很兴奋。它易于使用，简单，快速和完全良好的设计。

尽管设置简单、快捷，但细节仍然存在问题。我想在一个定制的主题中调整字体。

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

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

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

1. 设置一本新书，将默认主题的基本文件复制到一个单独的目录中： mdbook init testBook -主题
2. 将“主题”目录重命名为“彼得斯主题”
3. 创建新目录“peters-主题/字体”

• 将Libertinus TeX字体复制到此目录
• 创建一个新的css文件‘peters-主题/字体/解放-sans-font.css’ @字体-face{字体-家族:解放-无字号；字体样式:正常；字体-重量:正常；src: url('LibertinusSans-Regular.otf')格式(‘opentype’)；}}字体-脸{字体-家庭:解放-sans；字体样式:斜体；字体-重量:普通；src: url(‘LibertinusSans-意大利.font’)格式(‘opentype’)格式(‘opentype’}}@字体-字体{-家庭:自由化-sans；字体样式:普通字体:粗体；src: url('LibertinusSans-Bold.otf')格式(‘opentype’)；}

1. 调整文件‘peters-主题/css/general.css’

• 添加额外的css导入规则 @导入‘./字体/font.css sans-font.css’；/*单独添加:使用“解放无字体”字体*/
• 更改HTML选择器 html {字体-家族:libertinus sans；/*单独添加:使用'libertinus sans‘字体*/颜色: var(--fg)；背景颜色:var(-bg)；文本大小调整:无；}

1. 创建文件‘peters-主题/字体/解放-sans-font.css’ @字体-face{字体-家族:解放-无字号；字体样式:正常；字体-重量:正常；src: url('LibertinusSans-Regular.otf')格式(‘opentype’)；}}字体-脸{字体-家庭:解放-sans；字体样式:斜体；字体-重量:普通；src: url(‘LibertinusSans-意大利.font’)格式(‘opentype’)格式(‘opentype’}}@字体-字体{-家庭:自由化-sans；字体样式:普通字体:粗体；src: url('LibertinusSans-Bold.otf')格式(‘opentype’)；}
2. 将字体文件放到‘peters-主题/字体’目录中

• ‘’peters主题/字体/LibertinusSans-Bold.otf‘
• 'peters-theme/fonts/LibertinusSans-Italic.otf‘
• 'peters-theme/fonts/LibertinusSans-Regular.otf‘

1. 调整文件‘peters-主题/index.hbs’
2. 创建bash脚本'build-book.sh‘(以复制作为解决办法) #!/bin/bash ##作者: Peter #日期: 2020-11-20 # ROOTFOLDER='/home/peter/Documents/Peter/Notes/mdBook/testBook/‘##改为图书目录cd $ROOTFOLDER ##清理旧书文件mdbook清洁##构建图书mdbook构建#复制字体为自定义主题cp -r ./peters-主题/字体/ ./ book / #显示书在浏览器mdbook服务-打开

问候

彼得

Answer 1

更多信息

不幸的是，上面的第一个提示并不能完全解决问题。它会产生一个效果:自定义字体css文件会自动复制到正确的子目录。它的新位置是

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

因此，我相应地更改了文件‘peters- the /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-主题/字体/解放-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主题/字体/LibertinusSans-Bold.woff‘
• 'peters-theme/fonts/LibertinusSans-Italic.woff‘
• 'peters-theme/fonts/LibertinusSans-Regular.woff‘

我希望这些本地字体文件被复制到输出目录..。但这不会发生的。

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

向你问好

彼得