refactor: optimize font family

package.json

@@ -48,6 +48,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "prettier": "^2.7.1",
     "typescript": "^4.6.4",
+    "unplugin-fonts": "^1.0.3",
     "vite": "^3.1.8",
     "vite-plugin-purge-icons": "^0.9.1"
   },

src/main.ts

@@ -1,3 +1,4 @@
+import 'unfonts.css'
 import "./assets/colors/white.css";
 import "./assets/colors/light.css";
 import "./assets/colors/dark.css";

src/styles/main.css

@@ -594,7 +594,9 @@ body {
   color: var(--color-text);
   font-weight: 400;
   font-size: 14px;
-  font-family: "Menlo", "Meslo LG", monospace, "arial", "Georgia", sans-serif;
+  font-family: "Menlo", "Meslo LG", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+    "Noto Color Emoji";
   line-height: 1.725;
   text-rendering: geometricPrecision;
   flex: 1;
@@ -1736,7 +1738,6 @@ article a {
   color: var(--color-background);
   font-weight: 400;
   font-size: 11.200000000000001px;
-  font-family: monospace, "arial", "Georgia", "serif";
   line-height: 1.725;
   text-rendering: geometricPrecision;
   text-align: center;
@@ -1873,7 +1874,6 @@ article a {
 /*友链页面样式开始*/
 #links li {
   list-style: none;
-  font-family: "Menlo", "Meslo LG", monospace, monospace, "arial", "Georgia", sans-serif;
   color: var(--color-text);
 }
 
@@ -2354,8 +2354,8 @@ pre {
   border: 1px dotted #666;
   border-radius: 4px;
   font-size: 13px;
-  font-family: "Menlo", "Meslo LG", monospace, monospace, "arial", "Georgia", sans-serif;
   line-height: 22px;
+  font-family: inherit;
   -webkit-border-radius: 4px;
 }
 
@@ -2369,6 +2369,7 @@ code {
   padding: 0 5px;
   border: 1px dotted #666;
   border-radius: 2px;
+  font-family: inherit;
   -webkit-border-radius: 2px;
 }
 
@@ -2377,7 +2378,6 @@ code {
   margin: 0;
   border-radius: 4px;
   background: #212326;
-  font-family: "Menlo", "Meslo LG", monospace, monospace, "arial", "Georgia", sans-serif;
   -webkit-border-radius: 4px;
 }
 

vite.config.ts

@@ -2,19 +2,65 @@ import { defineConfig } from "vite";
 import { fileURLToPath } from "url";
 import path from "path";
 // vite.config.js
-import PurgeIcons from 'vite-plugin-purge-icons'
+import PurgeIcons from "vite-plugin-purge-icons";
+import Unfonts from "unplugin-fonts/vite";
 
 export default defineConfig({
   plugins: [
     PurgeIcons({
-      content: [
-        './templates/*.html',
-      ],
-    })
+      content: ["./templates/*.html"],
+    }),
+    Unfonts({
+      custom: {
+        /**
+         * Fonts families lists
+         */
+        families: [
+          {
+            /**
+             * Name of the font family.
+             */
+            name: "Meslo LG",
+            /**
+             * Local name of the font. Used to add `src: local()` to `@font-rule`.
+             */
+            local: "Meslo LG S",
+            /**
+             * Regex(es) of font files to import. The names of the files will
+             * predicate the `font-style` and `font-weight` values of the `@font-rule`'s.
+             */
+            src: "./src/assets/fonts/meslo-LG/MesloLGS-Regular.ttf",
+          },
+        ],
+
+        /**
+         * Defines the default `font-display` value used for the generated
+         * `@font-rule` classes.
+         */
+        display: "auto",
+
+        /**
+         * Using `<link rel="preload">` will trigger a request for the WebFont
+         * early in the critical rendering path, without having to wait for the
+         * CSSOM to be created.
+         */
+        preload: true,
+
+        /**
+         * Using `<link rel="prefetch">` is intended for prefetching resources
+         * that will be used in the next navigation/page load
+         * (e.g. when you go to the next page)
+         *
+         * Note: this can not be used with `preload`
+         */
+        prefetch: false,
+      },
+    }),
   ],
   build: {
     outDir: fileURLToPath(new URL("./templates/assets/dist", import.meta.url)),
     emptyOutDir: true,
+
     lib: {
       entry: path.resolve(__dirname, "src/main.ts"),
       name: "main",