diff --git a/.gitignore b/.gitignore index 473b75d..9c05657 100644 --- a/.gitignore +++ b/.gitignore @@ -25,5 +25,6 @@ dist-ssr llrt* font/* +*.tar dist_backend \ No newline at end of file diff --git a/Dockerfile b/Dockerfile index 90b705b..971c0bb 100644 --- a/Dockerfile +++ b/Dockerfile @@ -6,6 +6,7 @@ COPY dist/ /home/dist/ EXPOSE 80 CMD ["/home/llrt", "/home/app.lrt"] -# docker tag web-font:latest llej0/web-font:latest +# docker tag llej0/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 +# docker build -t llej0/web-font:latest . +# docker save -o llej0.web-font.latest.tar llej0/web-font:latest \ No newline at end of file diff --git a/README.md b/README.md index 1fe050a..96eaf43 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,13 @@ # web font 字体裁剪工具 之前的版本请查看 master 分支，为了能使用 llrt ，我进行了重写，之后只维护此分支 -llrt超低的启动内存占用 -![alt text](./doc/启动内存占用.png) + +![](./doc/启动内存占用.png) llrt 超低的启动内存占用 +虽然 llrt 内存占用低，但它运行速度慢，只能到node的1/2。有运行速度要求的建议使用node/bun运行 ## 起因 -ui 需要展现一些特定的字体，但直接引入字体包又过大，于是想到了裁剪字体，一开始想的使用「字蛛」但他是针对静态网站的，而且实际他会多出许多英文的，估计是直接将源码中存在的文字都算进去了。 -后来又找到阿里的「webfont」 但他的字体有限，项目又不开源，所以自己写了这个 +ui 需要展现一些特定的字体，但直接引入字体包又过大，于是想到了裁剪字体，一开始想的使用「字蛛」但他是针对静态网站的，而且实际他会多出许多英文的，估计是直接将源码中存在的文字都算进去了。后来又找到阿里的「webfont」 但他的字体有限，项目又不开源，所以自己写了这个 ## 在线尝试 @@ -17,8 +17,7 @@ ui 需要展现一些特定的字体，但直接引入字体包又过大，于 1.裁剪字体包使其仅包含选中的字体 -例如 如下图生成的字体包仅包含 「天地无极乾坤借法」 -![界面预览](./doc_img/页面截图.jpg) +例如 如下图生成的字体包仅包含 「天地无极乾坤借法」 ![界面预览](./doc_img/页面截图.jpg) @@ -32,14 +31,15 @@ ui 需要展现一些特定的字体，但直接引入字体包又过大，于 ```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; + 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; } ``` @@ -53,34 +53,41 @@ ui 需要展现一些特定的字体，但直接引入字体包又过大，于 ## 安装与使用 -### 使用docker安装 +### 使用 docker 安装 -https://hub.docker.com/repository/docker/llej0/web-font -很小的包体积 -![alt text](doc/image.png) +https://hub.docker.com/repository/docker/llej0/web-font 很小的包体积 ![alt text](doc/image.png) docker compoose.yml + ```yml -version: 'latest' +version: '3' services: app: - image: llej0/web-font:latest + image: docker.io/llej0/web-font:latest ports: - "8087:8087" volumes: - - /home/zixu/code/webfont/font:/home/font + - ./data:/home/font # 挂载本机字体目录 + deploy: + resources: + limits: + memory: 100M # 设置内存限制为100MB，根据实际需求来设置 + restart: on-failure # 设置重启策略为 on-failure + ``` -其中font目录替换成你的字体文件存放目录 +其中 font 目录替换成你的字体文件存放目录 -### 使用node等运行时 +### 使用 node 等运行时 + +拉取项目，并将字体文件放到项目内的 font 目录下，然后运行： pnpm install && pnpm build && pnpm build_backend && node ./dist_backend/ + + ## 提供的服务 - - ## 鸣谢 [字体天下](http://www.fonts.net.cn/commercial-free-32767/fonts-zh-1.html) diff --git a/package.json b/package.json index d2f863f..08d7678 100644 --- a/package.json +++ b/package.json @@ -1,13 +1,14 @@ { "name": "webfont", "private": true, - "version": "0.0.0", + "version": "1.0.1", "type": "module", "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 .", + "docker_build": "docker build -t llej0/web-font:${npm_package_version} -t llej0/web-font:latest .", + "docker_push": "docker push llej0/web-font:${npm_package_version} && docker push llej0/web-font:latest", "preview": "vite preview" }, "dependencies": { @@ -21,4 +22,4 @@ "vite": "^5.4.1", "vite-plugin-solid": "^2.10.2" } -} +} \ No newline at end of file diff --git a/src/App.css b/src/App.css deleted file mode 100644 index fc7fa38..0000000 --- a/src/App.css +++ /dev/null @@ -1,28 +0,0 @@ -@font-face { - font-family: "CustomFont"; - src: url("/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; -} diff --git a/src/App.tsx b/src/App.tsx index d494832..9fcbf26 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,12 +1,40 @@ -import "./App.css"; +import { createMemo, createSignal } from "solid-js"; + function App() { - const test = "ABCabc问藏书房令东齐伋复刻体"; + const [text, set_text] = createSignal("天地无极，乾坤借法"); + + const serverPath = import.meta.env.DEV ? "/" : "https://webfont.shenzilong.cn/"; + const style = createMemo( + () => ` + @font-face { + font-family: "CustomFont"; + src: url("${serverPath}api?font=令东齐伋复刻体.ttf&text=${text()}") format("truetype"); + font-weight: normal; + font-style: normal; + } + input { + color: red; + font-family: "CustomFont"; + } +`, + ); return ( - <> -

{test}

-

{test}

-

{test}

- +
+

+ web font{" "} +

+
+
在下面输入文本查看效果
+ set_text(e.target.value)} + /> +
+ + 
{""}
+ +
); } diff --git a/src/index.css b/src/index.css deleted file mode 100644 index 6119ad9..0000000 --- a/src/index.css +++ /dev/null @@ -1,68 +0,0 @@ -: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; - } -} diff --git a/src/index.tsx b/src/index.tsx index af7bf04..ddc0c79 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,7 +1,6 @@ /* @refresh reload */ import { render } from 'solid-js/web' -import './index.css' import App from './App' const root = document.getElementById('root') diff --git a/vite.config.ts b/vite.config.ts index 43e1ee2..f488189 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,10 +1,17 @@ -import { defineConfig } from 'vite' -import solid from 'vite-plugin-solid' -import { } from "fs"; +import { defineConfig } from "vite"; +import solid from "vite-plugin-solid"; +import {} from "fs"; export default defineConfig({ plugins: [solid()], - server:{ - host:"0.0.0.0" - } -}) + server: { + host: "0.0.0.0", + proxy: { + // with options + "/api": { + target: "http://localhost:8087", + changeOrigin: true, + }, + }, + }, +});