Fix PWA icons and mobile reading overflow

Generate PNG icons from favicon.svg at build time so manifest icons resolve, replace legacy font tags with div wrappers, and tighten mobile layout so long text wraps instead of clipping.

Co-authored-by: Cursor <cursoragent@cursor.com>

scripts/generate-icons.mjs

@@ -7,14 +7,22 @@ import toIco from 'to-ico'
 const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..')
 const siteDir = path.join(root, 'assets', 'site')
 const sourcePng = path.join(siteDir, 'apple-touch-icon.png')
+const sourceSvg = path.join(siteDir, 'favicon.svg')
 
-if (!fs.existsSync(sourcePng)) {
-  console.warn('[generate-icons] 跳过：未找到 apple-touch-icon.png')
+function resolveSource() {
+  if (fs.existsSync(sourcePng)) return sourcePng
+  if (fs.existsSync(sourceSvg)) return sourceSvg
+  return null
+}
+
+const source = resolveSource()
+if (!source) {
+  console.warn('[generate-icons] 跳过：未找到 apple-touch-icon.png 或 favicon.svg')
   process.exit(0)
 }
 
 async function resizePng(size) {
-  return sharp(sourcePng).resize(size, size).png().toBuffer()
+  return sharp(source, { density: 300 }).resize(size, size).png().toBuffer()
 }
 
 const icoSizes = [16, 32, 48, 64, 128, 256]
@@ -26,4 +34,4 @@ fs.writeFileSync(path.join(siteDir, 'icon-192.png'), await resizePng(192))
 fs.writeFileSync(path.join(siteDir, 'icon-512.png'), await resizePng(512))
 fs.writeFileSync(path.join(siteDir, 'favicon.png'), await resizePng(512))
 
-console.log('[generate-icons] 已生成 favicon.ico、icon-192.png、icon-512.png')
+console.log(`[generate-icons] 已从 ${path.basename(source)} 生成 favicon.ico、icon-192.png、icon-512.png`)