如何用 Virgil 字体还原 Excalidraw 的白板手绘体验？完整教程

如何用 Virgil 字体还原 Excalidraw 的白板手绘体验完整教程【免费下载链接】virgilThe old-font that powered Excalidraw. Now replaced by Excalifont.项目地址: https://gitcode.com/gh_mirrors/vi/virgil如果你用过 Excalidraw 这款在线白板工具一定对它那套歪歪扭扭、像手绘一样的文字印象深刻——这正是Virgil 字体手写字体的功劳。Virgil 是由设计师 Ellinor Rapp 创作的 Excalidraw 官方字体曾经为 Excalidraw 的白板手绘体验立下汗马功劳。本文是一份面向新手与普通用户的Virgil 字体完整教程带你了解它的来历、快速安装方法以及如何在网页或本地环境中用它还原那份亲切的手绘感。提示Virgil 现在已被 Excalifont 取代但作为一款开源手写字体它依然可以免费下载、自由使用甚至用在 Excalidraw 之外的项目里。一、Virgil 字体是什么为什么 Excalidraw 的手写感这么自然Virgil 手写字体诞生于 Excalidraw 项目内部是白板工具默认文字效果的灵魂。它之所以看起来像人手写的字而不是印刷体主要有三个原因笔画末端不齐每个字母的收笔都带一点自然的甩尾像真的用笔写出来。字形略带倾斜字母不完全垂直有一点轻微的晃动感符合手写习惯。宽度不统一同一个字母在不同位置宽度略有差异模仿真人书写的不完美。正是这些不完美让 Excalidraw 的白板界面充满温度也让很多开发者想在自己的网站或应用里复刻这种效果。二、如何免费下载 Virgil 字体3 种最快方法想要使用这款字体最快的方式是直接拿到字体文件。以下是最快捷的Virgil 字体下载方法方法 1克隆仓库获取字体文件如果你的电脑上安装了 Git可以一键克隆整个项目仓库字体文件就在仓库根目录git clone https://gitcode.com/gh_mirrors/vi/virgil克隆后你会看到这些核心文件Virgil.woff2网页字体文件体积小、加载快适合网站使用。index.html官方演示页打开即可预览字体效果。src/Virgil.vfjFontLab 字体源文件供设计师深入修改。方法 2直接下载 .woff2 文件不需要整份代码项目首页的演示页提供了一键下载 .woff2的按钮直接拿到网页专用格式非常适合 Web 项目。方法 3本地安装字体把 .woff2 转成 .ttf/.otf 后可用任意在线字体转换工具Windows 双击安装、macOS 放入字体册即可在 Word、PPT 里使用给文档加上手写批注的质感。三、在网页中安装 Virgil 字体的最快配置方法拿到字体文件后只需一段简短的 CSS 就能让整个网站手绘化。下面是Virgil 字体网页嵌入步骤第 1 步声明字体把 .woff2 文件放到项目目录例如fonts/然后添加font-face { font-family: Virgil; src: url(fonts/Virgil.woff2); font-display: swap; }这段代码正是官方演示页 index.html 中的用法font-display: swap能保证字体加载期间先显示备选字体不阻塞页面渲染。第 2 步应用到元素.handwritten { font-family: Virgil, sans-serif; }给任意元素加上classhandwritten文字立刻拥有 Excalidraw 同款手写风。第 3 步配合手绘感的其他元素要想完整还原 Excalidraw 的白板氛围还可以边框使用border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px模拟手绘圆角阴影使用轻微偏移模拟铅笔痕迹背景换成米白色纸张纹理。字体 边框 背景三件套白板手绘体验立刻拉满。四、Virgil 字体支持哪些字符这是一款覆盖面相当广的字体内置 534 个字形支持语言区域示例拉丁字母A B C … Za b c … z希腊字母Α Β Γ … Ωα β γ … ω西里尔字母А Б В … Яа б в … я数字与符号0-9、[] () {} ? ! # $ € % …中英文混排时中文会回退到系统中文字体而英文、数字和标点全部呈现手写体非常适合做批注、便签、流程图标签。五、使用 Virgil 字体的 3 个实用场景在线白板与协作工具给团队内部工具加上 Excalidraw 同款手写字体降低工具的严肃感鼓励随手涂画。个人博客与笔记段落引用、侧边批注使用 Virgil 字体营造手账般的阅读体验。PPT 与海报标题用粗手写体、正文用手写体配合高亮色块做提案画板风的演示文稿。六、开源与贡献你也可以参与改进Virgil 采用SIL Open Font License 1.1开源协议详见 LICENSE.md意味着你可以免费使用、修改、再分发这款字体甚至可以嵌入商业软件只需保留版权声明。想打磨字形用 FontLab 打开 src/Virgil.vfj 源文件即可编辑。想自动清理字体元数据项目提供了 script/cleanup.js 脚本运行yarn cleanup即可。当前项目暂不接受 PR如有建议可以直接提交 Issue。七、常见问题FAQQVirgil 字体免费吗A免费。采用 SIL OFL 1.1 协议个人与商业用途均可。QVirgil 和 Excalifont 有什么区别AExcalifont 是 Excalidraw 新的默认手写字体Virgil 是它的前身。两者风格接近Virgil 依然可独立使用。Q中文能用 Virgil 字体吗AVirgil 不包含中文字形中文会回退到系统字体但英文、数字和标点会显示手写体适合混排场景。结语从 Excalidraw 的白板手绘体验出发Virgil 手写字体凭借其自然、亲切的字形成为开源字体圈里一个独特的存在。无论你是想复刻白板工具的视觉风格还是只想给页面加点人手写的温度下载这款字体、按本文的教程配置好 font-face几分钟就能搞定。趁它还在赶紧收藏一份吧【免费下载链接】virgilThe old-font that powered Excalidraw. Now replaced by Excalifont.项目地址: https://gitcode.com/gh_mirrors/vi/virgil创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考