feat: 更好的自定义字体配置

blog.config.js

@@ -5,7 +5,7 @@ const BLOG = {
   LINK: 'https://tangly1024.com', // 网站地址
   KEYWORDS: 'Notion, 博客', // 网站关键词 英文逗号隔开
   NOTION_PAGE_ID:
-  process.env.NOTION_PAGE_ID || '02ab3b8678004aa69e9e415905ef32a5', // Important page_id！！！Duplicate Template from  https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5
+    process.env.NOTION_PAGE_ID || '02ab3b8678004aa69e9e415905ef32a5', // Important page_id！！！Duplicate Template from  https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5
   NOTION_ACCESS_TOKEN: process.env.NOTION_ACCESS_TOKEN || '', // Useful if you prefer not to make your database public
   DEBUG: process.env.NEXT_PUBLIC_DEBUG || false, // 是否显示调试按钮
 
@@ -25,16 +25,18 @@ const BLOG = {
   BEI_AN: process.env.NEXT_PUBLIC_BEI_AN || '', // 备案号 闽ICP备XXXXXXX
   APPEARANCE: 'light', // ['light', 'dark', 'auto'], // light 日间模式 ， dark夜间模式， auto根据时间和主题自动夜间模式
 
-  // 字体相关
+  // 字体配置
-  FONT: 'font-sans', // 预设三种文章字体 ['font-sans', 'font-serif', 'font-mono'] @see /lib/font.js https://www.tailwindcss.cn/docs/font-family
+  CUSTOM_FONT: false, // 是否使用自定义字体
-  FONT_URL: 'https://fonts.font.im/css2?family=Noto+Serif+SC&display=swap', // 谷歌字体中国站镜像;对应的国际站地址：https://fonts.googleapis.com/css2?family=Noto+Serif+SC&display=swap
+  CUSTOM_FONT_URL: [], // 自定义字体的CSS
-  FONT_CUSTOM: ['-apple-system', 'BlinkMacSystemFont', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Segoe UI"', '"PingFang SC"', 'HarmonyOS_Regular', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"Helvetica Neue"', 'Helvetica', '"Source Han Sans SC"', '"Noto Sans CJK SC"', '"WenQuanYi Micro Hei"', 'Arial', 'sans-serif'],
+  CUSTOM_FONT_SANS: [], // 自定义无衬线字体
+  CUSTOM_FONT_SERIF: [], // 自定义衬线字体
 
-  // 自定义google字体示例： 请先将FONT 改为  'font-custom'， 并将FONT_URL改为你的字体地址，同时在FONT_CUSTOM中指定你的 fontfamily
+  // 自定义字体示例： 请先将 CUSTOM_FONT 改为 true， 并将 CUSTOM_FONT_URL 改为你的字体CSS地址，同时在 CUSTOM_FONT_SANS 与 CUSTOM_FONT_SERIF 中指定你的 fontfamily
   // 以下是示例：
-  // FONT: 'font-custom',
+  // CUSTOM_FONT: true, // 是否使用自定义字体
-  // FONT_URL: 'https://fonts.font.im/css2?family=Ma+Shan+Zheng&display=swap',
+  // CUSTOM_FONT_URL: ['https://cdn.jsdelivr.net/npm/lxgw-wenkai-screen-webfont@1.6.0/lxgwwenkaiscreen.css'], // 自定义字体的CSS
-  // FONT_CUSTOM_FAMILY: ['"Times New Roman"', '"Ma Shan Zheng"'],
+  // CUSTOM_FONT_SANS: ['LXGW WenKai Screen'], // 自定义无衬线字体
+  // CUSTOM_FONT_SERIF: ['LXGW WenKai Screen'], // 自定义衬线字体
 
   // 图标字体
   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

@@ -1,17 +0,0 @@
-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

lib/font.js

@@ -2,9 +2,10 @@
  * 在此处配置字体
  */
 const BLOG = require('../blog.config')
+
 // const { fontFamily } = require('tailwindcss/defaultTheme')
 
-function CJK () {
+function CJK() {
   switch (BLOG.LANG.toLowerCase()) {
     case 'zh-cn':
     case 'zh-sg':
@@ -32,12 +33,12 @@ const fontSerifCJK = !CJK()
   : [`"Noto Serif CJK ${CJK()}"`, `"Noto Serif ${CJK()}"`]
 
 const fontFamilies = {
-  sans: ['-apple-system', 'BlinkMacSystemFont', '"Apple Color Emoji"',
+  sans: [...(BLOG.CUSTOM_FONT ? BLOG.CUSTOM_FONT_SANS : []), '-apple-system', 'BlinkMacSystemFont', '"Apple Color Emoji"',
     '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Segoe UI"', '"PingFang SC"',
     'HarmonyOS_Regular', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"Helvetica Neue"',
     'Helvetica', '"Source Han Sans SC"', '"Noto Sans CJK SC"', '"WenQuanYi Micro Hei"',
     'Arial', 'sans-serif', ...fontSansCJK],
-  serif: ['STZhongsong', 'STSong', '"Noto Serif CJK"', '"Noto Serif SC"', 'PMingLiu',
+  serif: [...(BLOG.CUSTOM_FONT ? BLOG.CUSTOM_FONT_SERIF : []), 'STZhongsong', 'STSong', '"Noto Serif CJK"', '"Noto Serif SC"', 'PMingLiu',
     'SimSun', '"WenQuanYi Bitmap Song"', '"Times New Roman"', 'Times', 'serif',
     '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', ...fontSerifCJK],
   noEmoji: [
@@ -46,8 +47,7 @@ const fontFamilies = {
     '-apple-system',
     'BlinkMacSystemFont',
     'sans-serif'
-  ],
+  ]
-  custom: BLOG.FONT_CUSTOM_FAMILY
 }
 
 module.exports = fontFamilies

pages/_app.js

@@ -19,7 +19,6 @@ 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 })
@@ -34,7 +33,6 @@ 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 />}

pages/_document.js

@@ -4,25 +4,28 @@ import BLOG from '@/blog.config'
 import CommonScript from '@/components/CommonScript'
 
 class MyDocument extends Document {
-  static async getInitialProps (ctx) {
+  static async getInitialProps(ctx) {
     const initialProps = await Document.getInitialProps(ctx)
     return { ...initialProps }
   }
 
-  render () {
+  render() {
     return (
       <Html lang={BLOG.LANG} className='test'>
         <Head>
           <link rel='icon' href='/favicon.ico' />
           <link rel='icon' href='/favicon.svg' type='image/svg+xml' />
           {/* 谷歌字体镜像 */}
-          <link href={`${BLOG.FONT_URL}`} rel="stylesheet"/>
+          {BLOG.CUSTOM_FONT
+            ? <link href='https://fonts.font.im/css2?family=Noto+Serif+SC&display=swap' rel='stylesheet' />
+            : BLOG.CUSTOM_FONT_URL?.map(fontUrl =>
+              <link href={`${fontUrl}`} key={fontUrl} rel='stylesheet' />)}
           <CommonScript />
         </Head>
 
         <body className={`${BLOG.FONT} tracking-wider subpixel-antialiased bg-day dark:bg-night`}>
-          <Main />
+        <Main />
-          <NextScript />
+        <NextScript />
         </body>
       </Html>
     )