slice font

1 year ago · 18f1740abc
parent f5519cf0f2
commit 18f1740abc
6 changed files with 66 additions and 10 deletions
--- a/index.html
+++ b/index.html
@ -4,6 +4,8 @@
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" type="text/css" href="/RoGSans/font.css"/>
+    <link rel="stylesheet" type="text/css" href="/GlowSans/font.css"/>
    <title>blue archive</title>
  </head>
  <body>
--- a/script/remove-dot.js
+++ 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();
--- a/script/slice-font.js
+++ 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'),
+});
--- 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);
--- 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();
--- 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
  );
 };