From 1ac147333dc1ec4b2e5fb56b0100360a5445d3a1 Mon Sep 17 00:00:00 2001
From: tangly <tlyong1992@hotmail.com>
Date: Thu, 20 Oct 2022 12:39:50 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=AD=97=E4=BD=93=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 blog.config.js                      |  2 +-
 components/TailwindCustomCssInit.js | 17 +++++++++++++++++
 pages/_app.js                       |  2 ++
 3 files changed, 20 insertions(+), 1 deletion(-)
 create mode 100644 components/TailwindCustomCssInit.js

diff --git a/blog.config.js b/blog.config.js
index 3b0f3184..53e784af 100644
--- a/blog.config.js
+++ b/blog.config.js
@@ -34,7 +34,7 @@ const BLOG = {
   // 以下是示例：
   // FONT: 'font-custom',
   // FONT_URL: 'https://fonts.font.im/css2?family=Ma+Shan+Zheng&display=swap',
-  // FONT_CUSTOM_FAMILY: ['"Times New Roman"', 'Ma Shan Zheng'],
+  // FONT_CUSTOM_FAMILY: ['"Times New Roman"', '"Ma Shan Zheng"'],
 
   // 图标字体
   FONT_AWESOME_PATH: 'https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.4/css/all.min.css', // 图标库CDN ，国内推荐BootCDN，国外推荐 CloudFlare https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css
diff --git a/components/TailwindCustomCssInit.js b/components/TailwindCustomCssInit.js
new file mode 100644
index 00000000..44a51e43
--- /dev/null
+++ b/components/TailwindCustomCssInit.js
@@ -0,0 +1,17 @@
+import React from 'react'
+
+/**
+ * TailwindCss中自定义扩展了font-custom 这个扩展fontFamily，但页面中没有实际用到，会导致编译时被忽略。
+ * 为了确保blog.config.js中配置使用 font-custom字体能生效，在此写入一个font-custom样式，页面中无实际作用，用effect勾子删除即可
+ * @returns
+ */
+const TailwindCustomCssInit = () => {
+  const cssInitRef = React.useRef(null)
+
+  React.useEffect(() => {
+    cssInitRef?.current?.remove()
+  })
+  return <div ref={cssInitRef} className='font-custom'></div>
+}
+
+export default TailwindCustomCssInit
diff --git a/pages/_app.js b/pages/_app.js
index e4205758..acffbcb9 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -19,6 +19,7 @@ import { GlobalContextProvider } from '@/lib/global'
 import { DebugPanel } from '@/components/DebugPanel'
 import { ThemeSwitch } from '@/components/ThemeSwitch'
 import { Fireworks } from '@/components/Fireworks'
+import TailwindCustomCssInit from '@/components/TailwindCustomCssInit'
 
 const Ackee = dynamic(() => import('@/components/Ackee'), { ssr: false })
 const Gtag = dynamic(() => import('@/components/Gtag'), { ssr: false })
@@ -33,6 +34,7 @@ const Messenger = dynamic(() => import('@/components/FacebookMessenger'), {
 const MyApp = ({ Component, pageProps }) => {
   // 外部插件
   const externalPlugins = <>
+        <TailwindCustomCssInit/>
         {JSON.parse(BLOG.THEME_SWITCH) && <ThemeSwitch />}
         {JSON.parse(BLOG.DEBUG) && <DebugPanel />}
         {BLOG.ANALYTICS_ACKEE_TRACKER && <Ackee />}