diff --git a/README.en.md b/README.en.md new file mode 100644 index 0000000..e413e32 --- /dev/null +++ b/README.en.md @@ -0,0 +1,216 @@ +# WebFont — Runtime Font Delivery + AI Typography Skill + +> Subset Chinese fonts on demand — 6 characters ≈ 6KB. Use premium Chinese fonts on any web page. + +[中文](README.md) + +**Chinese fonts are huge** (Source Han Sans: 16MB+). You can't just `@font-face` them like English fonts. + +This project subsets fonts on the server side — pass in the text you need, get back only those glyphs. A poster with 20 characters? The font file is 20KB, not 16MB. + +```html + + +
{{ SLOGAN }}
+{{ t('slogan') }}
原理:服务端根据 text 参数裁剪字体,只返回所需字符的子集。相同 URL 的请求会被浏览器自动缓存。
-基础用法:将 CSS 复制到你的页面,修改 text 参数中的文字即可:
-{{ `<style>\n@font-face {\n font-family: "MyFont";\n src: url("${origin}/api?font=字体名&text=你的文字") format("woff2");\n}\n.title { font-family: "MyFont"; }\n</style>\n<h1 class="title">你的文字</h1>` }}
- JS SDK(推荐):增量加载字体片段,按需请求,不会出现全量字体闪烁。下载 SDK
-{{ `<script src="${origin}/webfont-sdk.js"></script>\n<script>\n WebFont.loadFont({\n fontName: "字体文件名.ttf",\n selector: ".my-element",\n family: "MyFont",\n interval: 1000,\n });\n</script>` }}
- 还支持 WebFont.observeFont()(MutationObserver 事件驱动)和 WebFont.loadText()(手动传文本)两种方式,多种方式可同时使用,SDK 内部自动按字体去重增量加载。
{{ t('principle') }}{{ t('principleText') }}
+{{ t('basicUsage') }}{{ t('basicUsageText') }}
+{{ `<style>\n@font-face {\n font-family: \"MyFont\";\n src: url(\"${origin}/api?font=字体名&text=你的文字\") format(\"woff2\");\n}\n.title { font-family: \"MyFont\"; }\n</style>\n<h1 class=\"title\">你的文字</h1>` }}
+ {{ t('jsSdk') }}{{ t('jsSdkText') }}{{ t('downloadSdk') }}
+{{ `<script src=\"${origin}/webfont-sdk.js\"></script>\n<script>\n WebFont.loadFont({\n fontName: \"字体文件名.ttf\",\n selector: \".my-element\",\n family: \"MyFont\",\n interval: 1000,\n });\n</script>` }}
+ {{ t('sdkModes') }}WebFont.observeFont(){{ t('observeFont') }}WebFont.loadText(){{ t('loadText') }}
{{ outTypeDescs[outType] }}
+{{ outTypeDescs[outType]() }}
+ 山间晨露未晞,茶人已入林深处。指尖轻捻,择其嫩芽一二,置于竹篮之中。此乃一年之始,亦是一叶与万物的初遇。 +
+ ++ 甘、苦、涩、鲜、酸、咸——茶之六味,恰似人生六境。 +
+ + +
+ 茶不过一仰一俯之间,
然天地之大,尽在一盏之中。
+
+ 山间晨露未晞,茶人已入林深处。指尖轻捻,择其嫩芽一二,置于竹篮之中。此乃一年之始,亦是一叶与万物的初遇。 +
+ ++ 甘、苦、涩、鲜、酸、咸——茶之六味,恰似人生六境。 +
+ + +
+ 茶不过一仰一俯之间,
然天地之大,尽在一盏之中。
+