更新文档

This commit is contained in:
zixu 2024-08-18 16:29:18 +08:00
parent 6b896d768e
commit cae3bad5a9
7 changed files with 99 additions and 22 deletions

11
Dockerfile Normal file
View File

@ -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 .

View File

@ -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)
<video src="./doc_img/功能演示.mkv" controls="controls" width:100% height:auto></video>
其体积自然十分之小
![体积展示](./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.<br>
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.<br>
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.<br>
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)

View File

@ -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") {

BIN
doc/image.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 94 KiB

View File

@ -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": {

View File

@ -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;
}

View File

@ -4,4 +4,7 @@ import { } from "fs";
export default defineConfig({
plugins: [solid()],
server:{
host:"0.0.0.0"
}
})