字体相关调整

blog.config.js

@@ -22,14 +22,21 @@ const BLOG = {
   CONTACT_TELEGRAM: 'https://t.me/tangly_1024', // 你的telegram 地址 例如 https://t.me/tangly_1024
   CONTACT_LINKEDIN: '', // 你的linkedIn 首页
 
-  // 网站默认使用PingFangSC及NotoSansSC
-  FONT_STYLE: 'font-serif', // ['font-serif','font-sans'] 两种可选，分别是衬线和无衬线: 参考 https://www.jianshu.com/p/55e410bd2115
-  // 如需自定义字体，请将CUSTOM_FONT改为 true，并将CUSTOM_FONT_URL改为你的字体CSS地址，同时在CUSTOM_FONT_SANS与CUSTOM_FONT_SERIF中指定你的font-family
-  CUSTOM_FONT: process.env.NEXT_PUBLIC_CUSTOM_FONT || false, // 是否使用自定义字体
-  // 自定义字体示例： 请先将 CUSTOM_FONT 改为 true， 并将 CUSTOM_FONT_URL 改为你的字体CSS地址，同时在 CUSTOM_FONT_SANS 与 CUSTOM_FONT_SERIF 中指定你的 fontfamily
-  CUSTOM_FONT_URL: ['https://npm.elemecdn.com/[email protected]/style.css'], // 自定义字体的CSS
-  CUSTOM_FONT_SANS: ['LXGW WenKai'], // 自定义无衬线字体
-  CUSTOM_FONT_SERIF: ['LXGW WenKai'], // 自定义衬线字体
+  // 网站字体
+  FONT_STYLE: process.env.NEXT_PUBLIC_FONT_STYLE || 'font-serif', // ['font-serif','font-sans'] 两种可选，分别是衬线和无衬线: 参考 https://www.jianshu.com/p/55e410bd2115
+  FONT_URL: [// 字体CSS 例如 https://npm.elemecdn.com/[email protected]/style.css
+    'https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@500&display=swap',
+    'https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@500&display=swap'
+  ],
+  FONT_SANS: [// 无衬线字体 例如'LXGW WenKai'
+    '"PingFang SC"', '-apple-system', 'BlinkMacSystemFont', '"Hiragino Sans GB"',
+    '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Segoe UI"', '"Noto Sans SC"', 'HarmonyOS_Regular',
+    '"Microsoft YaHei"', '"Helvetica Neue"', 'Helvetica', '"Source Han Sans SC"',
+    'Arial', 'sans-serif', '"Apple Color Emoji"'],
+  FONT_SERIF: [// 衬线字体 例如'LXGW WenKai'
+    '"Noto Serif SC"', 'SimSun', '"Times New Roman"', 'Times', 'serif',
+    '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Apple Color Emoji"'],
+  FONT_AWESOME: '/css/all.min.css', // font-awesome 字体图标地址
 
   // 自定义外部脚本，外部样式
   CUSTOM_EXTERNAL_JS: [''], // e.g. ['http://xx.com/script.js','http://xx.com/script.js']

components/ExternalScript.js

@@ -19,8 +19,14 @@ const ExternalScript = () => {
       }
     }
     // 静态导入本地自定义样式
+    loadExternalResource('/css/all.min.css', 'css')
     loadExternalResource('/css/custom.css', 'css')
     loadExternalResource('/js/custom.js', 'js')
+
+    // 渲染所有字体
+    BLOG.FONT_URL?.forEach(e => {
+      loadExternalResource(e, 'css')
+    })
   }, [])
   return null
 }

components/NotionPage.js

@@ -80,7 +80,7 @@ const NotionPage = ({ post }) => {
     return <>{post?.summary || ''}</>
   }
 
-  return <div id='container' className='max-w-5xl overflow-x-visible mx-auto'>
+  return <div id='container' className='max-w-5xl font-medium mx-auto'>
     <NotionRenderer
       recordMap={post.blockMap}
       mapPageUrl={mapPageUrl}

lib/font.js

