Skip to content

更改字体

¥Changing the fonts

Material for MkDocs 可轻松更改项目文档的字体，因为它直接与Google Fonts集成。或者，如果出于数据隐私原因希望自行托管或需要使用其他目标，则可以自定义加载字体。

¥Material for MkDocs makes it easy to change the typeface of your project documentation, as it directly integrates with Google Fonts. Alternatively, fonts can be custom-loaded if self-hosting is preferred for data privacy reasons or another destination should be used.

配置

¥Configuration

常规字体

¥Regular font

0.1.2 Roboto

¥0.1.2 Roboto

常规字体用于所有正文、标题以及基本上所有不需要等宽的内容。您可以通过mkdocs.yml将其设置为任何有效的Google 字体：

¥The regular font is used for all body copy, headlines, and essentially everything that does not need to be monospaced. It can be set to any valid Google Font via mkdocs.yml:

theme:
  font:
    text: Roboto

字体将以 300、400、400i 和700加载。

¥The typeface will be loaded in 300, 400, 400i and 700.

等宽字体

¥Monospaced font

0.1.2 Roboto Mono

¥0.1.2 Roboto Mono

等宽字体用于代码块，可以单独配置。与常规字体一样，可以通过mkdocs.yml将其设置为任何有效的Google 字体：

¥The monospaced font is used for code blocks and can be configured separately. Just like the regular font, it can be set to any valid Google Font via mkdocs.yml:

theme:
  font:
    code: Roboto Mono

字体将在 400 中加载。

¥The typeface will be loaded in 400.

自动加载

¥Autoloading

1.0.0

¥1.0.0

如果您想要防止从Google Fonts加载字体（例如，为了遵守数据隐私法规）并回退到系统字体，请将以下几行添加到mkdocs.yml ：

¥If you want to prevent typefaces from being loaded from Google Fonts, e.g. to adhere to data privacy regulations, and fall back to system fonts, add the following lines to mkdocs.yml:

theme:
  font: false

自动捆绑 Google 字体

¥Automatically bundle Google Fonts

内置的隐私插件可以自动下载和自托管网络字体文件，从而轻松使用 Google 字体，同时遵守通用数据保护条例(GDPR)。

¥The built-in privacy plugin makes it easy to use Google Fonts while complying with the General Data Protection Regulation (GDPR), by automatically downloading and self-hosting the web font files.

定制

¥Customization

附加字体

¥Additional fonts

如果您想从另一个目标加载（附加）字体或覆盖系统字体，则可以使用附加样式表来添加相应的@font-face定义：

¥If you want to load an (additional) font from another destination or override the system font, you can use an additional style sheet to add the corresponding @font-face definition:

@font-face {
  font-family: "<font>";
  src: "...";
}

extra_css:
  - stylesheets/extra.css

然后可以将字体应用于特定元素（例如，仅标题），或全局用作站点范围的常规字体或等宽字体：

¥The font can then be applied to specific elements, e.g. only headlines, or globally to be used as the site-wide regular or monospaced font:

:root {
  --md-text-font: "<font>"; /* (1)! */
}

  1. 始终通过 CSS 变量而不是font-family来定义字体，因为这会禁用系统字体回退。

    ¥Always define fonts through CSS variables and not font-family, as this would disable the system font fallback.

:root {
  --md-code-font: "<font>";
}