diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..90b705b --- /dev/null +++ b/Dockerfile @@ -0,0 +1,11 @@ +FROM scratch +WORKDIR /home/ +COPY dist_backend/app.lrt /home/app.lrt +COPY llrt2 /home/llrt +COPY dist/ /home/dist/ +EXPOSE 80 +CMD ["/home/llrt", "/home/app.lrt"] + +# docker tag web-font:latest llej0/web-font:latest +# docker push llej0/web-font:latest +# docker build -t llej0/web-font:latest . \ No newline at end of file diff --git a/README.md b/README.md index 99613fc..cf80e00 100644 --- a/README.md +++ b/README.md @@ -1,28 +1,90 @@ -## Usage +# web font 字体裁剪工具 -```bash -$ npm install # or pnpm install or yarn install +之前的版本请查看 master 分支,为了能使用 llrt ,我进行了重写,之后只维护此分支 + +## 起因 + +ui 需要展现一些特定的字体,但直接引入字体包又过大,于是想到了裁剪字体,一开始想的使用「字蛛」但他是针对静态网站的,而且实际他会多出许多英文的,估计是直接将源码中存在的文字都算进去了。 +后来又找到阿里的「webfont」 但他的字体有限,项目又不开源,所以自己写了这个 + +## 在线尝试 + +- [web font 在线站点](https://webfont.shenzilong.cn/) + +## 目的与功能 + +1.裁剪字体包使其仅包含选中的字体 + +例如 如下图生成的字体包仅包含 「天地无极乾坤借法」 +![界面预览](./doc_img/页面截图.jpg) + + + +其体积自然十分之小 + +![体积展示](./doc_img/体积展示.jpg) + +2.另外可以生成 css 直接复制可用,部署在公网便可永久访问 + +例如 + +```css +@font-face { + font-family: "QIJIC"; + src: url("http://127.0.0.1:3000/asset/font/1584680576469/令东齐伋复刻体.eot"); /* IE9 */ + src: url("http://127.0.0.1:3000/asset/font/1584680576469/令东齐伋复刻体.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ + url("http://127.0.0.1:3000/asset/font/1584680576469/令东齐伋复刻体.woff") format("woff"), /* chrome, firefox */ + url("http://127.0.0.1:3000/asset/font/1584680576469/令东齐伋复刻体.ttf") format("truetype"), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ + url("http://127.0.0.1:3000/asset/font/1584680576469/令东齐伋复刻体.svg#QIJIC") format("svg"); /* iOS 4.1- */ + font-style: normal; + font-weight: normal; +} ``` -### Learn more on the [Solid Website](https://solidjs.com) and come chat with us on our [Discord](https://discord.com/invite/solidjs) +3.将 ttf 的字体包放置在 ./asset/font_src/ 目录下自然可以检测到新的可用字体,无需重启服务 -## Available Scripts +![路径预览](./doc_img/路径展示.jpg) -In the project directory, you can run: +4.提供 zip 的整体下载方案 -### `npm run dev` +![下载展示](./doc_img/下载展示.jpg) -Runs the app in the development mode.
-Open [http://localhost:5173](http://localhost:5173) to view it in the browser. +## 安装与使用 -### `npm run build` +### 使用docker安装 -Builds the app for production to the `dist` folder.
-It correctly bundles Solid in production mode and optimizes the build for the best performance. +https://hub.docker.com/repository/docker/llej0/web-font +很小的包体积 +![alt text](doc/image.png) -The build is minified and the filenames include the hashes.
-Your app is ready to be deployed! +docker compoose.yml +```yml +version: 'latest' +services: + app: + image: llej0/web-font:latest + ports: + - "8087:8087" + volumes: + - /home/zixu/code/webfont/font:/home/font +``` +其中font目录替换成你的字体文件存放目录 -## Deployment -Learn more about deploying your application with the [documentations](https://vitejs.dev/guide/static-deploy.html) +### 使用node等运行时 + +pnpm install && pnpm build && pnpm build_backend && node ./dist_backend/ + +## 提供的服务 + + + +## 鸣谢 + +[字体天下](http://www.fonts.net.cn/commercial-free-32767/fonts-zh-1.html) + +[fontmin](https://github.com/ecomfe/fontmin) + +## License + +MIT © [崮生](https://shenzilong.cn/关于/mit.html) diff --git a/backend/app.ts b/backend/app.ts index 8348d97..660f71a 100644 --- a/backend/app.ts +++ b/backend/app.ts @@ -1,10 +1,9 @@ +import fs, { readFile } from "fs/promises"; 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"; +import { mimeTypes } from "./server/mime_type"; +import type { cMiddleware } from "./server/req_res"; +import { SimpleHttpServer } from "./server/server"; const ROOT_DIR = path.resolve("dist"); // 静态文件目录 const staticFileMiddleware: cMiddleware = async function (req, res, next) { if (req.method === "GET") { diff --git a/doc/image.png b/doc/image.png new file mode 100644 index 0000000..ec9840e Binary files /dev/null and b/doc/image.png differ diff --git a/package.json b/package.json index 3084c88..d2f863f 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,8 @@ "scripts": { "dev": "vite", "build": "tsc -b && vite build", + "build_backend": "tsup && ./llrt2 compile ./dist_backend/app.cjs ./dist_backend/app.lrt", + "docker": "docker build -t web-font:latest .", "preview": "vite preview" }, "dependencies": { diff --git a/src/App.css b/src/App.css index 1af2830..fc7fa38 100644 --- a/src/App.css +++ b/src/App.css @@ -1,6 +1,6 @@ @font-face { font-family: "CustomFont"; - src: url("http://localhost:8087/api.ttf?font=令东齐伋复刻体.ttf&text=令东齐伋复刻体问藏书房") format("truetype"); + src: url("/api.ttf?font=令东齐伋复刻体.ttf&text=令东齐伋复刻体问藏书房") format("truetype"); font-weight: normal; font-style: normal; } diff --git a/vite.config.ts b/vite.config.ts index 1bb62cd..43e1ee2 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -4,4 +4,7 @@ import { } from "fs"; export default defineConfig({ plugins: [solid()], + server:{ + host:"0.0.0.0" + } })