@@ -33,16 +33,8 @@ const fontSerifCJK = !CJK()
   : [`"Noto Serif CJK ${CJK()}"`, `"Noto Serif ${CJK()}"`]
 
 const fontFamilies = {
-  sans: [...(BLOG.CUSTOM_FONT ? BLOG.CUSTOM_FONT_SANS : []),
-    '"PingFang SC"', '-apple-system', 'BlinkMacSystemFont', '"Hiragino Sans GB"',
-    '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Segoe UI"', '"Noto Sans SC"', 'HarmonyOS_Regular',
-    '"Microsoft YaHei"', '"Helvetica Neue"', 'Helvetica', '"Source Han Sans SC"',
-    'Arial', 'sans-serif', '"Apple Color Emoji"',
-    ...fontSansCJK],
-  serif: [...(BLOG.CUSTOM_FONT ? BLOG.CUSTOM_FONT_SERIF : []),
-    '"Noto Serif SC"', 'SimSun', '"Times New Roman"', 'Times', 'serif',
-    '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Apple Color Emoji"',
-    ...fontSerifCJK],
+  sans: [...BLOG.FONT_SANS, ...fontSansCJK],
+  serif: [...BLOG.FONT_SERIF, ...fontSerifCJK],
   noEmoji: [
     'ui-sans-serif',
     'system-ui',

lib/utils.js

@@ -7,13 +7,19 @@
  * @returns {Promise<unknown>}
  */
 export function loadExternalResource(url, type) {
+  console.log('加载', url, type)
   return new Promise((resolve, reject) => {
     let tag
 
     if (type === 'css') {
       tag = document.createElement('link')
       tag.rel = 'stylesheet'
       tag.href = url
+    } else if (type === 'font') {
+      tag = document.createElement('link')
+      tag.rel = 'preload'
+      tag.as = 'font'
+      tag.href = url
     } else if (type === 'js') {
       tag = document.createElement('script')
       tag.src = url

package.json

@@ -20,9 +20,6 @@
     "bundle-report": "ANALYZE=true yarn build"
   },
   "dependencies": {
-    "@fontsource/noto-sans-sc": "^4.5.12",
-    "@fontsource/noto-serif-sc": "^4.5.11",
-    "@fortawesome/fontawesome-free": "^6.2.1",
     "@giscus/react": "^1.1.2",
     "@next/bundle-analyzer": "^12.1.1",
     "@popperjs/core": "^2.9.3",

pages/_app.js

@@ -9,15 +9,6 @@ import '@/styles/globals.css'
 import 'react-notion-x/src/styles.css'
 import '@/styles/notion.css' //  重写部分样式
 
-// local webfont @see https://fontsource.org/
-import '@fontsource/noto-sans-sc'
-import '@fontsource/noto-serif-sc'
-
-// local fontawesome 6.2.1 @see https://www.npmjs.com/package/@fortawesome/fontawesome-free
-import '@fortawesome/fontawesome-free/css/all.min.css'
-
-// import '@/styles/prism-mac-style.css' // code 左上角显示mac的红黄绿图标
-
 import { GlobalContextProvider } from '@/lib/global'
 import { DebugPanel } from '@/components/DebugPanel'
 import { ThemeSwitch } from '@/components/ThemeSwitch'
@@ -29,8 +20,9 @@ import { Sakura } from '@/components/Sakura'
 import { StarrySky } from '@/components/StarrySky'
 import MusicPlayer from '@/components/MusicPlayer'
 import ExternalScript from '@/components/ExternalScript'
-import AOS from 'aos'
 import { isBrowser } from '@/lib/utils'
+
+import AOS from 'aos'
 import 'aos/dist/aos.css' // You can also use <link> for styles
 
 const Ackee = dynamic(() => import('@/components/Ackee'), { ssr: false })
@@ -63,23 +55,12 @@ const MyApp = ({ Component, pageProps }) => {
         <ExternalScript/>
     </>
 
-  // 默认Webfont:  请在font.js文件中检查font-family 新版改从npm本地导入；
-  const DEFAULT_FONTS_URL = [
-    // 'https://fonts.font.im/css2?family=Noto+Sans+SC&display=optional',
-    // 'https://fonts.font.im/css2?family=Noto+Serif+SC&display=optional'
-  ]
-
-  // 用户指定CUSTOM_FONT 则取CUSTOM_FONT_URL
-  const FONTS_URL = BLOG.CUSTOM_FONT ? BLOG.CUSTOM_FONT_URL : DEFAULT_FONTS_URL
-
   if (isBrowser()) {
     AOS.init()
   }
 
   return (
         <GlobalContextProvider>
-            {/* 渲染所有字体 */}
-            {FONTS_URL?.map(fontUrl => <link href={`${fontUrl}`} key={fontUrl} rel="stylesheet" />)}
             {externalPlugins}
             <Component {...pageProps} />
         </GlobalContextProvider>

public/css/prism-mac-style.css

@@ -1,5 +1,6 @@
 /**
  * @author https://github.com/txs
+ * 当配置文件 CODE_MAC_BAR 开启时，此样式会被动态引入，将开启代码组件左上角的mac图标
  **/
 .code-toolbar {
   position: relative;