diff --git a/components/CommonHead.js b/components/CommonHead.js
index 5938dc6d..0f4e0555 100644
--- a/components/CommonHead.js
+++ b/components/CommonHead.js
@@ -44,11 +44,6 @@ const CommonHead = ({ meta, children }) => {
- { BLOG.CUSTOM_FONT
- ? BLOG.CUSTOM_FONT_URL?.map(fontUrl =>
- )
- : }
-
{JSON.parse(BLOG.ANALYTICS_BUSUANZI_ENABLE) && }
{meta?.type === 'Post' && (
<>
diff --git a/lib/font.js b/lib/font.js
index 05ba86ff..a2839cfb 100644
--- a/lib/font.js
+++ b/lib/font.js
@@ -33,13 +33,14 @@ const fontSerifCJK = !CJK()
: [`"Noto Serif CJK ${CJK()}"`, `"Noto Serif ${CJK()}"`]
const fontFamilies = {
- 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"',
+ sans: [...(BLOG.CUSTOM_FONT ? BLOG.CUSTOM_FONT_SANS : []),
+ '"PingFang SC"', '-apple-system', 'BlinkMacSystemFont', '"Hiragino Sans GB"',
+ '"Apple Color Emoji"', '"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', ...fontSansCJK],
- 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',
+ serif: [...(BLOG.CUSTOM_FONT ? BLOG.CUSTOM_FONT_SERIF : []),
+ '"Noto Serif SC"', 'SimSun', '"Times New Roman"', 'Times', 'serif',
'"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', ...fontSerifCJK],
noEmoji: [
'ui-sans-serif',
@@ -49,5 +50,4 @@ const fontFamilies = {
'sans-serif'
]
}
-
module.exports = { fontFamilies }
diff --git a/package.json b/package.json
index 7540f8ab..6a19941f 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,9 @@
"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",
diff --git a/pages/_app.js b/pages/_app.js
index 451296f2..07e3134b 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -12,13 +12,19 @@ import '@/styles/notion.css' // 重写部分样式
// 代码样式 更多样式参考: https://github.com/PrismJS/prism-themes
import 'prism-themes/themes/prism-material-light.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'
import { Fireworks } from '@/components/Fireworks'
-import { loadExternalResource } from '@/lib/utils'
const Ackee = dynamic(() => import('@/components/Ackee'), { ssr: false })
const Gtag = dynamic(() => import('@/components/Gtag'), { ssr: false })
@@ -40,16 +46,27 @@ const MyApp = ({ Component, pageProps }) => {
{JSON.parse(BLOG.ANALYTICS_BUSUANZI_ENABLE) && }
{BLOG.ADSENSE_GOOGLE_ID && }
{BLOG.FACEBOOK_APP_ID && BLOG.FACEBOOK_PAGE_ID && }
- {JSON.parse(BLOG.FIREWORKS) && }
+ {JSON.parse(BLOG.FIREWORKS) && }
>
+ // 默认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
+
// 延迟加载fontAwesome
React.useEffect(() => {
- loadExternalResource(BLOG.FONT_AWESOME_PATH, 'css')
+ // loadExternalResource(BLOG.FONT_AWESOME_PATH, 'css')
}, [])
return (
+ {/* 渲染所有字体 */}
+ {FONTS_URL?.map(fontUrl => )}
{externalPlugins}