diff --git a/index.html b/index.html index 3992e2a..d8553e5 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,8 @@ + + blue archive diff --git a/script/remove-dot.js b/script/remove-dot.js new file mode 100644 index 0000000..07c56d9 --- /dev/null +++ b/script/remove-dot.js @@ -0,0 +1,39 @@ +import { Font } from 'fonteditor-core'; +import Fontmin from 'fontmin'; +import fs from 'fs'; + +const buffer = fs.readFileSync('../public/RoGSanSrfStd-Bd.otf'); +const fontPre = Font.create(buffer, { + type: 'otf', +}); +const fontObject = fontPre.get(); +const codeList = Object.keys(fontObject.cmap) + .filter((n) => n >= parseInt('0x4E00') && n < parseInt('0xA000')) + .map((n) => parseInt(n)); +const font = Font.create(buffer, { + type: 'otf', + subset: codeList, +}); +const result = font + .find({ + filter: (glyf) => + !(glyf.xMin === 408 && glyf.xMax === 592 && glyf.yMin === 452 && glyf.yMax === 636), + }) + .reduce((p, c) => { + if (!c.unicode) { + return p; + } + for (const u of c.unicode) { + p.push(u); + } + return p; + }, []); +const fontmin = new Fontmin() + .src('../public/RoGSanSrfStd-Bd.otf') + .use(Fontmin.otf2ttf()) + .use( + Fontmin.glyph({ text: result.reduce((p, c) => p + String.fromCharCode(c), ''), hinting: false }) + ) + .use(Fontmin.ttf2woff2()) + .dest('../public/RoGSS-B_CJK') + .run(); diff --git a/script/slice-font.js b/script/slice-font.js new file mode 100644 index 0000000..3dafe2f --- /dev/null +++ b/script/slice-font.js @@ -0,0 +1,7 @@ +import { resolve } from 'path'; +import createFontSlice from 'font-slice'; + +createFontSlice({ + fontPath: resolve('../public/GlowSansSC-Normal-Heavy.otf'), + outputDir: resolve('../public/GlowSans'), +}); diff --git a/src/canvas.ts b/src/canvas.ts index 6d7f8b6..4e1cb49 100644 --- a/src/canvas.ts +++ b/src/canvas.ts @@ -1,7 +1,9 @@ import debounce from 'lodash-es/debounce'; import settings from './settings'; +import loadFont from './utils/loadFont'; const { canvasHeight, canvasWidth, fontSize, horizontalTilt, textPosition, graphOffset, paddingX } = settings; +const font = `${fontSize}px RoGSanSrfStd-Bd, GlowSansSC-Normal-Heavy, apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif`; export default class LogoCanvas { public canvas: HTMLCanvasElement; private ctx: CanvasRenderingContext2D; @@ -17,10 +19,11 @@ export default class LogoCanvas { this.canvas.height = canvasHeight; this.canvas.width = canvasWidth; } - draw() { + async draw() { const c = this.ctx; //predict canvas width - c.font = `${fontSize}px G2B, GSH`; + await loadFont(this.textL + this.textR); + c.font = font; this.textMetricsL = c.measureText(this.textL); this.textMetricsR = c.measureText(this.textR); this.setWidth(); @@ -46,7 +49,7 @@ export default class LogoCanvas { c.stroke(); } //blue text -> halo -> black text -> cross - c.font = `${fontSize}px G2B, GSH`; + c.font = font; c.fillStyle = '#128AFA'; c.textAlign = 'end'; c.setTransform(1, 0, horizontalTilt, 1, 0, 0); diff --git a/src/main.ts b/src/main.ts index 2debc72..53ce570 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,10 +1,9 @@ import './style.css'; import LogoCanvas from './canvas'; -import loadFont from './utils/loadFont'; import loadImages from './utils/loadImages'; (async function () { - await loadFont(); + // await loadFont(); await loadImages(); const logo = new LogoCanvas(); logo.bindEvent(); diff --git a/src/utils/loadFont.ts b/src/utils/loadFont.ts index 984926f..47ab610 100644 --- a/src/utils/loadFont.ts +++ b/src/utils/loadFont.ts @@ -1,7 +1,13 @@ -export default async () => { - const G2B = new FontFace('G2B', 'url(../RoGSanSrfStd-Bd.otf)'); - const GSH = new FontFace('GSH', 'url(../GlowSansSC-Normal-Heavy.otf)'); - await Promise.all([G2B.load(), GSH.load()]).then((fonts) => - fonts.map((font) => document.fonts.add(font)) +import settings from '../settings'; + +export default async (content: string = 'A') => { + // const G2B = new FontFace('G2B', 'url(../RoGSanSrfStd-Bd_other.woff2)'); + // // const GSH = new FontFace('GSH', 'url(../GlowSansSC-Normal-Heavy.otf)'); + // await Promise.all([G2B.load() /*, GSH.load()*/]).then((fonts) => + // fonts.map((font) => document.fonts.add(font)) + // ); + await document.fonts.load( + `${settings.fontSize}px RoGSanSrfStd-Bd, GlowSansSC-Normal-Heavy`, + content ); };