fix performance issues possibly caused by font

src/layouts/MarkdownPostLayout.astro

@@ -5,7 +5,6 @@ import { getLangFromUrl, getTranslations } from "@/i18n";
 import "@/styles/global.css";
 
 const { frontmatter, lang, postId } = Astro.props;
-// const lang = getLangFromUrl(Astro.url);
 const t = getTranslations(lang);
 ---
 
@@ -14,6 +13,7 @@ const t = getTranslations(lang);
   description={frontmatter.description}
   image={frontmatter.image?.url}
 >
+  <article class="post-article">
     <div class="post-header">
       <div class="post-meta">
         <h1 class="post-title">{frontmatter.title}</h1>
@@ -43,9 +43,12 @@ const t = getTranslations(lang);
 
     <div class="post-divider"></div>
 
+    <div class="post-content">
       <slot />
+    </div>
 
     <Giscus term={postId} />
+  </article>
 </BaseLayout>
 
 <script
@@ -77,6 +80,27 @@ const t = getTranslations(lang);
 />
 
 <style>
+  .post-content {
+    font-family:
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      "Segoe UI",
+      "PingFang SC",
+      "Hiragino Sans GB",
+      "Microsoft YaHei",
+      "Noto Sans CJK SC",
+      "Source Han Sans SC",
+      sans-serif;
+  }
+
+  .post-content :global(code),
+  .post-content :global(pre),
+  .post-content :global(kbd),
+  .post-content :global(samp) {
+    font-family: "Maple Mono", "Maple Mono CN", monospace;
+  }
+
   a {
     color: var(--post-link-color);
   }