MkDocs CSS 字體中英文分別設定

MkDocs 與 gitbook 皆為使用 markdown 編寫文檔的工具，但 gitbook cli 在 2018 年底的時候因為團隊決定集中資源在 GitBook.com 平台而停止維護，MkDocs 仍持續在更新並也有各種 Plugin、Theme，如 Material for MkDocs。

在純英文或使用 Mac 的狀況下 Material for MkDocs 的閱讀體驗很好，預設好的字體無論是文字段落或 Code Block 都能有很好的呈現。但在 Windows 的環境下會以新細明體作為中文字體，因此希望可以針對中文字體單獨切換，而英文部分仍保留原本預設的字體。

CSS3 的 unicode-range 可以針對指定的文字或文字範圍設定字體，而 MkDocs 支援增加額外的 CSS 設定(Additional stylesheets)，只要在 mkdocs.yml 增加 extra_css 即可，結合兩者即可達到需求。

extra_css:
    - "stylesheets/extra.css"

以下為調整字體後的 extra.css

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700|Roboto+Mono&display=fallback');

@font-face {
  font-family: 'custom Roboto';
  src: local('Microsoft JhengHei');
  unicode-range: U+4E00-9FFF;
}

@font-face {
  font-family: 'custom Roboto';
  src: local('Roboto');
  unicode-range: U+00-024F;
}

@font-face {
  font-family: 'custom Roboto Mono';
  src: local('Microsoft JhengHei');
  unicode-range: U+4E00-9FFF;
}

@font-face {
  font-family: 'custom Roboto Mono';
  src: local('Roboto Mono');
  unicode-range: U+00-024F;
}

body,input{
  font-family: "custom Roboto", "Roboto", "Helvetica Neue",Helvetica,Arial,sans-serif;
}

code,kbd,pre{
  font-family: "custom Roboto Mono", "Roboto Mono","Courier New",Courier,monospace;
}

Ref:

CSS 設定中英文不同的字體

MkDocs CSS 字體中英文分別設定

Comments