Wcowin/Mkdocs-Wcowin
1
0
Fork 0
mirror of https://github.com/Wcowin/Mkdocs-Wcowin.git synced 2025-07-22 01:46:35 +00:00
Code Issues Packages Projects Releases Wiki Activity
Mkdocs-Wcowin/blog/websitebeauty/mkdocsfont/index.html

3851 lines
113 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="zh" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="Content and ambitious, gentle yet firm.">
<meta name="author" content="王科文(Wcowin)">
<link rel="canonical" href="http://wcowin.work/Mkdocs-Wcowin/blog/websitebeauty/mkdocsfont/">
<link rel="prev" href="../header/">
<link rel="next" href="../shubiao/">
<link rel="icon" href="https://s2.loli.net/2025/02/12/aE5ovtzAlNTd9Uh.png">
<meta name="generator" content="mkdocs-1.6.1, mkdocs-material-9.6.15">
<title>自定义Mkdocs显示字体(霞鹜文楷) - Mkdocs中文教程</title>
<link rel="stylesheet" href="../../../assets/stylesheets/main.342714a4.min.css">
<link rel="stylesheet" href="../../../assets/stylesheets/palette.06af60db.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
<style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
<link rel="stylesheet" href="../../../stylesheets/extra.css">
<link rel="stylesheet" href="../../../stylesheets/extra2.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Wcowin/Wcowin.github.io@main/docs/stylesheets/link.css">
<link rel="stylesheet" href="../../../stylesheets/customize.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Wcowin/Wcowin.github.io@main/docs/stylesheets/ziti.css">
<script>__md_scope=new URL("../../..",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
<script id="__analytics">function __md_analytics(){function e(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],e("js",new Date),e("config","G-29HZMNR0KG"),document.addEventListener("DOMContentLoaded",(function(){document.forms.search&&document.forms.search.query.addEventListener("blur",(function(){this.value&&e("event","search",{search_term:this.value})}));document$.subscribe((function(){var t=document.forms.feedback;if(void 0!==t)for(var a of t.querySelectorAll("[type=submit]"))a.addEventListener("click",(function(a){a.preventDefault();var n=document.location.pathname,d=this.getAttribute("data-md-value");e("event","feedback",{page:n,data:d}),t.firstElementChild.disabled=!0;var r=t.querySelector(".md-feedback__note [data-md-value='"+d+"']");r&&(r.hidden=!1)})),t.hidden=!1})),location$.subscribe((function(t){e("config","G-29HZMNR0KG",{page_path:t.pathname})}))}));var t=document.createElement("script");t.async=!0,t.src="https://www.googletagmanager.com/gtag/js?id=G-29HZMNR0KG",document.getElementById("__analytics").insertAdjacentElement("afterEnd",t)}</script>
<script>"undefined"!=typeof __md_analytics&&__md_analytics()</script>
</head>
<body dir="ltr" data-md-color-scheme="default" data-md-color-primary="indigo" data-md-color-accent="indigo">
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" for="__drawer"></label>
<div data-md-component="skip">
<a href="#lxgw-wenkai" class="md-skip">
跳转至
</a>
</div>
<div data-md-component="announce">
</div>
<header class="md-header" data-md-component="header">
<nav class="md-header__inner md-grid" aria-label="页眉">
<a href="../../.." title="Mkdocs中文教程" class="md-header__button md-logo" aria-label="Mkdocs中文教程" data-md-component="logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 89 89">
<path d="M3.136,17.387l0,42.932l42.932,21.467l-42.932,-64.399Z" />
<path d="M21.91,8l42.933,64.398l-18.775,9.388l-42.932,-64.399l18.774,-9.387Z" style="fill-opacity: 0.5" />
<path d="M67.535,17.387l-27.262,18.156l21.878,32.818l5.384,2.691l0,-53.665Z" />
<path d="M67.535,17.387l0,53.666l18.774,-9.388l0,-53.665l-18.774,9.387Z" style="fill-opacity: 0.25" />
</svg>
</a>
<label class="md-header__button md-icon" for="__drawer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>
</label>
<div class="md-header__title" data-md-component="header-title">
<div class="md-header__ellipsis">
<div class="md-header__topic">
<span class="md-ellipsis">
Mkdocs中文教程
</span>
</div>
<div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis">
自定义Mkdocs显示字体(霞鹜文楷)
</span>
</div>
</div>
</div>
<form class="md-header__option" data-md-component="palette">
<input class="md-option" data-md-color-media="(prefers-color-scheme)" data-md-color-scheme="default" data-md-color-primary="indigo" data-md-color-accent="indigo" aria-label="关闭自动模式" type="radio" name="__palette" id="__palette_0">
<label class="md-header__button md-icon" title="关闭自动模式" for="__palette_1" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7a5 5 0 0 0-5 5 5 5 0 0 0 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1M8 13h8v-2H8zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4a5 5 0 0 0 5-5 5 5 0 0 0-5-5"/></svg>
</label>
<input class="md-option" data-md-color-media="(prefers-color-scheme: light)" data-md-color-scheme="default" data-md-color-primary="blue" data-md-color-accent="indigo" aria-label="切换至夜间模式" type="radio" name="__palette" id="__palette_1">
<label class="md-header__button md-icon" title="切换至夜间模式" for="__palette_2" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 7H7a5 5 0 0 0-5 5 5 5 0 0 0 5 5h10a5 5 0 0 0 5-5 5 5 0 0 0-5-5m0 8a3 3 0 0 1-3-3 3 3 0 0 1 3-3 3 3 0 0 1 3 3 3 3 0 0 1-3 3"/></svg>
</label>
<input class="md-option" data-md-color-media="(prefers-color-scheme: dark)" data-md-color-scheme="slate" data-md-color-primary="black" data-md-color-accent="indigo" aria-label="切换至日间模式" type="radio" name="__palette" id="__palette_2">
<label class="md-header__button md-icon" title="切换至日间模式" for="__palette_0" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 6H7c-3.31 0-6 2.69-6 6s2.69 6 6 6h10c3.31 0 6-2.69 6-6s-2.69-6-6-6m0 10H7c-2.21 0-4-1.79-4-4s1.79-4 4-4h10c2.21 0 4 1.79 4 4s-1.79 4-4 4M7 9c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3"/></svg>
</label>
</form>
<script>var palette=__md_get("__palette");if(palette&&palette.color){if("(prefers-color-scheme)"===palette.color.media){var media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']");palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent")}for(var[key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script>
<div class="md-header__option">
<div class="md-select">
<button class="md-header__button md-icon" aria-label="选择当前语言">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M0 128c0-35.3 28.7-64 64-64h512c35.3 0 64 28.7 64 64v256c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64zm320 0v256h256V128zm-141.7 47.9c-3.2-7.2-10.4-11.9-18.3-11.9s-15.1 4.7-18.3 11.9l-64 144c-4.5 10.1.1 21.9 10.2 26.4s21.9-.1 26.4-10.2l8.9-20.1h73.6l8.9 20.1c4.5 10.1 16.3 14.6 26.4 10.2s14.6-16.3 10.2-26.4zM160 233.2l19 42.8h-38zM448 164c11 0 20 9 20 20v4h60c11 0 20 9 20 20s-9 20-20 20h-2l-1.6 4.5c-8.9 24.4-22.4 46.6-39.6 65.4.9.6 1.8 1.1 2.7 1.6l18.9 11.3c9.5 5.7 12.5 18 6.9 27.4s-18 12.5-27.4 6.9L467 333.8c-4.5-2.7-8.8-5.5-13.1-8.5-10.6 7.5-21.9 14-34 19.4l-3.6 1.6c-10.1 4.5-21.9-.1-26.4-10.2s.1-21.9 10.2-26.4l3.6-1.6c6.4-2.9 12.6-6.1 18.5-9.8L410 286.1c-7.8-7.8-7.8-20.5 0-28.3s20.5-7.8 28.3 0l14.6 14.6.5.5c12.4-13.1 22.5-28.3 29.8-45l-35.2.1h-72c-11 0-20-9-20-20s9-20 20-20h52v-4c0-11 9-20 20-20"/></svg>
</button>
<div class="md-select__inner">
<ul class="md-select__list">
<li class="md-select__item">
<a href="/" hreflang="zh" class="md-select__link">
简体中文
</a>
</li>
<li class="md-select__item">
<a href="/Mkdocs-Wcowin/en/" hreflang="en" class="md-select__link">
English
</a>
</li>
<li class="md-select__item">
<a href="/Mkdocs-Wcowin/ZH-TW/" hreflang="zh-TW" class="md-select__link">
China(TW)
</a>
</li>
</ul>
</div>
</div>
</div>
<label class="md-header__button md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
</label>
<div class="md-search" data-md-component="search" role="dialog">
<label class="md-search__overlay" for="__search"></label>
<div class="md-search__inner" role="search">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query" aria-label="搜索" placeholder="搜索" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
<label class="md-search__icon md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256l137.3-137.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/></svg>
</label>
<nav class="md-search__options" aria-label="查找">
<a href="javascript:void(0)" class="md-search__icon md-icon" title="分享" aria-label="分享" data-clipboard data-clipboard-text="" data-md-component="search-share" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9a3 3 0 0 0-3 3 3 3 0 0 0 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.15c-.05.21-.08.43-.08.66 0 1.61 1.31 2.91 2.92 2.91s2.92-1.3 2.92-2.91A2.92 2.92 0 0 0 18 16.08"/></svg>
</a>
<button type="reset" class="md-search__icon md-icon" title="清空当前内容" aria-label="清空当前内容" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
</button>
</nav>
<div class="md-search__suggest" data-md-component="search-suggest"></div>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" tabindex="0" data-md-scrollfix>
<div class="md-search-result" data-md-component="search-result">
<div class="md-search-result__meta">
正在初始化搜索引擎
</div>
<ol class="md-search-result__list" role="presentation"></ol>
</div>
</div>
</div>
</div>
</div>
<div class="md-header__source">
<a href="https://github.com/Wcowin/Mkdocs-Wcowin" title="前往仓库" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg>
</div>
<div class="md-source__repository">
Mkdocs-Wcowin
</div>
</a>
</div>
</nav>
</header>
<div class="md-container" data-md-component="container">
<nav class="md-tabs" aria-label="标签" data-md-component="tabs">
<div class="md-grid">
<ul class="md-tabs__list">
<li class="md-tabs__item md-tabs__item--active">
<a href="../../MIT/" class="md-tabs__link">
MKdocs中文教程
</a>
</li>
<li class="md-tabs__item">
<a href="../../../develop/Markdown/markdown/" class="md-tabs__link">
建设MKdocs技能指北
</a>
</li>
<li class="md-tabs__item">
<a href="../../../tag/" class="md-tabs__link">
标签
</a>
</li>
<li class="md-tabs__item">
<a href="../../../liuyanban/" class="md-tabs__link">
留言板
</a>
</li>
<li class="md-tabs__item">
<a href="../../" class="md-tabs__link">
博客
</a>
</li>
<li class="md-tabs__item">
<a href="../../../link/" class="md-tabs__link">
友链
</a>
</li>
<li class="md-tabs__item">
<a href="../../../about/geren/" class="md-tabs__link">
关于
</a>
</li>
<li class="md-tabs__item">
<a href="https://wcowin.work" class="md-tabs__link">
个人博客
</a>
</li>
<li class="md-tabs__item">
<a href="https://github.com/new?template_name=Mkdocs-Wcowin&template_owner=Wcowin" class="md-tabs__link">
使用本主题
</a>
</li>
</ul>
</div>
</nav>
<main class="md-main" data-md-component="main">
<div class="md-main__inner md-grid">
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--primary md-nav--lifted" aria-label="导航栏" data-md-level="0">
<label class="md-nav__title" for="__drawer">
<a href="../../.." title="Mkdocs中文教程" class="md-nav__button md-logo" aria-label="Mkdocs中文教程" data-md-component="logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 89 89">
<path d="M3.136,17.387l0,42.932l42.932,21.467l-42.932,-64.399Z" />
<path d="M21.91,8l42.933,64.398l-18.775,9.388l-42.932,-64.399l18.774,-9.387Z" style="fill-opacity: 0.5" />
<path d="M67.535,17.387l-27.262,18.156l21.878,32.818l5.384,2.691l0,-53.665Z" />
<path d="M67.535,17.387l0,53.666l18.774,-9.388l0,-53.665l-18.774,9.387Z" style="fill-opacity: 0.25" />
</svg>
</a>
Mkdocs中文教程
</label>
<div class="md-nav__source">
<a href="https://github.com/Wcowin/Mkdocs-Wcowin" title="前往仓库" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg>
</div>
<div class="md-source__repository">
Mkdocs-Wcowin
</div>
</a>
</div>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_1" checked>
<label class="md-nav__link" for="__nav_1" id="__nav_1_label" tabindex="">
<span class="md-ellipsis">
MKdocs中文教程
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_1_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_1">
<span class="md-nav__icon md-icon"></span>
MKdocs中文教程
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../MIT/" class="md-nav__link">
<span class="md-ellipsis">
许可声明
</span>
<span class="md-status md-status--new"></span>
</a>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_1_2" >
<label class="md-nav__link" for="__nav_1_2" id="__nav_1_2_label" tabindex="">
<span class="md-ellipsis">
MKdocs教程(三部曲)
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_1_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_1_2">
<span class="md-nav__icon md-icon"></span>
MKdocs教程(三部曲)
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../Mkdocs/mkfirst/" class="md-nav__link">
<span class="md-ellipsis">
0.Mkdocs教程前言
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../Mkdocs/mkdocs1/" class="md-nav__link">
<span class="md-ellipsis">
1.利用Mkdocs部署静态网页
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../Mkdocs/mkdocs2/" class="md-nav__link">
<span class="md-ellipsis">
2.Mkdocs配置说明(mkdocs.yml)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../Mkdocs/mkdocs3/" class="md-nav__link">
<span class="md-ellipsis">
3.解决Github Pages部署mkdocs自定义域名失效的问题
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_1_3" checked>
<label class="md-nav__link" for="__nav_1_3" id="__nav_1_3_label" tabindex="">
<span class="md-ellipsis">
Mkdocs美化/补充
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_1_3_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_1_3">
<span class="md-nav__icon md-icon"></span>
Mkdocs美化/补充
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../Mkdocs-AI-Summary/" class="md-nav__link">
<span class="md-ellipsis">
MkDocs文档AI摘要
</span>
<span class="md-status md-status--new"></span>
</a>
</li>
<li class="md-nav__item">
<a href="../recommend/" class="md-nav__link">
<span class="md-ellipsis">
添加相关推荐文章
</span>
<span class="md-status md-status--new"></span>
</a>
</li>
<li class="md-nav__item">
<a href="../reading_time/" class="md-nav__link">
<span class="md-ellipsis">
添加阅读信息统计
</span>
<span class="md-status md-status--new"></span>
</a>
</li>
<li class="md-nav__item">
<a href="../../Mkdocs/mkdocsblog/" class="md-nav__link">
<span class="md-ellipsis">
添加Mkdocs博客
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../Mkdocs/linktech/" class="md-nav__link">
<span class="md-ellipsis">
如何给MKdocs添加友链
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../yuanjiaohua/" class="md-nav__link">
<span class="md-ellipsis">
网页圆角化设计
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../mkcomments/" class="md-nav__link">
<span class="md-ellipsis">
添加评论系统(giscus为例)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../webtalknow/" class="md-nav__link">
<span class="md-ellipsis">
添加在线聊天
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../linktech/" class="md-nav__link">
<span class="md-ellipsis">
添加友链
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../header/" class="md-nav__link">
<span class="md-ellipsis">
添加顶部公告栏
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--active">
<input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
<label class="md-nav__link md-nav__link--active" for="__toc">
<span class="md-ellipsis">
修改网站字体
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<a href="./" class="md-nav__link md-nav__link--active">
<span class="md-ellipsis">
修改网站字体
</span>
</a>
<nav class="md-nav md-nav--secondary" aria-label="目录">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
目录
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#_1" class="md-nav__link">
<span class="md-ellipsis">
项目简介
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#_2" class="md-nav__link">
<span class="md-ellipsis">
字体预览
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#_3" class="md-nav__link">
<span class="md-ellipsis">
补字计划
</span>
</a>
<nav class="md-nav" aria-label="补字计划">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#_4" class="md-nav__link">
<span class="md-ellipsis">
主要汉字部分
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#_5" class="md-nav__link">
<span class="md-ellipsis">
其他部分
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#_6" class="md-nav__link">
<span class="md-ellipsis">
获取字体
</span>
</a>
<nav class="md-nav" aria-label="获取字体">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#i" class="md-nav__link">
<span class="md-ellipsis">
ⅰ. 直接下载
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#ii" class="md-nav__link">
<span class="md-ellipsis">
ⅱ. 从源代码生成
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#_7" class="md-nav__link">
<span class="md-ellipsis">
注意事项
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#_8" class="md-nav__link">
<span class="md-ellipsis">
授权信息
</span>
</a>
<nav class="md-nav" aria-label="授权信息">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#_9" class="md-nav__link">
<span class="md-ellipsis">
许可
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#_10" class="md-nav__link">
<span class="md-ellipsis">
限制
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#mkdocs" class="md-nav__link">
<span class="md-ellipsis">
基于Mkdocs的网站字体美化用法
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../shubiao/" class="md-nav__link">
<span class="md-ellipsis">
JS实现鼠标样式
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../backgroud/" class="md-nav__link">
<span class="md-ellipsis">
背景特效
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../mkpdf/" class="md-nav__link">
<span class="md-ellipsis">
嵌入PDF文件
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../Relativeaddress/" class="md-nav__link">
<span class="md-ellipsis">
相对地址的一些问题
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../404/" class="md-nav__link">
<span class="md-ellipsis">
添加404页面
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../time/" class="md-nav__link">
<span class="md-ellipsis">
为MKdocs添加文章修订时间戳
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../footer/" class="md-nav__link">
<span class="md-ellipsis">
页脚设置
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../accelerate/" class="md-nav__link">
<span class="md-ellipsis">
加速网站访问的一些心得
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_2" >
<label class="md-nav__link" for="__nav_2" id="__nav_2_label" tabindex="0">
<span class="md-ellipsis">
建设MKdocs技能指北
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2">
<span class="md-nav__icon md-icon"></span>
建设MKdocs技能指北
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_2_1" >
<label class="md-nav__link" for="__nav_2_1" id="__nav_2_1_label" tabindex="0">
<span class="md-ellipsis">
Markdown
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_1_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2_1">
<span class="md-nav__icon md-icon"></span>
Markdown
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../develop/Markdown/markdown/" class="md-nav__link">
<span class="md-ellipsis">
Markdown指南
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../develop/Markdown/MWeb/" class="md-nav__link">
<span class="md-ellipsis">
MWeb Pro
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../../../develop/git/" class="md-nav__link">
<span class="md-ellipsis">
Git 实用技巧
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../develop/lighthouse/" class="md-nav__link">
<span class="md-ellipsis">
利用Lighthouse测试网站性能
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../develop/vercel/" class="md-nav__link">
<span class="md-ellipsis">
如何将 github pages 迁移到 vercel 上托管
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_2_5" >
<label class="md-nav__link" for="__nav_2_5" id="__nav_2_5_label" tabindex="0">
<span class="md-ellipsis">
设计美学
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_5_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2_5">
<span class="md-nav__icon md-icon"></span>
设计美学
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../develop/designbeauty/db1/" class="md-nav__link">
<span class="md-ellipsis">
唐·诺曼—情感设计的三个层次
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../develop/designbeauty/my-to-desihn/" class="md-nav__link">
<span class="md-ellipsis">
我对设计的一些观点
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../../../tag/" class="md-nav__link">
<span class="md-ellipsis">
标签
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../liuyanban/" class="md-nav__link">
<span class="md-ellipsis">
留言板
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_5" >
<div class="md-nav__link md-nav__container">
<a href="../../" class="md-nav__link ">
<span class="md-ellipsis">
博客
</span>
</a>
<label class="md-nav__link " for="__nav_5" id="__nav_5_label" tabindex="0">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_5_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_5">
<span class="md-nav__icon md-icon"></span>
博客
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_5_2" >
<label class="md-nav__link" for="__nav_5_2" id="__nav_5_2_label" tabindex="0">
<span class="md-ellipsis">
归档
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_5_2">
<span class="md-nav__icon md-icon"></span>
归档
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../archive/2025/" class="md-nav__link">
<span class="md-ellipsis">
2025
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../archive/2024/" class="md-nav__link">
<span class="md-ellipsis">
2024
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../archive/2023/" class="md-nav__link">
<span class="md-ellipsis">
2023
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../archive/2022/" class="md-nav__link">
<span class="md-ellipsis">
2022
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../archive/2021/" class="md-nav__link">
<span class="md-ellipsis">
2021
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_5_3" >
<label class="md-nav__link" for="__nav_5_3" id="__nav_5_3_label" tabindex="0">
<span class="md-ellipsis">
分类
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_5_3">
<span class="md-nav__icon md-icon"></span>
分类
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../category/hello-world/" class="md-nav__link">
<span class="md-ellipsis">
Hello World
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../category/%E7%BD%91%E7%AB%99%E6%9B%B4%E6%96%B0%E8%AE%B0%E5%BD%95/" class="md-nav__link">
<span class="md-ellipsis">
网站更新记录
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_6" >
<label class="md-nav__link" for="__nav_6" id="__nav_6_label" tabindex="0">
<span class="md-ellipsis">
友链
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_6_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_6">
<span class="md-nav__icon md-icon"></span>
友链
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../link/" class="md-nav__link">
<span class="md-ellipsis">
友链
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_7" >
<label class="md-nav__link" for="__nav_7" id="__nav_7_label" tabindex="0">
<span class="md-ellipsis">
关于
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_7_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_7">
<span class="md-nav__icon md-icon"></span>
关于
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../about/geren/" class="md-nav__link">
<span class="md-ellipsis">
作者个人简介
</span>
<span class="md-status md-status--new"></span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../about/resume/" class="md-nav__link">
<span class="md-ellipsis">
个人简历
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../about/zcw/" class="md-nav__link">
<span class="md-ellipsis">
支持作者
</span>
<span class="md-status md-status--new"></span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../about/test/" class="md-nav__link">
<span class="md-ellipsis">
功能测试
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="https://wcowin.work" class="md-nav__link">
<span class="md-ellipsis">
个人博客
</span>
</a>
</li>
<li class="md-nav__item">
<a href="https://github.com/new?template_name=Mkdocs-Wcowin&template_owner=Wcowin" class="md-nav__link">
<span class="md-ellipsis">
使用本主题
</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--secondary" aria-label="目录">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
目录
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#_1" class="md-nav__link">
<span class="md-ellipsis">
项目简介
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#_2" class="md-nav__link">
<span class="md-ellipsis">
字体预览
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#_3" class="md-nav__link">
<span class="md-ellipsis">
补字计划
</span>
</a>
<nav class="md-nav" aria-label="补字计划">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#_4" class="md-nav__link">
<span class="md-ellipsis">
主要汉字部分
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#_5" class="md-nav__link">
<span class="md-ellipsis">
其他部分
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#_6" class="md-nav__link">
<span class="md-ellipsis">
获取字体
</span>
</a>
<nav class="md-nav" aria-label="获取字体">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#i" class="md-nav__link">
<span class="md-ellipsis">
ⅰ. 直接下载
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#ii" class="md-nav__link">
<span class="md-ellipsis">
ⅱ. 从源代码生成
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#_7" class="md-nav__link">
<span class="md-ellipsis">
注意事项
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#_8" class="md-nav__link">
<span class="md-ellipsis">
授权信息
</span>
</a>
<nav class="md-nav" aria-label="授权信息">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#_9" class="md-nav__link">
<span class="md-ellipsis">
许可
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#_10" class="md-nav__link">
<span class="md-ellipsis">
限制
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#mkdocs" class="md-nav__link">
<span class="md-ellipsis">
基于Mkdocs的网站字体美化用法
</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-content" data-md-component="content">
<article class="md-content__inner md-typeset">
<nav class="md-tags" >
<a href="../../../tag/#tag:mkdocs" class="md-tag">Mkdocs</a>
</nav>
<a href="https://github.com/Wcowin/Mkdocs-Wcowin/edit/main/docs/blog/websitebeauty/mkdocsfont.md" title="编辑此页" class="md-content__button md-icon" rel="edit">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 20H6V4h7v5h5v3.1l2-2V8l-6-6H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h4zm10.2-7c.1 0 .3.1.4.2l1.3 1.3c.2.2.2.6 0 .8l-1 1-2.1-2.1 1-1c.1-.1.2-.2.4-.2m0 3.9L14.1 23H12v-2.1l6.1-6.1z"/></svg>
</a>
<a href="https://github.com/Wcowin/Mkdocs-Wcowin/raw/main/docs/blog/websitebeauty/mkdocsfont.md" title="查看本页的源代码" class="md-content__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 18c.56 0 1 .44 1 1s-.44 1-1 1-1-.44-1-1 .44-1 1-1m0-3c-2.73 0-5.06 1.66-6 4 .94 2.34 3.27 4 6 4s5.06-1.66 6-4c-.94-2.34-3.27-4-6-4m0 6.5a2.5 2.5 0 0 1-2.5-2.5 2.5 2.5 0 0 1 2.5-2.5 2.5 2.5 0 0 1 2.5 2.5 2.5 2.5 0 0 1-2.5 2.5M9.27 20H6V4h7v5h5v4.07c.7.08 1.36.25 2 .49V8l-6-6H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h4.5a8.2 8.2 0 0 1-1.23-2"/></svg>
</a>
<div class="admonition info">
<p class="admonition-title">💾 AI智能摘要 (智谱清言)</p>
<p>霞鹜文楷是一款基于Klee One开源日文字体衍生的高质量中文字体，支持简繁日韩三字重，适用于网站、手机系统等，具有美观、可读性强等特点。</p>
</div>
<div class="admonition info">
<p class="admonition-title">📖 阅读信息</p>
<p>阅读时间：<strong>6</strong> 分钟 | 中文字符：<strong>2328</strong> | 有效代码行数：<strong>21</strong></p>
</div>
<p>我目前在用的字体：<a href="https://github.com/lxgw/LxgwWenKai" target="_blank">霞鹜文楷</a><br />
想必你可以直观从我的网站感受到，<a href="https://chawyehsu.github.io/lxgw-wenkai-webfont/">这款字体</a>的美观程度。 </p>
<p><a href="#mkdocs">快速教程</a></p>
<hr />
<p><strong>以下是摘录的部分字体官方介绍文档</strong></p>
<blockquote>
<p><strong>注意事项</strong></p>
<ul>
<li>添字请在 <a href="https://github.com/lxgw/LxgwWenKai/issues/33">Issue #33</a> 反馈，字形调整请在 <a href="https://github.com/lxgw/LxgwWenKai/issues/14">Issue #14</a> 反馈，不要另开议题，以便于整理。</li>
<li>若需要在网站上使用这款字体，请参阅 <a href="https://github.com/lxgw/LxgwWenKai/issues/24">Issue #24</a>。</li>
<li>有关 Magisk 字体模块等手机字体替换有关的问题，请移步<a href="https://github.com/lxgw/advanced-cjk-font-magisk-module-template">模块模板</a>的 Issues 里反馈，不要在本项目开议题。</li>
<li>更多版本 <em>（可能会随时变动）</em> ：</li>
<li><a href="https://github.com/lxgw/LxgwWenKai-Screen">霞鹜文楷屏幕阅读版 / LXGW WenKai Screen</a>：适用于 PC 和 Android 手机屏幕显示且无需特别切换到粗体。</li>
<li><a href="https://github.com/lxgw/LxgwWenKai-Lite">霞鹜文楷 轻便版 / LXGW WenKai Lite</a>：与完整版相比剔除一些较不常用的字符，便于开发者将字体嵌入软件中。</li>
<li><a href="https://github.com/lxgw/LxgwWenkaiGB">霞鹜文楷 GB / LXGW WenKai GB</a>：进一步调整字形和笔形，符合 G 源字形规范。包含《通用规范汉字表》8105 个汉字。</li>
<li><a href="https://github.com/lxgw/LxgwWenkaiTC">霞鹜文楷 TC / LXGW WenKai TC</a>：旧字形版参考「一点字坊」的「传承字形标准化文件」对部件进行修改，适用于繁体中文用户及旧字形爱好者。</li>
<li><a href="https://github.com/lxgw/LxgwBright">LXGW Bright</a>：与 <a href="https://github.com/CatharsisFonts/Ysabeau">Ysabeau 系列字体</a> 搭配的中英文合并字体。</li>
</ul>
</blockquote>
<h1 id="lxgw-wenkai">LXGW WenKai / 霞鹜文楷<a class="headerlink" href="#lxgw-wenkai" title="Permanent link">&para;</a></h1>
<p>An open-source Chinese font derived from Fontworks' Klee One. 一款开源中文字体，基于 FONTWORKS 出品字体 Klee One 衍生。 </p>
<p><a href="https://github.com/lxgw/LxgwWenKai"><img alt="开源授权" src="https://img.shields.io/github/license/lxgw/LxgwWenKai?style=flat-square" /></a>
<a href="https://github.com/lxgw/LxgwWenKai/releases/latest"><img alt="最新版" src="https://img.shields.io/github/release/lxgw/LxgwWenKai?style=flat-square" /></a>
<a href="https://www.maoken.com/freefonts/9704.html"><img alt="猫啃网" src="https://shields.io/badge/%E7%8C%AB%E5%95%83%E7%BD%91-fe5e52?style=flat-square&amp;logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAfCAMAAABeSlSAAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAHyUExURQAAAAAA//8AAAAA//8AAAAA/wAA//8AAAAA//8AAAAA//8A//8AAAAA//8AAAAA//8AAAAA/wD///8AAAD/////AAD/////AP//AP//////AAD/////AAD/////AP///wD/////AP//AP//////AP//////AP///wD//////wD//wD/////////AP///wD//wD//wD/////AP///////////wD/////AP///wD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f39/f////39/f39/f39/f39/f39/f7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v////7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v////7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v///y6UHskAAACldFJOUwADAwQEBQYGBwcICAkLCwwMDQ0NDhESEhMWFxgYGRkbHBwdHR8hIyQlJygpKSwsLS4yMjQ1Njc3ODk6PD5BQkNFRkdNUFFTVldaXF1fYGdqbnBxcnZ4eXt8gIGEhYaJio6RkpWXmJqbnJ2goqOlpqirrrCxs7S1trm7vr/BwsTHyMvMzc/Q0tPU2Nrb3N3f4uTm5+jp6+zt7vDx8vP19vf4+/z9/iyQxCoAAAAJcEhZcwAAFxEAABcRAcom8z8AAAHPSURBVDhPvZDpOxtRFIdvCJ1olaCLoqW1BF1U2tpJSlpFiK17NNE1DbGVoFVL20TRoMFUDDKS83+6Z+6tJjx9Hp+8X+b+fued88xcckLcmnl9nR8PkfVizoDPewHYcRYqVRQZr0TYfYinii0A2LReVOoDEiwrtN5txPNtMTj2B8BTH6OMGHc/A0huaduEoXg52FwwIEPY+7a1+opalV5uts/KEPp0s07aqkIj2wMv1XHmDbo0AqlTQ9rklRtoJI3DWLJ+MsxHf5mtFT7A98toCG/A9/jQBkR6/gNGzqJBLHu8O4pVrRgGiecjBJsUgeiWWPYNOtwBWk99dHlZs17KDO24Ep3nVHdMlV7ffaNRI/SEsPLkMENwYApUkUfb0K/XW0N7XTElv7GbSGZGghOTWBpno29dpT8PfWd0vxQjlRmJw8yItwPM52onAPq5MX3huIbw/n8GvzBC75+mzbJIo3iZVuFn7MIIKcIX5I7TEUZLkFb+ci6Q2G5cstrQC7CQf/4rgKtmEVfYNFwgJO0dXpAs0vbLKLXFHRrBfYmPkZQe3BpFyJXJhwxV/Tc+4fw0n+KjA+Ibhvx8CmvDjf8+IYprJsuTp+0P8ng8OQjZB5l3H1123DZyAAAAAElFTkSuQmCC" /></a></p>
<h2 id="_1">项目简介<a class="headerlink" href="#_1" title="Permanent link">&para;</a></h2>
<p>2020 年 12 月，日本著名字体厂商 FONTWORKS 在 GitHub 上发布了 <a href="https://github.com/fontworks-fonts">7 款日文字体</a>，分别为 <strong>Train、Klee、Stick、Rock-n-Roll、Reggae、Rampart 和 DotGothic16</strong>，根据 SIL Open Font License 1.1 授权许可开源。7 款开源日文字体各有各的特点，而这 7 款字体中，字符数量最多的是 <a href="https://github.com/fontworks-fonts/Klee">Klee</a>。</p>
<p>这是一款有着日本教科书体风格的字体，兼有仿宋和楷体的特点，可读性高。一些 DIY 字体爱好者曾先后用仿宋等字体补全这款字体，作为手机系统的美化字体移植在 iOS、Android 等手机系统中，受到很多玩机发烧友的欢迎。不过这样补全的字体有一些不足之处。 <strong>第一</strong>，原有字体和后补字体之间有着一定的差异，致使一些不同的文字（如 Klee 原有汉字与后补简体字）混排之后会有一定的违和感。 <strong>第二</strong>，由于补字所用的字体为商业版权字体，补全之后不可用于商业用途，还会有侵权的风险。此外，目前现有的开源中文字库里，楷体类寥寥无几，仿宋类则几乎没有。</p>
<p>鉴于此，也为了丰富开源中文字体中的楷体门类，2021 年 1 月 20 日起，本人开始了为 Klee One 这一高质量的日文开源字体补全简繁常用字的尝试。因该字体具有一定的「文艺气息」，命名 <strong>「霞鹜文楷」</strong><em>（其实当初是感觉这款字体适合正文阅读定名「文楷」，后来发现这款字体可能并不太适合大段正文排版，相比之下更加适合诗词之类的中等长度文本排版，或者注释排版）</em>。由于 Klee One 字体的 Regular 字重太细不太适合阅读，选取原字体 SemiBold 字重作为 Regular 字重。经过长时间的积累，目前已发展成简繁日韩均支持的 3 字重字体家族 <del>（虽然拙劣粗糙了点）</del> 。</p>
<p>有关补字过程的更多信息，请参阅本人 GitHub.io 博客里的文章：<a href="https://lxgw.github.io/2021/01/28/Klee-Simpchin/">《为 Klee 试制简化字》</a>。</p>
<h2 id="_2">字体预览<a class="headerlink" href="#_2" title="Permanent link">&para;</a></h2>
<p><img alt="" src="https://raw.githubusercontent.com/lxgw/LxgwWenKai/main/documentation/wenkai-1.png" /></p>
<p><img alt="" src="https://raw.githubusercontent.com/lxgw/LxgwWenKai/main/documentation/wenkai-2.png" /></p>
<p><img alt="" src="https://raw.githubusercontent.com/lxgw/LxgwWenKai/main/documentation/wenkai-3.png" /></p>
<p><img alt="" src="https://raw.githubusercontent.com/lxgw/LxgwWenKai/main/documentation/wenkai-4.png" /></p>
<p><img alt="" src="https://raw.githubusercontent.com/lxgw/LxgwWenKai/main/documentation/wenkai-5.png" /></p>
<p><img alt="" src="https://raw.githubusercontent.com/lxgw/LxgwWenKai/main/documentation/wenkai-6.png" /></p>
<p><img alt="" src="https://raw.githubusercontent.com/lxgw/LxgwWenKai/main/documentation/wenkai-7.png" /></p>
<p><img alt="" src="https://raw.githubusercontent.com/lxgw/LxgwWenKai/main/documentation/wenkai-8.png" /></p>
<p><img alt="" src="https://raw.githubusercontent.com/lxgw/LxgwWenKai/main/documentation/wenkai-9.png" /></p>
<!-- [查看详细更新记录。](https://github.com/lxgw/LxgwWenKai/blob/main/History.md) -->
<p>历史版本的 Release，请在 <a href="https://github.com/lxgw/LxgwWenKai/releases">Release</a> 页面查看。文字版本的更新记录 <code>HISTORY.MD</code> 不再维护，敬请谅解。</p>
<h2 id="_3">补字计划<a class="headerlink" href="#_3" title="Permanent link">&para;</a></h2>
<h3 id="_4">主要汉字部分<a class="headerlink" href="#_4" title="Permanent link">&para;</a></h3>
<p>请参阅<a href="https://github.com/lxgw/LxgwWenKai-Lite#%E5%8A%A0%E5%AD%97%E8%AE%A1%E5%88%92">「霞鹜文楷 轻便版」加字计划</a>。</p>
<h3 id="_5">其他部分<a class="headerlink" href="#_5" title="Permanent link">&para;</a></h3>
<ul class="task-list">
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled checked/><span class="task-list-indicator"></span></label> 补完 CJK 统一汉字基本区 20992 个汉字（简繁） <em>（目前完整版有 6857 个字形由 zi2zi 深度学习生成，字形较粗糙。）</em> ；</li>
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled checked/><span class="task-list-indicator"></span></label> 补全常用谚文（韩语/朝鲜语）音节 2367 个。 <em>（做得比较拙劣。Lite 版不包含。）</em></li>
</ul>
<p><a href="https://github.com/lxgw/LxgwWenKai/projects">点击此处查看后续加字及调整计划。</a></p>
<h2 id="_6">获取字体<a class="headerlink" href="#_6" title="Permanent link">&para;</a></h2>
<h3 id="i">ⅰ. 直接下载<a class="headerlink" href="#i" title="Permanent link">&para;</a></h3>
<ol>
<li>进入 <a href="https://github.com/lxgw/LxgwWenKai/releases">Release</a> 界面下载对应版本的 TTF 格式文件，或在本仓库 <code>fonts/TTF</code> 文件夹中下载。</li>
<li>在 <a href="https://gitee.com/mirrors/lxgw-wenkai">Gitee 官方镜像仓库</a> <code>fonts/TTF</code> 文件夹中下载。</li>
<li>进入 <a href="https://www.maoken.com/freefonts/9704.html">猫啃网</a>、<a href="https://zfont.cn/cn/font_286.html">Zfont.cn</a>、<a href="https://ziyouziti.com/mianfeiziti-302.html">自由字体</a> 进行下载。GitHub 项目更新后，会联系站长进行更新，更新会稍晚些。 <strong>注意：</strong> 其它收录免费商用字体的网站上可能也收录了本字体，但可能不是最新版。 </li>
<li><a href="http://lxgw.ysepan.com/">永硕Ｅ盘</a>、<a href="https://lxgw.lanzoui.com/b0cqwpt3i">蓝奏云（密码：8ppk）</a> 会在 GitHub 项目更新后 72 小时之内更新。</li>
<li>如果您使用 macOS，已经安装过 <a href="https://brew.sh/">Homebrew</a>，可以在终端输入命令：<code>brew tap homebrew/cask-fonts &amp;&amp; brew install font-lxgw-wenkai</code> 来安装本字体。</li>
<li>如果您使用 Windows，已经安装过 <a href="https://scoop.sh/">Scoop</a>，可以在终端输入命令：<code>scoop bucket add nerd-fonts &amp;&amp; scoop install LXGWWenKai</code> 或者 <code>scoop bucket add nerd-fonts &amp;&amp; scoop install LXGWWenKaiMono</code> 来安装本字体。亦可查看微软官方教程：<a href="https://support.microsoft.com/zh-cn/windows/如何在-windows-中安装或删除字体-f12d0657-2fc8-7613-c76f-88d043b334b8">如何在 Windows 中安装或删除字体</a>。</li>
</ol>
<h3 id="ii">ⅱ. 从源代码生成<a class="headerlink" href="#ii" title="Permanent link">&para;</a></h3>
<p>请运行 <code>./sources/build.bat</code> 或 <code>./sources/build.sh</code>。需要安装 <a href="https://github.com/googlefonts/fontmake"><code>fontmake</code></a>：<code>pip3 install fontmake</code> 和 <a href="https://github.com/fonttools/fonttools"><code>fontTools</code></a>：<code>pip3 install fonttools</code>。</p>
<h2 id="_7">注意事项<a class="headerlink" href="#_7" title="Permanent link">&para;</a></h2>
<ol>
<li>截至目前，完整版本字体含有全部 CJK 基本区汉字，以及零星扩展 A~G 区汉字。 <strong>如有补字需求，请在 <a href="https://github.com/lxgw/LxgwWenKai/issues/33">Issue #33</a> 提出，不要另开 Issue</strong>，以便于整理。 </li>
<li>本人并不是专业的设计师，并未考虑设计美感，所以看起来可能略丑，补进去的字与原版可能略有违和感，且在 Bold 字重中部分字的轮廓曲线会有毛刺，Light 字重中部分字的轮廓会存在飞点；此外由于时间仓促，并没有多余的时间细修，部分字的部件拼接会很生硬。<strong>如有字形优化建议，请在 <a href="https://github.com/lxgw/LxgwWenKai/issues/14">Issue #14</a> 提出，不要另开 Issue</strong>，以便于整理。 <em>（以上两个 issue 均已加上 long term 标签，且均已在 Issues 页面置顶。）</em></li>
<li><strong>若需要在网站上使用这款字体，请参阅 <a href="https://github.com/lxgw/LxgwWenKai/issues/24">Issue #24</a>。</strong></li>
<li>对于搭配的西文字体，个人推荐 <a href="https://github.com/CatharsisFonts/Ysabeau">Ysabeau</a> 系列字体。另有 Ysabeau Office 与霞鹜文楷轻便版的合并字体 <a href="https://github.com/lxgw/LxgwBright">LXGW Bright</a>，采用 <a href="https://github.com/nowar-fonts/Warcraft-Font-Merger">字体合并补全工具</a> 将两款字体合并而成，提供 TTF、OTF、WOFF、WOFF2 四种格式。</li>
<li>该字体的更多版本 <em>（可能会随时变动）</em></li>
<li><a href="https://github.com/lxgw/LxgwWenKai-Screen">霞鹜文楷屏幕阅读版 / LXGW WenKai Screen</a> 由于原版「霞鹜文楷」Regular 字重在 PC 和 Android 屏幕上显示较细，而 Bold 字重需要在粗体模式下才能调用，特制作以 Bold 字重为基础的，加粗后的「霞鹜文楷」与 Windows 默认英文字体 Segoe UI Regular 粗细相当，PC 和 Android 手机屏幕阅读更加舒适，无需特别切换到粗体模式。</li>
<li><a href="https://github.com/lxgw/LxgwWenKai-Lite">霞鹜文楷 轻便版 / LXGW WenKai Lite</a>：剔除 v1.100 版本增补的一些较不常用的汉字，便于开发者将字体嵌入软件中。若完整版有字形优化或特性更新，精简版也将会跟进。精简版不包含谚文。</li>
<li><a href="https://github.com/lxgw/LxgwWenkaiGB">霞鹜文楷 GB / LXGW WenKai GB</a>：在文楷基础上进一步调整字形和笔形，符合 G 源字形规范。包含《通用规范汉字表》8105 个汉字。另有与「芫荽」等同源字体合并的<a href="https://github.com/lxgw/FusionKai">「缝合楷」</a>，及使用本项目字体补全的 <a href="https://github.com/lxgw/LxgwWenkaiGB-Fusion">GB 融合版</a>。</li>
<li><a href="https://github.com/lxgw/LxgwWenkaiTC">霞鹜文楷 TC / LXGW WenKai TC</a>：供繁体中文用户和旧字形爱好者使用，基于轻便版制作，采用旧字形写法，主要采用 Klee One 的隐藏字形，部分部件手动修改 （大部分部件参考<a href="https://github.com/ichitenfont/inheritedglyphs">一点字坊「传承字形标准化文件」</a>，借助<a href="https://www.cnblogs.com/hanbox/">「汉文博士」</a><a href="http://www.guoxuemi.com/zidian/bujian/">「国学迷」</a><a href="http://zi.tools">「字统网」</a> 等工具按部件查字，对字形进行修改）。此外已有基于 Klee One 改造的繁体中文字体 <a href="https://github.com/ButTaiwan/iansui">芫荽 / Iansui</a>，采用台湾地区的教育标准字形；另有采用香港地区字形标准的 <a href="https://github.com/ItMarki/jyunsaikaai">芫茜雅楷 / JyunsaiKaai</a>。</li>
<li><strong>本项目为字体项目，有关 Magisk 字体模块等手机字体替换有关的问题，请移步<a href="https://github.com/lxgw/advanced-cjk-font-magisk-module-template">模块模板</a>的 Issues 里反馈，不要在本项目开议题。</strong></li>
</ol>
<h2 id="_8">授权信息<a class="headerlink" href="#_8" title="Permanent link">&para;</a></h2>
<p>本字体是基于 SIL Open Font License 1.1 改造的 FONTWORKS 开发并发布的 <a href="https://github.com/fontworks-fonts/Klee">Klee</a> 开源项目。Klee 是 FONTWORKS 的商标。</p>
<blockquote>
<p><a href="https://www.maoken.com/">猫啃网</a>提供 SIL Open Font License 1.1 非官方<a href="https://www.maoken.com/ofl">简体中文译本</a>便于理解，仅供参考。</p>
</blockquote>
<h3 id="_9">许可<a class="headerlink" href="#_9" title="Permanent link">&para;</a></h3>
<ul>
<li>这款字体无论是个人还是企业都可以自由商用，无需付费，也无需知会或者标明原作者。 <em>（但如果告知，我会很感激。）</em></li>
<li>这款字体可以自由传播、分享，或者将字体安装于系统、软件或APP中也是允许的，可以与任何软件捆绑再分发以及／或一并销售。</li>
<li>这款字体可以自由修改、改造，制作衍生字体。修改或改造后的字体也必须同样以 <a href="https://scripts.sil.org/OFL">SIL OFL</a> 公开。</li>
</ul>
<h3 id="_10">限制<a class="headerlink" href="#_10" title="Permanent link">&para;</a></h3>
<ul>
<li>在制作衍生字体时，字体名称不可使用原有字体的「保留名称」。本字体保留名称「霞鹜」「LXGW」，基于本字体二次衍生的字体，名称不可出现「霞鹜」或「LXGW」字样；而在没有对字体源代码进行修改的情况下，重新编译出来的字体，可以继续使用本字体的保留名称「霞鹜」「LXGW」。</li>
<li>根据 <a href="https://scripts.sil.org/OFL">SIL Open Font License 1.1</a> 许可与条件中 第一条的规定， <strong>禁止单独出售字体文件(OTF/TTF文件)的行为。</strong></li>
<li>该字体不可在 <a href="https://scripts.sil.org/OFL">SIL Open Font License 1.1</a> 以外的授权许可下发行。</li>
</ul>
<p><strong>以上是摘录的部分字体官方介绍文档</strong></p>
<hr />
<h2 id="mkdocs">基于Mkdocs的网站字体美化用法<a class="headerlink" href="#mkdocs" title="Permanent link">&para;</a></h2>
<p>在mkdocs.yml中添加以下内容
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-0-1">1</a></span>
<span class="normal"><a href="#__codelineno-0-2">2</a></span>
<span class="normal"><a href="#__codelineno-0-3">3</a></span>
<span class="normal"><a href="#__codelineno-0-4">4</a></span>
<span class="normal"><a href="#__codelineno-0-5">5</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-0-1" name="__codelineno-0-1"></a><span class="nt">extra_css</span><span class="p">:</span>
<a id="__codelineno-0-2" name="__codelineno-0-2"></a><span class="w"> </span><span class="p p-Indicator">-</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">https://static.zeoseven.com/zsft/292/main/result.css</span>
<a id="__codelineno-0-3" name="__codelineno-0-3"></a><span class="w"> </span><span class="c1"># - https://cdn.jsdelivr.net/npm/lxgw-wenkai-lite-webfont@1.1.0/style.css</span>
<a id="__codelineno-0-4" name="__codelineno-0-4"></a><span class="w"> </span><span class="c1"># - https://cdn.jsdelivr.net/npm/lxgw-wenkai-tc-webfont@1.0.0/style.css</span>
<a id="__codelineno-0-5" name="__codelineno-0-5"></a><span class="w"> </span><span class="c1"># - https://cdn.jsdelivr.net/npm/lxgw-wenkai-screen-webfont@1.1.0/style.css</span>
</code></pre></div></td></tr></table></div></p>
<p>然后在extra.css中添加以下内容
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-1-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-1-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-1-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-1-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-1-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-1-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-1-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-1-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-1-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-1-10">10</a></span>
<span class="normal"><a href="#__codelineno-1-11">11</a></span>
<span class="normal"><a href="#__codelineno-1-12">12</a></span>
<span class="normal"><a href="#__codelineno-1-13">13</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-1-1" name="__codelineno-1-1"></a><span class="p">@</span><span class="k">import</span><span class="w"> </span><span class="nt">url</span><span class="o">(</span><span class="s1">&#39;https://static.zeoseven.com/zsft/292/main/result.css&#39;</span><span class="o">)</span><span class="p">;</span>
<a id="__codelineno-1-2" name="__codelineno-1-2"></a>
<a id="__codelineno-1-3" name="__codelineno-1-3"></a><span class="nt">body</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-1-4" name="__codelineno-1-4"></a><span class="k">font-family</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;LXGW WenKai&quot;</span><span class="p">;</span>
<a id="__codelineno-1-5" name="__codelineno-1-5"></a><span class="k">font-weight</span><span class="p">:</span><span class="w"> </span><span class="kc">normal</span><span class="p">;</span>
<a id="__codelineno-1-6" name="__codelineno-1-6"></a><span class="p">}</span>
<a id="__codelineno-1-7" name="__codelineno-1-7"></a>
<a id="__codelineno-1-8" name="__codelineno-1-8"></a>
<a id="__codelineno-1-9" name="__codelineno-1-9"></a><span class="c">/* button.md-top {</span>
<a id="__codelineno-1-10" name="__codelineno-1-10"></a><span class="c"> font-family: LXGW WenKai;</span>
<a id="__codelineno-1-11" name="__codelineno-1-11"></a><span class="c"> font-size: 16px;</span>
<a id="__codelineno-1-12" name="__codelineno-1-12"></a><span class="c"> font-weight: lighter;</span>
<a id="__codelineno-1-13" name="__codelineno-1-13"></a><span class="c">} */</span>
</code></pre></div></td></tr></table></div></p>
<p>不懂extra_css的用法的可以看一下我写的<a href="../../Mkdocs/mkdocs2/#extra_javascriptextra_css">extra_css部分</a>教程</p>
<div class="admonition tip">
<p class="admonition-title">Tip</p>
<p>切换字体后可能返回顶部按钮会在个别浏览器显示异常
建议在extra.css里加入
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-2-1">1</a></span>
<span class="normal"><a href="#__codelineno-2-2">2</a></span>
<span class="normal"><a href="#__codelineno-2-3">3</a></span>
<span class="normal"><a href="#__codelineno-2-4">4</a></span>
<span class="normal"><a href="#__codelineno-2-5">5</a></span>
<span class="normal"><a href="#__codelineno-2-6">6</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-2-1" name="__codelineno-2-1"></a><span class="nt">button</span><span class="p">.</span><span class="nc">md-top</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-2-2" name="__codelineno-2-2"></a><span class="w"> </span><span class="k">font-family</span><span class="p">:</span><span class="w"> </span><span class="n">LXGW</span><span class="w"> </span><span class="n">WenKai</span><span class="p">;</span><span class="w"> </span><span class="c">/* 修改字体 */</span>
<a id="__codelineno-2-3" name="__codelineno-2-3"></a><span class="w"> </span><span class="k">font-size</span><span class="p">:</span><span class="w"> </span><span class="mi">16</span><span class="kt">px</span><span class="p">;</span><span class="w"> </span><span class="c">/* 修改字体大小 */</span>
<a id="__codelineno-2-4" name="__codelineno-2-4"></a><span class="w"> </span><span class="k">font-weight</span><span class="p">:</span><span class="w"> </span><span class="kc">bold</span><span class="p">;</span><span class="w"> </span><span class="c">/* 修改字体粗细 */</span>
<a id="__codelineno-2-5" name="__codelineno-2-5"></a><span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="mh">#518FC1</span><span class="p">;</span><span class="w"> </span><span class="c">/* 修改字体颜色 */</span>
<a id="__codelineno-2-6" name="__codelineno-2-6"></a><span class="p">}</span>
</code></pre></div></td></tr></table></div></p>
</div>
<style>
.related-posts {
margin-top: 1.5rem;
padding-top: 0.75rem;
border-top: 1px solid rgba(0,0,0,0.1);
max-height: none !important; /* 防止Safari错误计算高度 */
overflow: visible !important; /* 防止内容被截断 */
}
.related-posts h3 {
margin-top: 0;
margin-bottom: 0.5rem;
font-size: 1.2rem;
font-weight: 500;
line-height: 1.3;
}
.related-posts ul {
margin: 0 0 0.5rem 0 !important; /* 强制覆盖可能的冲突样式 */
padding-left: 1.5rem;
list-style-position: outside;
}
.related-posts li {
margin-bottom: 0.25rem;
line-height: 1.4;
}
/* 暗色模式适配 */
[data-md-color-scheme="slate"] .related-posts {
border-top-color: rgba(255,255,255,0.1);
}
/* Safari特定修复 */
@supports (-webkit-hyphens:none) {
.related-posts {
display: block;
position: relative;
height: auto !important;
}
.related-posts ul {
position: static;
}
}
</style>
<div class="related-posts">
<h3>📚 相关文章推荐</h3>
<ul>
<li><a href="/Mkdocs-Wcowin/blog/Mkdocs/mkdocs1/">利用Mkdocs部署静态网页至GitHubpages</a></li>
<li><a href="/Mkdocs-Wcowin/blog/websitebeauty/mkcomments/">为网站添加评论系统</a></li>
<li><a href="/Mkdocs-Wcowin/blog/Mkdocs/linktech/">如何给MKdocs添加友链</a></li>
<li><a href="/Mkdocs-Wcowin/blog/websitebeauty/Mkdocs-AI-Summary/">MkDocs文档AI摘要</a></li>
<li><a href="/Mkdocs-Wcowin/blog/websitebeauty/time/">为MKdocs添加文章修订时间戳</a></li>
</ul>
</div>
<!--
Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to
deal in the Software without restriction, including without limitation the
rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
sell copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
IN THE SOFTWARE.
-->
<!-- Render date of last update -->
<!-- Render date of creation -->
<!-- ---------------------------------------------------------------------- -->
<!-- Render authors -->
<!-- ---------------------------------------------------------------------- -->
<!-- Render committers from GitHub -->
<!-- Render committers from GitLab -->
<!-- Render committers -->
<!-- ---------------------------------------------------------------------- -->
<!-- Determine date of last update -->
<!-- Determine date of creation -->
<!-- Source file information -->
<aside class="md-source-file">
<!-- Date of last update -->
<span class="md-source-file__fact">
<span class="md-icon" title="最后更新">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 13.1c-.1 0-.3.1-.4.2l-1 1 2.1 2.1 1-1c.2-.2.2-.6 0-.8l-1.3-1.3c-.1-.1-.2-.2-.4-.2m-1.9 1.8-6.1 6V23h2.1l6.1-6.1zM12.5 7v5.2l4 2.4-1 1L11 13V7zM11 21.9c-5.1-.5-9-4.8-9-9.9C2 6.5 6.5 2 12 2c5.3 0 9.6 4.1 10 9.3-.3-.1-.6-.2-1-.2s-.7.1-1 .2C19.6 7.2 16.2 4 12 4c-4.4 0-8 3.6-8 8 0 4.1 3.1 7.5 7.1 7.9l-.1.2z"/></svg>
</span>
<span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-iso_date" title="2025年4月29日 14:57:02 UTC">2025-04-29</span>
</span>
<!-- Date of creation -->
<!-- Authors (git-authors plugin) -->
<!-- Authors (git-committers plugin) -->
<span class="md-source-file__fact">
<span class="md-icon" title="贡献者">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"/></svg>
</span>
<span>GitHub</span>
<nav>
<a
href="https://github.com/Wcowin"
class="md-author"
title="@Wcowin"
>
<img
src="https://avatars.githubusercontent.com/u/99159173?v=4&size=72"
alt="Wcowin"
/>
</a>
<!-- More authors -->
</nav>
</span>
</aside>
<!--
Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to
deal in the Software without restriction, including without limitation the
rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
sell copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
IN THE SOFTWARE.
-->
<!-- Determine feedback configuration -->
<!-- Determine whether to show feedback -->
<!-- Was this page helpful? -->
<form class="md-feedback" name="feedback" hidden>
<fieldset>
<legend class="md-feedback__title">
此页面有帮助吗？
</legend>
<div class="md-feedback__inner">
<!-- Feedback ratings -->
<div class="md-feedback__list">
<button
class="md-feedback__icon md-icon"
type="submit"
title="This page was helpful"
data-md-value="1"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 9v12H1V9zm4 12a2 2 0 0 1-2-2V9c0-.55.22-1.05.59-1.41L14.17 1l1.06 1.06c.27.27.44.64.44 1.05l-.03.32L14.69 8H21a2 2 0 0 1 2 2v2c0 .26-.05.5-.14.73l-3.02 7.05C19.54 20.5 18.83 21 18 21zm0-2h9.03L21 12v-2h-8.79l1.13-5.32L9 9.03z"/></svg>
</button>
<button
class="md-feedback__icon md-icon"
type="submit"
title="This page could be improved"
data-md-value="0"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 15V3h4v12zM15 3a2 2 0 0 1 2 2v10c0 .55-.22 1.05-.59 1.41L9.83 23l-1.06-1.06c-.27-.27-.44-.64-.44-1.06l.03-.31.95-4.57H3a2 2 0 0 1-2-2v-2c0-.26.05-.5.14-.73l3.02-7.05C4.46 3.5 5.17 3 6 3zm0 2H5.97L3 12v2h8.78l-1.13 5.32L15 14.97z"/></svg>
</button>
</div>
<!-- Feedback rating notes (shown after submission) -->
<div class="md-feedback__note">
<div data-md-value="1" hidden>
<!-- Determine title -->
<!-- Replace {url} and {title} placeholders in note -->
谢谢你的反馈！
</div>
<div data-md-value="0" hidden>
<!-- Determine title -->
<!-- Replace {url} and {title} placeholders in note -->
Thanks for your feedback! Help us improve this page by using our <a href="https://marketingplatform.google.com/about/analytics/" target="_blank" rel="noopener">feedback form</a>.
</div>
</div>
</div>
</fieldset>
</form>
<!--
Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to
deal in the Software without restriction, including without limitation the
rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
sell copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
IN THE SOFTWARE.
-->
<!-- Comment system -->
</article>
</div>
<script>var tabs=__md_get("__tabs");if(Array.isArray(tabs))e:for(var set of document.querySelectorAll(".tabbed-set")){var labels=set.querySelector(".tabbed-labels");for(var tab of tabs)for(var label of labels.getElementsByTagName("label"))if(label.innerText.trim()===tab){var input=document.getElementById(label.htmlFor);input.checked=!0;continue e}}</script>
<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
</div>
<button type="button" class="md-top md-icon" data-md-component="top" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8z"/></svg>
回到页面顶部
</button>
</main>
<!-- Footer -->
<footer class="md-footer">
<!-- Link to previous and/or next page - 移到最上面 -->
<nav
class="md-footer__inner md-grid"
aria-label="页脚"
>
<!-- Link to previous page -->
<a
href="../header/"
class="md-footer__link md-footer__link--prev"
aria-label="上一页: 添加顶部公告栏"
>
<div class="md-footer__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256l137.3-137.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/></svg>
</div>
<div class="md-footer__title">
<span class="md-footer__direction"> 上一页 </span>
<div class="md-ellipsis">添加顶部公告栏</div>
</div>
</a>
<!-- Link to next page -->
<a
href="../shubiao/"
class="md-footer__link md-footer__link--next"
aria-label="下一页: JS实现鼠标样式"
>
<div class="md-footer__title">
<span class="md-footer__direction"> 下一页 </span>
<div class="md-ellipsis">JS实现鼠标样式</div>
</div>
<div class="md-footer__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11z"/></svg>
</div>
</a>
</nav>
<!-- Further information -->
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="footer-wrapper">
<!-- 访问统计区域 -->
<div class="footer-content">
<div class="footer-visit-count">
<div class="footer-item">
<!-- <span class="footer-icon">👀</span> -->
<span>本站访问量：</span>
<span id="finicount_views" class="footer-highlight"></span>
</div>
<div class="footer-item">
<!-- <span class="footer-icon">📝</span> -->
<a
href="https://icp.gov.moe/?keyword=20230640"
target="_blank"
rel="noopener noreferrer"
class="icp-link"
>萌ICP备20230640号</a>
</div>
<div class="footer-item runtime-info">
<!-- <span class="footer-icon">⏱️</span> -->
<span>本站已经运行</span>
<span id="box1" class="footer-highlight"></span>
</div>
</div>
</div>
<!-- 移动端简洁布局 (仿 footercopy.html) -->
<div class="footer-visit-count-mobile">
<span>本站访问量:</span>
<span id="finicount_views_mobile" class="footer-highlight"></span>
|
<a
href="https://icp.gov.moe/?keyword=20230640"
target="_blank"
rel="noopener noreferrer"
class="icp-link"
>萌ICP备20230640号</a>
<!-- |&nbsp; -->
<span class="runtime-info">
<span>本站已经运行</span>
<span id="box1_mobile"></span>
</span>
</div>
<!-- 版权信息和社交媒体水平布局 -->
<div class="footer-bottom-section">
<div class="md-footer-copyright">
<p>Copyright © 2022-2025 Wcowin</p>
<p>Made with <a href="https://squidfunk.github.io/mkdocs-material/" style="color: #518FC1; text-decoration: none;">Material for MkDocs</a></p>
</div>
<div class="footer-social">
<div class="md-social">
<a href="https://s1.imagehub.cc/images/2024/02/02/bb9ee71b03ee7a3b87caad5cc4bcebff.jpeg" target="_blank" rel="noopener" title="Wechat" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M385.2 167.6c6.4 0 12.6.3 18.8 1.1C387.4 90.3 303.3 32 207.7 32 100.5 32 13 104.8 13 197.4c0 53.4 29.3 97.5 77.9 131.6l-19.3 58.6 68-34.1c24.4 4.8 43.8 9.7 68.2 9.7 6.2 0 12.1-.3 18.3-.8-4-12.9-6.2-26.6-6.2-40.8-.1-84.9 72.9-154 165.3-154m-104.5-52.9c14.5 0 24.2 9.7 24.2 24.4 0 14.5-9.7 24.2-24.2 24.2-14.8 0-29.3-9.7-29.3-24.2.1-14.7 14.6-24.4 29.3-24.4m-136.4 48.6c-14.5 0-29.3-9.7-29.3-24.2 0-14.8 14.8-24.4 29.3-24.4 14.8 0 24.4 9.7 24.4 24.4 0 14.6-9.6 24.2-24.4 24.2M563 319.4c0-77.9-77.9-141.3-165.4-141.3-92.7 0-165.4 63.4-165.4 141.3S305 460.7 397.6 460.7c19.3 0 38.9-5.1 58.6-9.9l53.4 29.3-14.8-48.6C534 402.1 563 363.2 563 319.4m-219.1-24.5c-9.7 0-19.3-9.7-19.3-19.6 0-9.7 9.7-19.3 19.3-19.3 14.8 0 24.4 9.7 24.4 19.3 0 10-9.7 19.6-24.4 19.6m107.1 0c-9.7 0-19.3-9.7-19.3-19.6 0-9.7 9.7-19.3 19.3-19.3 14.5 0 24.4 9.7 24.4 19.3.1 10-9.9 19.6-24.4 19.6"/></svg>
</a>
<a href="https://t.me/wecowin" target="_blank" rel="noopener" title="telegram" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M248 8C111.033 8 0 119.033 0 256s111.033 248 248 248 248-111.033 248-248S384.967 8 248 8m114.952 168.66c-3.732 39.215-19.881 134.378-28.1 178.3-3.476 18.584-10.322 24.816-16.948 25.425-14.4 1.326-25.338-9.517-39.287-18.661-21.827-14.308-34.158-23.215-55.346-37.177-24.485-16.135-8.612-25 5.342-39.5 3.652-3.793 67.107-61.51 68.335-66.746.153-.655.3-3.1-1.154-4.384s-3.59-.849-5.135-.5q-3.283.746-104.608 69.142-14.845 10.194-26.894 9.934c-8.855-.191-25.888-5.006-38.551-9.123-15.531-5.048-27.875-7.717-26.8-16.291q.84-6.7 18.45-13.7 108.446-47.248 144.628-62.3c68.872-28.647 83.183-33.623 92.511-33.789 2.052-.034 6.639.474 9.61 2.885a10.45 10.45 0 0 1 3.53 6.716 43.8 43.8 0 0 1 .417 9.769"/></svg>
</a>
<a href="https://twitter.com/wcowin_" target="_blank" rel="noopener" title="twitter.com" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8l164.9-188.5L26.8 48h145.6l100.5 132.9zm-24.8 373.8h39.1L151.1 88h-42z"/></svg>
</a>
<a href="https://github.com/Wcowin" target="_blank" rel="noopener" title="github.com" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg>
</a>
<a href="mailto:<wangkewen821@gmail.com>" target="_blank" rel="noopener" title="" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M64 112c-8.8 0-16 7.2-16 16v22.1l172.5 141.6c20.7 17 50.4 17 71.1 0L464 150.1V128c0-8.8-7.2-16-16-16zM48 212.2V384c0 8.8 7.2 16 16 16h384c8.8 0 16-7.2 16-16V212.2L322 328.8c-38.4 31.5-93.7 31.5-132 0zM0 128c0-35.3 28.7-64 64-64h384c35.3 0 64 28.7 64 64v256c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64z"/></svg>
</a>
<a href="https://space.bilibili.com/1407028951/lists/4566631?type=series" target="_blank" rel="noopener" title="space.bilibili.com" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79 0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0q13.2 0 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0q13.2 0 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797 0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1m-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8s9.7-14.3 10.1-23.5zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2-6.2 6.3-14 9.5-23.6 9.5s-17.5-3.2-23.6-9.5-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2s13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10m191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2s-14 9.5-23.6 9.5-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2s14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10"/></svg>
</a>
</div>
</div>
</div>
</div>
<script>
(function() {
// 避免变量冲突，将所有代码包装在立即执行函数中
function timingTime() {
const start = "2023-10-14T00:00:00";
const startTime = new Date(start).getTime();
const now = Date.now();
let diff = Math.floor((now - startTime) / 1000);
const days = Math.floor(diff / 86400);
diff %= 86400;
const hours = Math.floor(diff / 3600);
diff %= 3600;
const minutes = Math.floor(diff / 60);
const seconds = diff % 60;
return `${days}天${hours}时${minutes}分${seconds}秒`;
}
// 简化的计时器更新函数
function updateTime() {
const el = document.getElementById("box1");
const elMobile = document.getElementById("box1_mobile");
const time = timingTime();
if (el) el.textContent = time;
if (elMobile) elMobile.textContent = time;
}
// 加载访问量计数器
async function loadVisitCounter() {
try {
const script = document.createElement('script');
script.src = '//finicounter.eu.org/finicounter.js';
script.async = true;
script.onerror = function() {
console.log('访问量计数器加载失败，使用备用显示');
const desktop = document.getElementById("finicount_views");
const mobile = document.getElementById("finicount_views_mobile");
if (desktop) desktop.textContent = '统计中...';
if (mobile) mobile.textContent = '统计中...';
};
document.head.appendChild(script);
} catch (e) {
console.log('访问量计数器初始化失败:', e);
}
}
// 同步访问量显示
function syncVisitCount() {
const desktop = document.getElementById("finicount_views");
const mobile = document.getElementById("finicount_views_mobile");
if (desktop && mobile && desktop.textContent && desktop.textContent !== '加载中...') {
mobile.textContent = desktop.textContent;
}
}
// 监听访问量更新
function setupVisitCountObserver() {
try {
const observer = new MutationObserver(syncVisitCount);
const visitCountTarget = document.getElementById("finicount_views");
if (visitCountTarget) {
observer.observe(visitCountTarget, { childList: true, subtree: true });
}
} catch (e) {
console.log('访问量监听器设置失败:', e);
}
}
// 初始化所有功能
function init() {
// 启动计时器
updateTime();
setInterval(updateTime, 1000);
// 加载访问量计数器
loadVisitCounter();
// 设置访问量同步
setupVisitCountObserver();
// 调试信息
console.log('页脚功能已启动');
console.log('当前时间:', timingTime());
}
// 确保DOM加载完成后再初始化
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();
</script>
<style>
/* 页脚背景配色方案 - 可根据喜好选择 */
/* 方案1: 现代深蓝灰色调 (当前使用) */
.md-footer {
background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
}
.md-footer-meta {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}
/* 方案2: 优雅紫色调 (取消注释使用)
.md-footer {
background: linear-gradient(135deg, #2d1b69 0%, #4c1d95 100%);
}
.md-footer-meta {
background: linear-gradient(135deg, #1e1b4b 0%, #2d1b69 100%);
}
*/
/* 方案3: 温暖深绿色调 (取消注释使用)
.md-footer {
background: linear-gradient(135deg, #14532d 0%, #166534 100%);
}
.md-footer-meta {
background: linear-gradient(135deg, #052e16 0%, #14532d 100%);
}
*/
/* 方案4: 经典深灰色调 (取消注释使用)
.md-footer {
background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
}
.md-footer-meta {
background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
}
*/
/* 整体页脚容器 */
.footer-wrapper {
width: 100%;
padding: 0.2rem 0;
text-align: center;
}
/* 版权信息和社交媒体水平布局 */
.footer-bottom-section {
max-width: 900px;
margin: 0.4rem auto 0;
padding: 0.4rem 1rem;
border-top: 1px solid rgba(255, 255, 255, 0.15);
display: flex;
justify-content: space-between;
align-items: center;
}
/* 版权信息 */
.md-footer-copyright {
text-align: left;
font-size: 0.75rem;
opacity: 0.8;
line-height: 1.2;
}
/* 社交媒体图标 */
.footer-social {
display: -webkit-flex;
display: flex;
gap: 0.3rem;
-webkit-align-items: center;
align-items: center;
}
/* Safari兼容性修复 */
.footer-social .md-social__link svg {
-webkit-transform: translateZ(0);
transform: translateZ(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto;
}
/* 强制Safari显示SVG图标 */
.footer-social .md-social__link {
opacity: 1 !important;
visibility: visible !important;
}
/* 内容区域样式 */
.footer-content {
max-width: 900px;
margin: 0 auto;
padding: 0.4rem 0 0;
}
.footer-visit-count {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.3rem;
font-size: 0.75rem;
color: var(--md-footer-fg-color--light);
}
.footer-item {
display: flex;
align-items: center;
justify-content: center;
padding: 0.4rem 0.8rem;
border-radius: 16px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
min-width: 160px;
font-size: 0.8rem;
transition: all 0.2s ease;
}
.footer-item:hover {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(81, 143, 193, 0.4);
transform: translateY(-1px);
}
.footer-icon {
margin-right: 0.5rem;
font-size: 1rem;
}
.footer-highlight {
color: #939ba2;
font-weight: 600;
margin-left: 0.3rem;
}
.icp-link {
color: inherit;
text-decoration: none;
}
.icp-link:hover {
color: #518FC1;
}
/* 社交媒体图标样式 - 仅桌面端 */
@media (min-width: 76.1875em) {
.footer-social .md-social__link {
padding: 0.3rem;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.1);
width: 2rem;
height: 2rem;
display: -webkit-inline-flex;
display: inline-flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.footer-social .md-social__link svg {
width: 1.2rem;
height: 1.2rem;
fill: currentColor;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
.footer-social .md-social__link:hover {
background: rgba(81, 143, 193, 0.2);
border-color: rgba(81, 143, 193, 0.4);
}
}
/* 移动端社交媒体图标样式 - 恢复默认样式 */
@media (max-width: 76.1875em) {
.footer-social .md-social__link {
padding: 0.4rem;
background: transparent;
border: none;
width: auto;
height: auto;
display: inline-block;
border-radius: 0;
-webkit-transition: color 0.2s ease;
transition: color 0.2s ease;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.footer-social .md-social__link:hover {
background: transparent;
border: none;
color: var(--md-accent-fg-color);
}
.footer-social .md-social__link svg {
width: 1.6rem;
height: 1.6rem;
fill: currentColor;
-webkit-flex-shrink: 0;
flex-shrink: 0;
display: block;
}
}
/* 导航链接样式 */
.md-footer__link {
transition: opacity 0.2s ease;
}
.md-footer__link:hover {
opacity: 1;
}
/* 移动端响应式 - 使用 footercopy.html 样式 */
@media (max-width: 76.1875em) {
/* 隐藏桌面端的卡片式布局 */
.footer-visit-count {
display: none;
}
.footer-bottom-section {
flex-direction: column;
gap: 0.6rem;
text-align: center;
}
.md-footer-copyright {
text-align: center;
font-size: 0.75rem;
}
.footer-social .md-social__link {
width: 1.8rem;
height: 1.8rem;
}
/* 显示移动端的简洁布局 */
.footer-visit-count-mobile {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.4em 0.8em;
padding: 0.2em 0;
font-size: 0.75rem;
color: var(--md-footer-fg-color--light);
text-align: center;
}
.footer-visit-count-mobile > * {
white-space: nowrap;
}
.footer-visit-count-mobile .icp-link {
color: var(--md-footer-fg-color--light);
text-decoration: none;
}
.footer-visit-count-mobile .icp-link:hover {
color: #596875;
text-decoration: underline;
}
/* .runtime-info {
display: none; 移动端隐藏运行时间
} */
}
/* 桌面端隐藏移动端布局 */
@media (min-width: 76.1875em) {
.footer-visit-count-mobile {
display: none;
}
}
@media (min-width: 768px) {
.footer-visit-count {
flex-direction: row;
justify-content: center;
gap: 2rem;
}
}
/* 深色模式适配 */
[data-md-color-scheme="slate"] .md-footer {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}
[data-md-color-scheme="slate"] .md-footer-meta {
background: linear-gradient(135deg, #020617 0%, #0f172a 100%);
}
[data-md-color-scheme="slate"] .footer-item {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.12);
}
[data-md-color-scheme="slate"] .footer-item:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(81, 143, 193, 0.3);
}
[data-md-color-scheme="slate"] .footer-social .md-social__link {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.12);
}
</style>
</div>
</div>
</footer>
</div>
<div class="md-dialog" data-md-component="dialog">
<div class="md-dialog__inner md-typeset"></div>
</div>
<script id="__config" type="application/json">{"base": "../../..", "features": ["announce.dismiss", "navigation.tracking", "navigation.tabs", "navigation.sections", "navigation.top", "navigation.footer", "search.suggest", "search.highlight", "search.share", "navigation.expand", "navigation.indexes", "content.tabs.link", "content.tooltips", "content.code.copy", "content.action.edit", "content.action.view", "content.code.annotate"], "search": "../../../assets/javascripts/workers/search.d50fe291.min.js", "tags": null, "translations": {"clipboard.copied": "\u5df2\u590d\u5236", "clipboard.copy": "\u590d\u5236", "search.result.more.one": "\u5728\u8be5\u9875\u4e0a\u8fd8\u6709 1 \u4e2a\u7b26\u5408\u6761\u4ef6\u7684\u7ed3\u679c", "search.result.more.other": "\u5728\u8be5\u9875\u4e0a\u8fd8\u6709 # \u4e2a\u7b26\u5408\u6761\u4ef6\u7684\u7ed3\u679c", "search.result.none": "\u6ca1\u6709\u627e\u5230\u7b26\u5408\u6761\u4ef6\u7684\u7ed3\u679c", "search.result.one": "\u627e\u5230 1 \u4e2a\u7b26\u5408\u6761\u4ef6\u7684\u7ed3\u679c", "search.result.other": "# \u4e2a\u7b26\u5408\u6761\u4ef6\u7684\u7ed3\u679c", "search.result.placeholder": "\u952e\u5165\u4ee5\u5f00\u59cb\u641c\u7d22", "search.result.term.missing": "\u7f3a\u5c11", "select.version": "\u9009\u62e9\u5f53\u524d\u7248\u672c"}, "version": null}</script>
<script src="../../../assets/javascripts/bundle.56ea9cef.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/Wcowin/Wcowin.github.io@main/docs/javascripts/extra.js"></script>
<script src="../../../javascripts/mathjax.js"></script>
<script src="https://unpkg.com/mathjax@3/es5/tex-mml-chtml.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script src="https://cdn.jsdelivr.net/gh/Wcowin/Wcowin.github.io@main/docs/javascripts/view.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink