diff --git a/README.md b/README.md
index 30a5c92..ba85775 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,9 @@
 # web font serverless 版
 
 [在线尝试地址](http://webfontserverless.shenzilong.cn/)
+
+## 如何使用 ？
+
+你需要将 ttf 格式的字体包放到 `./apps/backend/.malagu/frontend/font/` 目录下，然后启动项目即可。
+
+依托于 malagu 本项目即可以在传统服务器上运行，也可以在 serverless 平台上运行。
diff --git a/apps/backend/malagu.yml b/apps/backend/malagu.yml
index a33e1f0..fe32471 100644
--- a/apps/backend/malagu.yml
+++ b/apps/backend/malagu.yml
@@ -3,8 +3,8 @@ targets:
 
 malagu:
   serve-static:
-    # apiPath: /*
-    apiPath: /api/*
+    apiPath: /*
+    # apiPath: /api/*
 
   faas-adapter:
     customDomain:
diff --git a/apps/backend/src/fontmin.ts b/apps/backend/src/fontmin.ts
index c2c7e3c..408fb6a 100644
--- a/apps/backend/src/fontmin.ts
+++ b/apps/backend/src/fontmin.ts
@@ -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 { createHash } from "crypto";
 //@ts-ignore
@@ -88,4 +88,9 @@ export class FontMinController {
       });
     });
   }
+
+  @Post("font_list")
+  async font_list() {
+    return fs.readdir(font_src);
+  }
 }
diff --git a/apps/backend/src/rpc.ts b/apps/backend/src/rpc.ts
new file mode 100644
index 0000000..4f544aa
--- /dev/null
+++ b/apps/backend/src/rpc.ts
@@ -0,0 +1,5 @@
+import { FontMinController } from "./fontmin";
+
+export interface Apis {
+  api: FontMinController;
+}
diff --git a/apps/frontend/index.html b/apps/frontend/index.html
index 11603f8..78b9737 100644
--- a/apps/frontend/index.html
+++ b/apps/frontend/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite App</title>
+    <title>web font 字体裁剪</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/apps/frontend/public/2021.png b/apps/frontend/public/2021.png
new file mode 100644
index 0000000..581868c
Binary files /dev/null and b/apps/frontend/public/2021.png differ
diff --git a/apps/frontend/public/favicon.ico b/apps/frontend/public/favicon.ico
index df36fcf..8b7bfdd 100644
Binary files a/apps/frontend/public/favicon.ico and b/apps/frontend/public/favicon.ico differ
diff --git a/apps/frontend/src/App.vue b/apps/frontend/src/App.vue
index cfb834b..53526b8 100644
--- a/apps/frontend/src/App.vue
+++ b/apps/frontend/src/App.vue
@@ -1,8 +1,9 @@
 <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"
-      >serverless版</a
-    >)
+      >serverless</a
+    >s版)
   </h1>
   <label class="flex w-full">
     <span class="w-1/3 flex-shrink-0">使用该字体的文字：</span>
@@ -10,19 +11,45 @@
   </label>
   <label class="flex w-full">
     <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 class="flex w-full">
     <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>
 
-  <span>你可以直接 copy 下面的 css 去使用</span>
-  <textarea v-model="cssCode" disabled :cols="20" :rows="16" class="w-11/12" />
+  <div class="flex flex-col w-full px-4">
+    <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>
-    <a href="https://github.com/2234839/web-font/tree/serverless"
-      >github repo</a
+    <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>
   <div v-html="style" />
@@ -30,28 +57,45 @@
 
 <script lang="ts">
   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({
     name: "App",
     setup() {
+      console.log("[process]", serverUrl);
+      console.log("[Api]", Api);
+
       const text = ref("千图小兔体webfont字体裁剪工具(serverless版)");
+
       const font = ref("千图小兔体.ttf");
+      const fontList = ref<string[]>([]);
+      Api.api.font_list().then((r) => {
+        fontList.value = r;
+      });
+
       const temp = ref("true");
-      const type = ref("ttf");
+      const type = ref<keyof typeof ttfFormatMap>("ttf");
       const cssCode = computed(
         () => `* { font-family: test}\n
-@font-face {
-  font-family: "test";
-  src: url("http://webfontserverless.shenzilong.cn/api/generate_fonts_dynamically?text=${text.value.trim()}&font=${
+  @font-face {
+    font-family: "test";
+    src: url("${serverUrl}/api/generate_fonts_dynamically?text=${text.value.trim()}&font=${
           font.value
         }&temp=${temp.value}&type=${type.value}")
-    format("truetype");
-  font-style: normal;
-  font-weight: normal;
-}`,
+     ;
+    font-style: normal;
+    font-weight: normal;
+  }`,
       );
       const style = computed(() => `<style>${cssCode.value}</style>`);
-      return { cssCode, style, text, font, temp, type };
+      return { cssCode, ttfFormatMap, style, text, font, fontList, temp, type };
     },
   });
 </script>
diff --git a/apps/frontend/src/api.ts b/apps/frontend/src/api.ts
new file mode 100644
index 0000000..fd6e946
--- /dev/null
+++ b/apps/frontend/src/api.ts
@@ -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();
+    },
+  });
+}
diff --git a/apps/frontend/src/config.ts b/apps/frontend/src/config.ts
new file mode 100644
index 0000000..426ebea
--- /dev/null
+++ b/apps/frontend/src/config.ts
@@ -0,0 +1,4 @@
+export const serverUrl =
+  import.meta.env.MODE === "development"
+    ? "//localhost:3000"
+    : "//webfontserverless.shenzilong.cn";
diff --git a/apps/frontend/src/index.css b/apps/frontend/src/index.css
index 1bdebc0..d02adf1 100644
--- a/apps/frontend/src/index.css
+++ b/apps/frontend/src/index.css
@@ -3,9 +3,10 @@
 @tailwind utilities;
 
 a {
-  @apply underline hover:text-blue-500;
+  @apply underline text-blue-800 hover:text-blue-500;
 }
 
-input {
+input,
+select {
   @apply border;
 }
