Tegaki性能与无障碍实战字体包体积优化、reducedMotion与SSR策略完整清单【免费下载链接】tegakiHandwriting animation for the web. Supports any font or text.项目地址: https://gitcode.com/gh_mirrors/teg/tegakiTegaki 是一个让任意字体变成手写动画的 Web 库无需手工描路径、无原生依赖。这篇文章面向新手整理了一份性能与无障碍实战清单如何压缩字体包font bundle体积、如何用reducedMotion尊重用户的减弱动态偏好、以及 SSR 服务端渲染下的正确接入策略帮你把手写动画做得既流畅又友好。字体包体积先搞清楚重量来自哪里Tegaki 的每个字体包由两部分组成.ttf字体文件和glyphData.json笔画数据。以内置字体为例查看 packages/renderer/fonts/caveat/ 目录就能看到这种结构。好消息是笔画数据已经是压缩格式。生成器使用短键名w存字宽、t存时长、s存笔画来最小化体积格式定义见 generating.mdx。所以优化空间主要在装多少字符和重复加载两个环节。只生成你需要的字符集不要默认生成 A–Z 0–9 标点全家桶。在 studio 交互生成器 里Characters 选项让你精确指定要处理的字符常用字符集整理在 packages/generator/src/charsets.ts。只覆盖实际文案体积可以差出几倍。同一字体只序列化一次在 SSR 场景下字体数据会以内嵌 JSON 的形式写入 HTML。如果页面有多个组件共用同一字体注册一次、按名字引用即可避免数据重复。Astro 组件的bundle属性专门解决这件事!-- 注册一次不渲染可见内容 -- TegakiRenderer font{bundle} bundle / !-- 之后按字体名引用HTML 中不再重复字体数据 -- TegakiRenderer fontCaveat textFirst line / TegakiRenderer fontCaveat textSecond line /另外给注册实例加上loadFont属性会注入font-face规则让浏览器尽早开始下载字体文件减少首帧等待。详见 Astro 框架文档。动画模式怎么选css 模式性能最好Tegaki 的时间系统支持多种模式定义在 packages/renderer/src/core/types.ts从性能角度排序建议模式特点适用场景css动画纯由 CSS 过渡驱动没有 JavaScript 动画循环性能最佳页面有大量动画实例时uncontrolled组件自管理时钟支持speed、loop常规使用最省心受控模式传数字由你的代码驱动时间需要逐帧同步如视频渲染时如果你的手写动画只是装饰性内容优先css模式——主线程几乎零开销。reducedMotion三步搞定无障碍动态偏好reducedMotion属性控制非受控播放是否尊重操作系统的减弱动态效果设置prefers-reduced-motion取值三档API 定义见 renderer.mdx取值行为建议never默认始终动画需要展示书写过程的产品场景user跟随用户系统设置且页面开着时设置变更也会实时响应✅ 面向公开网站的首选always从不动画直接显示写完的文字对动效极度敏感的产品开启后文字会以已完成书写的状态呈现而非逐笔写出onComplete回调依然会触发业务逻辑不用改TegakiRenderer font{caveat} reducedMotionuser Hello /TegakiRenderer两个注意点Web Components 场景下对应属性是reduced-motion默认never见 web-components.mdx。受控模式和css模式由你自己的代码驱动时间该属性不生效需要自行检查prefers-reduced-motion。SSR 策略让文字在 JS 加载前就可见Astro构建期输出完整 HTMLAstro 组件是 SSR 友好的完整方案其如何工作分四步astro.mdx构建期调用TegakiEngine.renderElements()产出完整 HTML即使没有 JavaScript 文本也可见Bundle 序列化字体数据以script typeapplication/json内嵌进 HTML 送达浏览器客户端水合脚本注册 bundle 后复用已有 DOM 启动动画动态元素MutationObserver负责水合后续动态插入的元素如视图过渡。有一个经典坑服务端会把字体 URL 解析成构建机器的file://路径导致文字按回退字体宽度排版。解决方案是把官方集成加进 Astro 配置集成源码见 packages/renderer/src/astro/integration.ts// astro.config.mjs import tegaki from tegaki/astro/integration; export default defineConfig({ integrations: [tegaki()], });Vite 项目开发模式需要排除预打包Vite 7 及以下的 dev 模式下esbuild 预打包会切断.ttf的相对路径症状是文字不可见但可选中、控制台报Failed to decode downloaded font。修复只需在vite.config.ts中排除预打包详细说明见 bundlers.mdxexport default defineConfig({ optimizeDeps: { exclude: [tegaki] }, });改完请完全重启 dev server。生产构建Rollup不需要任何额外配置。Nuxt 用户可直接参考 packages/renderer/src/nuxt/ 下的模块实现。实战清单发布前逐项打勾 ✅字符集只覆盖实际文案用 charsets.ts 里的现成集合同字体多实例bundle注册一次 按名引用避免 HTML 中重复字体数据注册实例加loadFont提前拉取字体文件纯装饰性动画改用time{{ mode: css }}消灭 JS 动画循环公开页面设置reducedMotionuser尊重prefers-reduced-motionAstro 项目引入tegaki/astro/integration避免file://字体路径Vite dev 环境配置optimizeDeps.exclude: [tegaki]并重启服务受控/css模式的页面自行检查减弱动态偏好按这份清单走完你的手写动画既能压住包体积、跑得动低端设备也能对减弱动态用户保持体面。更多细节可查阅 渲染 API 文档 与 生成指南。【免费下载链接】tegakiHandwriting animation for the web. Supports any font or text.项目地址: https://gitcode.com/gh_mirrors/teg/tegaki创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考