async css-font

This commit is contained in:
tangly1024
2022-12-15 18:12:57 +08:00
parent 9f44833a68
commit 6969f6289e
3 changed files with 17 additions and 7 deletions

View File

@@ -50,4 +50,4 @@ const fontFamilies = {
]
}
module.exports = fontFamilies
module.exports = { fontFamilies }

View File

@@ -23,6 +23,8 @@ import { GlobalContextProvider } from '@/lib/global'
import { DebugPanel } from '@/components/DebugPanel'
import { ThemeSwitch } from '@/components/ThemeSwitch'
import { Fireworks } from '@/components/Fireworks'
import React from 'react'
import { loadExternalResource } from '@/lib/utils'
const Ackee = dynamic(() => import('@/components/Ackee'), { ssr: false })
const Gtag = dynamic(() => import('@/components/Gtag'), { ssr: false })
@@ -47,14 +49,26 @@ const MyApp = ({ Component, pageProps }) => {
{JSON.parse(BLOG.FIREWORKS) && <Fireworks/>}
</>
// 延迟加载字体
React.useEffect(() => {
loadFont()
}, [])
return (
<GlobalContextProvider>
{/* FontawesomeCDN */}
<link rel="stylesheet" href={BLOG.FONT_AWESOME_PATH} referrerPolicy="no-referrer" />
{externalPlugins}
<Component {...pageProps} />
</GlobalContextProvider>
)
}
/**
* 延迟加载字体
*/
const loadFont = () => {
loadExternalResource(BLOG.FONT_AWESOME_PATH, 'css')
for (const fontUrl of BLOG.CUSTOM_FONT_URL) {
loadExternalResource(fontUrl, 'css')
}
}
export default MyApp

View File

@@ -15,10 +15,6 @@ class MyDocument extends Document {
<Head>
<link rel='icon' href='/favicon.ico' />
<link rel='icon' href='/favicon.svg' type='image/svg+xml' />
{ BLOG.CUSTOM_FONT
? BLOG.CUSTOM_FONT_URL?.map(fontUrl =>
<link href={`${fontUrl}`} key={fontUrl} rel='stylesheet' />)
: <link href='https://fonts.font.im/css2?family=Noto+Serif+SC&display=swap' rel='stylesheet' /> }
<CommonScript />
</Head>