JLNTV_IPD/web-font
4
0
Fork 0
mirror of https://github.com/2234839/web-font.git synced 2025-04-06 05:25:44 +08:00
Code Issues Projects Releases Wiki Activity

✨feat(fontend): 完善界面与功能

Browse Source
This commit is contained in:
崮生 2021-03-12 21:06:34 +08:00
parent 71fbf9dd48
commit e6b358b731
11 changed files with 114 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -1,3 +1,9 @@
# web font serverless 版 # web font serverless 版
[在线尝试地址](http://webfontserverless.shenzilong.cn/) [在线尝试地址](http://webfontserverless.shenzilong.cn/)
## 如何使用 ？
你需要将 ttf 格式的字体包放到 `./apps/backend/.malagu/frontend/font/` 目录下，然后启动项目即可。
依托于 malagu 本项目即可以在传统服务器上运行，也可以在 serverless 平台上运行。

4
apps/backend/malagu.yml
View File

@ -3,8 +3,8 @@ targets:
malagu: malagu:
serve-static: serve-static:
# apiPath: /* apiPath: /*
apiPath: /api/* # apiPath: /api/*
faas-adapter: faas-adapter:
customDomain: customDomain:

7
apps/backend/src/fontmin.ts
View File

@ -1,4 +1,4 @@
import { Controller, File, Get, Query } from "@malagu/mvc/lib/node"; import { Controller, File, Get, Post, Query } from "@malagu/mvc/lib/node";
import { Context } from "@malagu/web/lib/node"; import { Context } from "@malagu/web/lib/node";
import { createHash } from "crypto"; import { createHash } from "crypto";
//@ts-ignore //@ts-ignore
@ -88,4 +88,9 @@ export class FontMinController {
}); });
}); });
} }
@Post("font_list")
async font_list() {
return fs.readdir(font_src);
}
} }

5
apps/backend/src/rpc.ts Normal file
View File

@ -0,0 +1,5 @@
import { FontMinController } from "./fontmin";
export interface Apis {
api: FontMinController;
}

2
apps/frontend/index.html
View File

@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title> <title>web font 字体裁剪</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

BIN
apps/frontend/public/2021.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 62 KiB

BIN
apps/frontend/public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 27 KiB

80
apps/frontend/src/App.vue
View File

@ -1,8 +1,9 @@
<template> <template>
<h1> <h1 class="text-4xl mt-4 mb-3">
<img class="h-14" src="/2021.png" alt="logo" />
web font 字体裁剪工具 (<a href="https://github.com/cellbang/malagu" web font 字体裁剪工具 (<a href="https://github.com/cellbang/malagu"
>serverless版</a >serverless</a
>) >s版)
</h1> </h1>
<label class="flex w-full"> <label class="flex w-full">
<span class="w-1/3 flex-shrink-0">使用该字体的文字：</span> <span class="w-1/3 flex-shrink-0">使用该字体的文字：</span>
@ -10,19 +11,45 @@
</label> </label>
<label class="flex w-full"> <label class="flex w-full">
<span class="w-1/3 flex-shrink-0">选择使用的字体：</span> <span class="w-1/3 flex-shrink-0">选择使用的字体：</span>
<input disabled type="text" v-model="font" class="flex-1" /> <select v-model="font" class="flex-1">
<option :value="item" v-for="item in fontList">{{ item }}</option>
</select>
</label> </label>
<label class="flex w-full"> <label class="flex w-full">
<span class="w-1/3 flex-shrink-0">选择字体类型：</span> <span class="w-1/3 flex-shrink-0">选择字体类型：</span>
<input disabled type="text" v-model="type" class="flex-1" /> <select v-model="type" class="flex-1">
<option value="" class="text-sm">
*ttf 与 woff 兼容性要好一些，eoc与svg仅靠下面的css可能还不够
</option>
<option :value="item" v-for="item in Object.keys(ttfFormatMap)">
{{ item }}
</option>
</select>
</label> </label>
<span>你可以直接 copy 下面的 css 去使用</span> <div class="flex flex-col w-full px-4">
<textarea v-model="cssCode" disabled :cols="20" :rows="16" class="w-11/12" /> <span class="text-sm mt-4 self-start">
*你可以直接 copy 下面的 css 去使用,打开浏览器的 devTools
查看字体文件的体积
</span>
<textarea v-model="cssCode" disabled :cols="20" :rows="16" class="w-full" />
</div>
<footer> <footer>
<a href="https://github.com/2234839/web-font/tree/serverless" <a
>github repo</a class="mr-2"
v-for="item in [
{
href: 'https://github.com/2234839/web-font/tree/serverless',
text: 'github repo',
},
{
href: 'https://shenzilong.cn',
text: '作者：崮生',
},
]"
:href="item.href"
>{{ item.text }}</a
> >
</footer> </footer>
<div v-html="style" /> <div v-html="style" />
@ -30,28 +57,45 @@
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, ref } from "vue"; import { computed, defineComponent, ref } from "vue";
import { Api } from "./api";
import { serverUrl } from "./config";
const ttfFormatMap = {
ttf: "truetype",
eot: "",
svg: "",
woff: "woff",
};
export default defineComponent({ export default defineComponent({
name: "App", name: "App",
setup() { setup() {
console.log("[process]", serverUrl);
console.log("[Api]", Api);
const text = ref("千图小兔体webfont字体裁剪工具(serverless版)"); const text = ref("千图小兔体webfont字体裁剪工具(serverless版)");
const font = ref("千图小兔体.ttf"); const font = ref("千图小兔体.ttf");
const fontList = ref<string[]>([]);
Api.api.font_list().then((r) => {
fontList.value = r;
});
const temp = ref("true"); const temp = ref("true");
const type = ref("ttf"); const type = ref<keyof typeof ttfFormatMap>("ttf");
const cssCode = computed( const cssCode = computed(
() => `* { font-family: test}\n () => `* { font-family: test}\n
@font-face { @font-face {
font-family: "test"; font-family: "test";
src: url("http://webfontserverless.shenzilong.cn/api/generate_fonts_dynamically?text=${text.value.trim()}&font=${ src: url("${serverUrl}/api/generate_fonts_dynamically?text=${text.value.trim()}&font=${
font.value font.value
}&temp=${temp.value}&type=${type.value}") }&temp=${temp.value}&type=${type.value}")
format("truetype"); ;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
}`, }`,
); );
const style = computed(() => `<style>${cssCode.value}</style>`); const style = computed(() => `<style>${cssCode.value}</style>`);
return { cssCode, style, text, font, temp, type }; return { cssCode, ttfFormatMap, style, text, font, fontList, temp, type };
}, },
}); });
</script> </script>

25
apps/frontend/src/api.ts Normal file
View File

@ -0,0 +1,25 @@
import type { Apis } from "../../backend/src/rpc";
import { serverUrl } from "./config";
export const Api = generateApi(serverUrl);
function generateApi(path: string): Apis {
return new Proxy<Apis>(generateApi as any, {
get(target, p) {
if (typeof p === "string") {
console.log(p);
return generateApi(path + "/" + p);
} else {
throw new Error("错误的 api 属性访问");
}
},
async apply(target, thisArg, argArray) {
const r = await fetch(path, {
body: JSON.stringify(argArray),
method: "POST",
});
return r.json();
},
});
}

4
apps/frontend/src/config.ts Normal file
View File

@ -0,0 +1,4 @@
export const serverUrl =
import.meta.env.MODE === "development"
? "//localhost:3000"
: "//webfontserverless.shenzilong.cn";

5
apps/frontend/src/index.css
View File

@ -3,9 +3,10 @@
@tailwind utilities; @tailwind utilities;
a { a {
@apply underline hover:text-blue-500; @apply underline text-blue-800 hover:text-blue-500;
} }
input { input,
select {
@apply border; @apply border;
} }