修复字体问题

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

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

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 />}