init

.gitignore

@@ -0,0 +1,29 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+llrt*
+font/*
+
+dist_backend

README.md

@@ -0,0 +1,28 @@
+## Usage
+
+```bash
+$ npm install # or pnpm install or yarn install
+```
+
+### Learn more on the [Solid Website](https://solidjs.com) and come chat with us on our [Discord](https://discord.com/invite/solidjs)
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm run dev`
+
+Runs the app in the development mode.<br>
+Open [http://localhost:5173](http://localhost:5173) to view it in the browser.
+
+### `npm run build`
+
+Builds the app for production to the `dist` folder.<br>
+It correctly bundles Solid in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br>
+Your app is ready to be deployed!
+
+## Deployment
+
+Learn more about deploying your application with the [documentations](https://vitejs.dev/guide/static-deploy.html)

backend/app.ts

@@ -0,0 +1,119 @@
+import * as path from "path";
+import fs from "fs/promises";
+import type { cMiddleware } from "./server/req_res";
+import { mimeTypes } from "./server/mime_type";
+import { cRouter, SimpleHttpServer } from "./server/server";
+import { fontSubset } from "./font_util/font";
+import { readFile, writeFile } from "fs/promises";
+const ROOT_DIR = path.resolve("dist"); // 静态文件目录
+const staticFileMiddleware: cMiddleware = async function (req, res, next) {
+  if (req.method === "GET") {
+    const filePath = path.join(ROOT_DIR, req.url === "/" ? "index.html" : req.url);
+
+    try {
+      const stats = await fs.stat(filePath);
+
+      if (stats.isFile()) {
+        const fileContent = await fs.readFile(filePath);
+        const extname = path.extname(filePath);
+        res.statusCode = 200;
+        res.headers["Content-Type"] = mimeTypes[extname] || "application/octet-stream";
+        res.headers["Content-Length"] = `${stats.size}`;
+        res.body = fileContent;
+      } else {
+        // 文件不存在
+        res.statusCode = 404;
+        res.headers["Content-Type"] = "text/plain";
+        res.body = "404 Not Found";
+      }
+    } catch (err) {
+      // 错误处理
+      res.statusCode = 404;
+      res.headers["Content-Type"] = "text/plain";
+      res.body = `404 Not Found`;
+    }
+  } else {
+    // 返回 405 Method Not Allowed
+    res.statusCode = 405;
+    res.headers["Content-Type"] = "text/plain";
+    res.body = "Method Not Allowed";
+  }
+  return next(req, res);
+};
+const logMiddleware: cMiddleware = async (req, res, next) => {
+  const t1 = Date.now();
+  const r = await next(req, res);
+  const t2 = Date.now();
+  console.log(`[${t2 - t1}ms] ${req.url}`);
+  return r;
+};
+const corsMiddleware: cMiddleware = async (req, res, next) => {
+  // 允许所有域跨域请求
+  res.headers["Access-Control-Allow-Origin"] = "*";
+  // 如果你只想允许特定域名：
+  // res.headers["Access-Control-Allow-Origin"] = "https://example.com";
+  // 允许常见的 HTTP 方法
+  res.headers["Access-Control-Allow-Methods"] = "GET, POST, PUT, DELETE, OPTIONS";
+  // 允许的请求头
+  res.headers["Access-Control-Allow-Headers"] = "Content-Type, Authorization";
+
+  // 如果是 OPTIONS 请求（预检请求），直接返回成功响应
+  if (req.method === "OPTIONS") {
+    res.statusCode = 204;
+    res.headers["Content-Length"] = "0";
+    res.body = "";
+    // 直接结束请求，不继续传递到下一个中间件
+    return { req, res };
+  } else {
+    return next(req, res);
+  }
+};
+const fontCache: { [key: string]: any } = {};
+const ttfCache: { [key: string]: any } = {};
+const fontApiMiddleware: cMiddleware = async (req, res, next) => {
+  if (!req.url.startsWith("/api")) return next(req, res);
+  res.statusCode = 200;
+  res.headers["Content-Type"] = "font/ttf";
+  // 创建一个新的 URL 对象（需要一个完整的 URL，必须包含协议和主机）
+  const url = new URL(req.url, "http://test.com");
+  // 使用 URLSearchParams 来解析查询参数
+  const params = new URLSearchParams(url.search);
+  // 获取参数的值
+  const font = params.get("font") || "";
+  const text = params.get("text") || "";
+  const path = `font/${font}`;
+  const fontType = path.split(".").pop() as "ttf";
+  if (ttfCache[req.url]) {
+    // @ts-ignore
+    res.body = ttfCache[req.url];
+    return { req, res };
+  }
+  const oldFontBuffer = fontCache[path] ?? new Uint8Array(await readFile(path)).buffer;
+  fontCache[path] = oldFontBuffer;
+
+  const outType = "ttf";
+  const newFont = await fontSubset(oldFontBuffer, text, {
+    outType: outType,
+    sourceType: fontType,
+  });
+  // @ts-ignore
+  res.body = newFont;
+  ttfCache[req.url] = newFont;
+  return { req, res };
+};
+const server = new SimpleHttpServer({ port: 8087 });
+server.use(logMiddleware, corsMiddleware, fontApiMiddleware, staticFileMiddleware);
+
+// const main = async () => {
+//   // const path = "backend/问藏书房.ttf"; //问藏书房
+//   const path = "backend/令东齐伋复刻体.ttf";
+//   //   const path = "./backend/GoodHood-2.otf";//英文字体
+//   const fontType = path.split(".").pop() as "ttf";
+//   const oldFontBuffer = new Uint8Array(await readFile(path)).buffer;
+//   const outType = "ttf";
+//   const newFont = await fontSubset(oldFontBuffer, "abc问书房令东齐伋复刻体", {
+//     outType: outType,
+//     sourceType: fontType,
+//   });
+//   writeFile(`./public/font.${outType}`, newFont);
+// };

backend/font_util/font.ts

@@ -0,0 +1,23 @@
+import { Font, type FontEditor } from "fonteditor-core";
+
+export const fontSubset = async (
+  fontBuffer: ArrayBuffer,
+  subString: string,
+  option: {
+    sourceType: FontEditor.FontType;
+    outType: FontEditor.FontType;
+  },
+) => {
+  const font = Font.create(fontBuffer, {
+    type: option.sourceType,
+    subset: [...subString].map((char) => char.codePointAt(0)!),
+  });
+  //  优化字体
+  let optimizedFont = font.optimize();
+  optimizedFont = optimizedFont.compound2simple();
+  optimizedFont = optimizedFont.sort();
+  const newFont = optimizedFont.write({
+    type: option.outType,
+  });
+  return newFont as unknown as DataView;
+};

backend/server/mime_type.ts

@@ -0,0 +1,16 @@
+// MIME 类型映射
+export const mimeTypes: Record<string, string> = {
+  ".html": "text/html",
+  ".css": "text/css",
+  ".js": "application/javascript",
+  ".json": "application/json",
+  ".png": "image/png",
+  ".jpg": "image/jpeg",
+  ".jpeg": "image/jpeg",
+  ".gif": "image/gif",
+  ".svg": "image/svg+xml",
+  ".woff": "font/woff",
+  ".woff2": "font/woff2",
+  ".ttf": "font/ttf",
+  ".otf": "font/otf",
+};

backend/server/req_res.ts

@@ -0,0 +1,24 @@
+// 解析请求
+export function parseRequest(requestBuffer: string): cRequest {
+  const [requestLine] = requestBuffer.split("\r\n");
+  const [method, url] = requestLine.split(" ");
+  return { method, url };
+}
+// 请求和响应模型
+export interface cRequest {
+  method: string;
+  url: string;
+}
+
+export interface cResponse {
+  statusCode: number;
+  headers: Record<string, string>;
+  body: Buffer | string;
+}
+
+export type cNext = (
+  req: cRequest,
+  res: cResponse,
+) => { req: cRequest; res: cResponse } | Promise<{ req: cRequest; res: cResponse }>;
+// 中间件函数类型
+export type cMiddleware = (req: cRequest, res: cResponse, next: cNext) => ReturnType<cNext>;

backend/server/server.ts

@@ -0,0 +1,46 @@
+import { cMiddleware, cRequest, cResponse } from "./req_res";
+import { createTcpServer } from "./tcp_server";
+// 配置
+
+// 路由器类
+export class cRouter {
+  private middleware: cMiddleware[] = [];
+
+  use(middleware: cMiddleware) {
+    this.middleware.push(middleware);
+    return this
+  }
+
+  async handle(req: cRequest, res: cResponse) {
+    let index = -1;
+    const next = async (req: cRequest, res: cResponse) => {
+      index += 1;
+      // console.log(`开始执行第 ${index} ${this.middleware[index]?.name} 中间件`);
+      const r = (await this.middleware[index]?.(req, res, next)) ?? { req, res };
+      // console.log(`执行完毕第 ${index} 中间件`);
+
+      return r;
+    };
+    return next(req, res);
+  }
+}
+
+// 实现一个简化的 HTTP 服务器
+export class SimpleHttpServer {
+  private router: cRouter = new cRouter();
+
+  constructor(options: { port: number; hostname?: string }) {
+    const server = createTcpServer((req, res) => {
+      const r = this.router.handle(req, res);
+      return r;
+    });
+    server.listen(options.port, options.hostname, () => {
+      console.log(`Server is listening on port ${options.port}`);
+    });
+  }
+
+  use(...middlewares: cMiddleware[]) {
+    middlewares.forEach((middleware) => this.router.use(middleware));
+    return this;
+  }
+}

backend/server/tcp_server.ts

@@ -0,0 +1,54 @@
+import { createServer } from "net";
+import { cNext, cResponse, parseRequest } from "./req_res";
+// 状态码文本映射
+const statusCodes: Record<number, string> = {
+  200: "OK",
+  404: "Not Found",
+  405: "Method Not Allowed",
+  500: "Internal Server Error",
+};
+// 创建 TCP 服务器
+export function createTcpServer(handle: cNext) {
+  const server = createServer((socket) => {
+    let requestBuffer = "";
+    socket.on("data", async (data) => {
+      requestBuffer += data.toString();
+
+      // 如果收到请求头的结束标志，则处理请求
+      if (requestBuffer.includes("\r\n\r\n")) {
+        const req = parseRequest(requestBuffer);
+        const res: cResponse = { statusCode: 200, headers: {}, body: "" };
+        try {
+          // 处理请求
+          const { res: newRes } = await handle(req, res);
+          // 发送响应
+          socket.write(`HTTP/1.1 ${newRes.statusCode} ${statusCodes[newRes.statusCode]}\r\n`);
+          Object.entries(newRes.headers).forEach(([key, value]) => {
+            socket.write(`${key}: ${value}\r\n`);
+          });
+          socket.write("\r\n");
+          if (typeof newRes.body === "string") {
+            socket.write(newRes.body);
+          } else {
+            socket.write(newRes.body);
+          }
+          socket.end();
+        } catch (error) {
+          console.error("[err]", error);
+          socket.write("HTTP/1.1 500 Internal Server Error\r\n");
+          socket.write("Content-Type: text/plain\r\n");
+          socket.write("\r\n");
+          socket.write("500 Internal Server Error");
+          socket.end();
+        } finally {
+          requestBuffer = ""; // 重置请求缓冲区
+        }
+      }
+    });
+
+    socket.on("error", (err) => {
+      console.error("Socket error:", err);
+    });
+  });
+  return server;
+}

index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <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" />
+    <title>Vite + Solid + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,22 @@
+{
+  "name": "webfont",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "fonteditor-core": "^2.4.1",
+    "solid-js": "^1.8.20"
+  },
+  "devDependencies": {
+    "@types/node": "^22.4.0",
+    "tsup": "^8.2.4",
+    "typescript": "^5.5.3",
+    "vite": "^5.4.1",
+    "vite-plugin-solid": "^2.10.2"
+  }
+}

public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

src/App.css

@@ -0,0 +1,28 @@
+@font-face {
+  font-family: "CustomFont";
+  src: url("http://localhost:8087/api.ttf?font=令东齐伋复刻体.ttf&text=令东齐伋复刻体问藏书房") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+
+
+.font-test {
+  color: red;
+  font-family: "CustomFont";
+}
+
+
+@font-face {
+  font-family: "CustomOTFFont";
+  src: url("/GoodHood-2.otf") format("opentype");
+  font-weight: normal;
+  font-style: normal;
+}
+.font-otf {
+  color: red;
+  font-family: "CustomOTFFont";
+}
+
+body {
+  font-size: 56px;
+}

src/App.tsx

@@ -0,0 +1,13 @@
+import "./App.css";
+function App() {
+  const test = "ABCabc问藏书房令东齐伋复刻体";
+  return (
+    <>
+      <p class="font-test">{test}</p>
+      <p class="font-test2">{test}</p>
+      <p class="font-otf">{test}</p>
+    </>
+  );
+}
+
+export default App;

src/assets/solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 155.3"><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" fill="#76b3e1"/><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="27.5" y1="3" x2="152" y2="63.5"><stop offset=".1" stop-color="#76b3e1"/><stop offset=".3" stop-color="#dcf2fd"/><stop offset="1" stop-color="#76b3e1"/></linearGradient><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" opacity=".3" fill="url(#a)"/><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" fill="#518ac8"/><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="95.8" y1="32.6" x2="74" y2="105.2"><stop offset="0" stop-color="#76b3e1"/><stop offset=".5" stop-color="#4377bb"/><stop offset="1" stop-color="#1f3b77"/></linearGradient><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" opacity=".3" fill="url(#b)"/><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="18.4" y1="64.2" x2="144.3" y2="149.8"><stop offset="0" stop-color="#315aa9"/><stop offset=".5" stop-color="#518ac8"/><stop offset="1" stop-color="#315aa9"/></linearGradient><path d="M134 80a45 45 0 00-48-15L24 85 4 120l112 19 20-36c4-7 3-15-2-23z" fill="url(#c)"/><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="75.2" y1="74.5" x2="24.4" y2="260.8"><stop offset="0" stop-color="#4377bb"/><stop offset=".5" stop-color="#1a336b"/><stop offset="1" stop-color="#1a336b"/></linearGradient><path d="M114 115a45 45 0 00-48-15L4 120s53 40 94 30l3-1c17-5 23-21 13-34z" fill="url(#d)"/></svg>

src/index.css

@@ -0,0 +1,68 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

src/index.tsx

@@ -0,0 +1,9 @@
+/* @refresh reload */
+import { render } from 'solid-js/web'
+
+import './index.css'
+import App from './App'
+
+const root = document.getElementById('root')
+
+render(() => <App />, root!)

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

tsconfig.app.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": [
+      "ES2023"
+    ],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "types": [],
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": [
+    "vite.config.ts",
+    "backend/*.ts"
+, "backend/server/mime_type.ts", "backend/server/server.ts"  ]
+}

tsup.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  entry: ["backend/app.ts"],
+  splitting: false,
+  sourcemap: true,
+  clean: true,
+  bundle: true,
+  noExternal: [/.*/],
+  outDir:"dist_backend"
+});

vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import solid from 'vite-plugin-solid'
+import {  } from "fs";
+
+export default defineConfig({
+  plugins: [solid()],
+})