quart v4博客社媒OG图字体乱码问题踩坑

发现问题：由于原作者都默认博客使用英文内容，配置字体时并无考虑中文字体情况，故直接生成OG图会导致乱码情况：

从源码对于从描述 题目生成svg图的函数并无问题

Head.tsx

 
// quartz/components/Head.tsx
/**
 
* Generates social image (OG/twitter standard) and saves it as `.webp` inside the public folder
 
* @param opts options for generating image
 
*/
 
async function generateSocialImage(
 
{ cfg, description, fileName, fontsPromise, title, fileData }: ImageOptions,
 
userOpts: SocialImageOptions,
 
imageDir: string,
 
) {
 
	const fonts = await fontsPromise
	
	const { width, height } = userOpts
	
	  
	
	// JSX that will be used to generate satori svg
	
	const imageComponent = userOpts.imageStructure(cfg, userOpts, title, description, fonts, fileData)
	
	  
	
	const svg = await satori(imageComponent, { width, height, fonts })
	
	  
	
	// Convert svg directly to webp (with additional compression)
	
	const compressed = await sharp(Buffer.from(svg)).webp({ quality: 40 }).toBuffer()
	
	  
	
	// Write to file system
	
	const filePath = joinSegments(imageDir, `${fileName}.${extension}`)
	
	fs.writeFileSync(filePath, compressed)
 
}
 

quartz.config.ts

 
//quartz.config.ts
const config: QuartzConfig = {
	configuration:{
		...
		typography: {
		
		header: "'Schibsted Grotesk', 'Noto Sans TC', sans-serif",
		
		body: "'Source Sans Pro', 'Noto Sans TC', sans-serif",
		
		code: "IBM Plex Mono",
		
		},
		...
	}
 
}