diff --git a/package.json b/package.json index 684d33be..b89edb15 100644 --- a/package.json +++ b/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": { diff --git a/scripts/build-fonts.js b/scripts/build-fonts.js new file mode 100644 index 00000000..6e5909a4 --- /dev/null +++ b/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) +}) diff --git a/src/assets/fonts/仓耳小丸子.woff2 b/src/assets/fonts/仓耳小丸子.woff2 new file mode 100644 index 00000000..3f7c1202 Binary files /dev/null and b/src/assets/fonts/仓耳小丸子.woff2 differ diff --git a/src/assets/fonts/优设标题黑.woff2 b/src/assets/fonts/优设标题黑.woff2 new file mode 100644 index 00000000..0b9783e4 Binary files /dev/null and b/src/assets/fonts/优设标题黑.woff2 differ diff --git a/src/assets/fonts/字制区喜脉体.woff2 b/src/assets/fonts/字制区喜脉体.woff2 new file mode 100644 index 00000000..b7d28fb2 Binary files /dev/null and b/src/assets/fonts/字制区喜脉体.woff2 differ diff --git a/src/assets/fonts/峰广明锐体.woff2 b/src/assets/fonts/峰广明锐体.woff2 new file mode 100644 index 00000000..3b967a9b Binary files /dev/null and b/src/assets/fonts/峰广明锐体.woff2 differ diff --git a/src/assets/fonts/摄图摩登小方体.woff2 b/src/assets/fonts/摄图摩登小方体.woff2 new file mode 100644 index 00000000..f2d76335 Binary files /dev/null and b/src/assets/fonts/摄图摩登小方体.woff2 differ diff --git a/src/assets/fonts/站酷快乐体.woff2 b/src/assets/fonts/站酷快乐体.woff2 new file mode 100644 index 00000000..444aa1cc Binary files /dev/null and b/src/assets/fonts/站酷快乐体.woff2 differ diff --git a/src/assets/fonts/素材集市康康体.woff2 b/src/assets/fonts/素材集市康康体.woff2 new file mode 100644 index 00000000..097609ea Binary files /dev/null and b/src/assets/fonts/素材集市康康体.woff2 differ diff --git a/src/assets/fonts/素材集市酷方体.woff2 b/src/assets/fonts/素材集市酷方体.woff2 new file mode 100644 index 00000000..c9ebffbc Binary files /dev/null and b/src/assets/fonts/素材集市酷方体.woff2 differ diff --git a/src/assets/fonts/途牛类圆体.woff2 b/src/assets/fonts/途牛类圆体.woff2 new file mode 100644 index 00000000..cf369ef8 Binary files /dev/null and b/src/assets/fonts/途牛类圆体.woff2 differ diff --git a/src/assets/fonts/锐字真言体.woff2 b/src/assets/fonts/锐字真言体.woff2 new file mode 100644 index 00000000..d047ff2c Binary files /dev/null and b/src/assets/fonts/锐字真言体.woff2 differ diff --git a/src/assets/styles/font.scss b/src/assets/styles/font.scss index cc57982f..d1a9dae6 100644 --- a/src/assets/styles/font.scss +++ b/src/assets/styles/font.scss @@ -1,40 +1,7 @@ -@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); -} -@font-face { - font-family: '锐字真言体'; - src: url(../fonts/锐字真言体.ttf); +@each $font in $font-list { + @font-face { + font-display: swap; + font-family: $font; + src: url('../fonts/#{$font}.woff2') format('woff2'), url('../fonts/#{$font}.ttf') format('truetype'); + } } \ No newline at end of file diff --git a/src/assets/styles/variable.scss b/src/assets/styles/variable.scss index ff714dbb..258b74de 100644 --- a/src/assets/styles/variable.scss +++ b/src/assets/styles/variable.scss @@ -10,4 +10,5 @@ $transitionDelay: .2s; $transitionDelayFast: .1s; $transitionDelaySlow: .3s; -$borderRadius: 2px; \ No newline at end of file +$borderRadius: 2px; +$font-list: '仓耳小丸子', '优设标题黑', '字制区喜脉体', '峰广明锐体', '摄图摩登小方体', '站酷快乐体', '素材集市康康体', '素材集市酷方体', '途牛类圆体', '锐字真言体'; \ No newline at end of file