Leon Sans 快速入门3 步把动态字重和文字动画画进网页【免费下载链接】leonsansLeon Sans is a geometric sans-serif typeface made with code in 2019 by Jongmin Kim.项目地址: https://gitcode.com/gh_mirrors/le/leonsansLeon Sans 是一个用 JavaScript 编写的几何无衬线字体渲染库它在网页 Canvas 里把文字实时画出来而不是调用浏览器内置的字体引擎。动态字重weight 从 1 到 900 随时改、逐笔书写动画、波浪变形、metaball 融合这类传统 webfont 做不到的效果它都能做。对做网页动效、品牌视觉或教学演示的开发者来说它比下载一套字体文件再 font-face灵活得多。项目由 Jongmin Kim 于 2019 年用代码完成设计他为庆祝新生儿 Leon 出生而做当前源码版本 1.6.3MIT 开源。Leon Sans 和普通 webfont 有什么不同平时给网页换字体你的做法是下载 woff 文件 → 声明 font-face → 浏览器接管渲染。整个过程字体对你不透明字重只能预先选好几个档位字形内部结构拿不到动画也做不了。Leon Sans 换了个思路字形即数据每个字符的笔画被存成坐标点数组放在 src/font/ 目录里随 JS 一起打包渲染即绘制库自己拿 Canvas 的 2D 上下文或 WebGL把这些点连成线画出来字重即参数字重不是不同字体文件而是一个数值参数改变数值后所有笔画实时加粗或变细坐标即接口你能直接拿到每个字符的坐标数组想让它变形、抖动、融合都随你代价是字符集覆盖英文大小写字母、数字、常用标点及部分拉丁扩展字符遇到不支持的字符会画成豆腐块tofu 方框。所以它适合英文标题、视觉展示和动效场景不适合做中文正文排版。快速开始引入 leon.js 并画出第一行文字没有包管理器和构建步骤。克隆仓库后把 dist/leon.js 这个打包好的文件拷进你的项目即可git clone https://gitcode.com/gh_mirrors/le/leonsans页面里引入并初始化一个完整的最小示例如下script srcleon.js/script script const canvas document.createElement(canvas); document.body.appendChild(canvas); canvas.width 800; canvas.height 600; const ctx canvas.getContext(2d); const leon new LeonSans({ text: The quick brown fox, color: [#000000], size: 80, weight: 200 }); function animate() { requestAnimationFrame(animate); ctx.clearRect(0, 0, 800, 600); leon.position((800 - leon.rect.w) / 2, (600 - leon.rect.h) / 2); leon.draw(ctx); } animate(); /script核心构造参数只有 4 个text文本、size字号、weight字重、color颜色数组支持多字符配不同颜色。其余常用配置按需加tracking/leading字距 / 行距alignleft、center、right三种水平对齐maxWidthbreakWord限定文本宽度并自动换行fps波浪效果的帧率上限默认 30不想从零写页面直接打开 examples/ 目录下的任意 HTML 文件每个都是独立可运行的演示页。字重与排版weight 从 1 到 900 随时改字重是这个库最直观的卖点leon.weight 700; // 下一帧自动加粗无需重新加载字体配合text、size、tracking等属性都是 getter/setter 形式赋值即触发重算下一帧生效。排版能力上color是数组可以给不同字符配不同颜色实现双色、多色标题换行符\n控制多行leading控制行距maxWidth配合breakWord: true做自动折行效果玩法书写动画、波浪与 metaball逐笔绘制动画leon.drawing返回一组动画对象value从 0 推到 1 就是笔画从起笔到收笔的过程。自己写补间或用 GSAP示例用的 TweenMax都行每个字符错开一点延迟效果更接近真人写字leon.drawing.forEach((d, i) { TweenMax.fromTo(d, 1.6, { value: 0 }, { value: 1, delay: i * 0.05 }); });其他 Canvas 效果方法都要传入 2D 上下文wave(ctx, t)让文字沿笔画路径起伏幅度用amplitude控制isWave: true开启drawColorful(ctx)彩色渐变效果配色从colorful数组随机取pattern(ctx, w, h)在每个路径点上画小图形配合 examples/data/ 里的 tile 贴图可拼出图案化文字grid(ctx)/point(ctx)/box(ctx)画网格、坐标点和外框方便调试字形结构WebGL 高级效果文字量大或特效复杂时可改用 PIXI.js 走 WebGLleon.drawPixi(graphics)一行换渲染后端。examples/ 里有 5 个 WebGL 演示metaball墨滴融合、morphing字形变形、plants笔画上长植物、mask tiling遮罩平铺。注意updateDrawingPaths()开销很大只在必要时调用。原理浅层解析字形是坐标点不是字体文件看 src/font/ 就明白了upper.js、lower.js、number.js、special.js、latin.js里每个字符都是一段generateFontData(...)调用参数是宽高和一组带方向、旋转角度的路径指令直线l、曲线等。渲染链路大致是构造LeonSans时Model按size、weight、tracking把这些原始数据换算成带坐标的笔画线段src/core/ 里的model.js、paths.js负责这块数学draw(ctx)逐笔画线weight改变时重新插值笔画间距所以字重是连续可调的波浪、pattern 等效果共用同一套paths坐标只是按pathGap参数在路径上取点再对每个点做偏移——所以变形效果的分辨率由pathGap决定一句话你操作的不是字体而是一堆可以任意摆弄的点。资源入口从哪些目录开始读打包产物dist/leon.js —— 直接拷走就能用演示页面examples/ —— 8 个 Canvas 演示 5 个 WebGL 演示含交互调试面板字形数据src/font/ —— 想看某个字符长什么样在这里找排版与路径计算src/core/ —— 想改字重算法或加新效果从这里入手主入口源码src/leonsans.js —— 所有公开 API 的定义都在这个文件里Leon Sans 把字形变成数据把字体渲染变成 Canvas 绘制字重、动画和变形因此全部可编程。如果你需要一个能动起来的英文标题方案从 examples/ 里挑一个演示改起是上手最快的方式。【免费下载链接】leonsansLeon Sans is a geometric sans-serif typeface made with code in 2019 by Jongmin Kim.项目地址: https://gitcode.com/gh_mirrors/le/leonsans创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考