feat: 中文字体优先采用 woff2格式以减小尺寸，增加字体转换脚本并自动写入 scss 文件变量中

package.json

@@ -6,7 +6,8 @@
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "test:unit": "vue-cli-service test:unit",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "build:fonts": "node scripts/build-fonts"
   },
   "dependencies": {
     "@icon-park/vue-next": "^1.4.0",
@@ -74,6 +75,7 @@
     "stylelint": "^13.8.0",
     "stylelint-config-standard": "^20.0.0",
     "stylelint-webpack-plugin": "^2.1.1",
+    "ttf2woff2": "^4.0.5",
     "typescript": "^4.4.4"
   },
   "husky": {

scripts/build-fonts.js

@@ -0,0 +1,59 @@
+const fs = require('fs')
+const ttf2woff2 = require('ttf2woff2')
+const path = require('path')
+const assetsPath = path.join(__dirname, '../src/assets')
+const scssVariablePath = path.join(assetsPath, 'styles/variable.scss')
+const fontsPath = path.join(assetsPath, 'fonts')
+const scssFontListVar = '$font-list'
+
+// scss 文件中 $font-list 变量替换
+const replaceSCSSFile = (names) => {
+  fs.readFile(scssVariablePath, 'utf-8', (errs, content) => {
+    if (errs) {
+      console.error(errs)
+      process.exit(1)
+    }
+    const reg = new RegExp(`(\\${scssFontListVar}:\\s*)(.*)(;.*)`, 'g')
+    const newContent = content.replace(reg, `$1${names}$3`)
+    fs.writeFile(scssVariablePath, newContent, (errs) => {
+      if (errs) {
+        console.error(errs)
+        process.exit(1)
+      }
+      console.log('替换 SCSS 字体列表成功！')
+    })
+  })
+}
+
+// ttf 转 woff2
+fs.readdir(fontsPath, { withFileTypes: true }, (errs, files) => {
+  if (errs) {
+    console.error(errs)
+    process.exit(1)
+  }
+  const fontList = []
+  files
+    .filter(({ name }) => name.endsWith('.ttf'))
+    .forEach(({ name }) => {
+      console.log(`${name} 正在转换为 woff2 格式...`)
+      const woff2FontExists = files.find((item) => item.name.endsWith('.woff2'))
+      const replacedName = name.replace('.ttf', '.woff2')
+      fontList.push(name.replace('.ttf', ''))
+      if (woff2FontExists) {
+        console.log(`${replacedName} 已存在，不再转换`)
+        return
+      }
+
+      const input = fs.readFileSync(path.join(fontsPath, name))
+      fs.writeFileSync(
+        path.join(fontsPath, replacedName),
+        ttf2woff2(input)
+      )
+      console.log(`${name} 转换 woff2 成功！`)
+    })
+  const names = fontList.reduce((result, name, i) => {
+    if (i === 0) return `'${name}'`
+    return `${result}, '${name}'`
+  }, '')
+  replaceSCSSFile(names)
+})

src/assets/styles/font.scss

@@ -1,40 +1,7 @@
+@each $font in $font-list {
   @font-face {
-  font-family: '仓耳小丸子';
+    font-display: swap;
-  src: url(../fonts/仓耳小丸子.ttf);
+    font-family: $font;
+    src: url('../fonts/#{$font}.woff2') format('woff2'), url('../fonts/#{$font}.ttf') format('truetype');
   }
-@font-face {
-  font-family: '优设标题黑';
-  src: url(../fonts/优设标题黑.ttf);
-}
-@font-face {
-  font-family: '峰广明锐体';
-  src: url(../fonts/峰广明锐体.ttf);
-}
-@font-face {
-  font-family: '摄图摩登小方体';
-  src: url(../fonts/摄图摩登小方体.ttf);
-}
-@font-face {
-  font-family: '站酷快乐体';
-  src: url(../fonts/站酷快乐体.ttf);
-}
-@font-face {
-  font-family: '字制区喜脉体';
-  src: url(../fonts/字制区喜脉体.ttf);
-}
-@font-face {
-  font-family: '素材集市康康体';
-  src: url(../fonts/素材集市康康体.ttf);
-}
-@font-face {
-  font-family: '素材集市酷方体';
-  src: url(../fonts/素材集市酷方体.ttf);
-}
-@font-face {
-  font-family: '途牛类圆体';
-  src: url(../fonts/途牛类圆体.ttf);
-}
-@font-face {
-  font-family: '锐字真言体';
-  src: url(../fonts/锐字真言体.ttf);
 }

src/assets/styles/variable.scss

@@ -11,3 +11,4 @@ $transitionDelayFast: .1s;
 $transitionDelaySlow: .3s;
 
 $borderRadius: 2px;
+$font-list: '仓耳小丸子', '优设标题黑', '字制区喜脉体', '峰广明锐体', '摄图摩登小方体', '站酷快乐体', '素材集市康康体', '素材集市酷方体', '途牛类圆体', '锐字真言体';