3 分钟上手如何在网页中用 font-face 免费嵌入 Virgil 手写字体【免费下载链接】virgilThe old-font that powered Excalidraw. Now replaced by Excalifont.项目地址: https://gitcode.com/gh_mirrors/vi/virgilVirgil 手写字体是一款免费开源、可商用的网页手写字体它曾是著名白板工具 Excalidraw 的官方字体由设计师 Ellinor Rapp 创作。现在这个字体项目已完全开源任何人都可以把它嵌入自己的网站、博客或在线工具让页面瞬间拥有自然的手写质感。本教程将带你用最少的代码3 分钟搞定 font-face 字体嵌入全程免费、无需任何框架。为什么选择 Virgil 手写字体在动手之前先看看这款字体到底好在哪手写质感笔画自然流畅非常适合笔记、白板、批注、卡片等场景免费商用采用 SIL Open Font License 1.1 开源协议个人和商业项目均可放心使用体积小巧WOFF2 格式仅约 60KB加载飞快几乎不影响网页性能字符覆盖全支持拉丁字母、希腊字母、西里尔字母、数字及常用符号如果想让自己的产品拥有 Excalidraw 那种轻松、亲切的视觉风格Virgil 手写字体是绝佳选择。获取 Virgil 字体文件只需一个文件 嵌入网页只需要字体文件Virgil.woff2。你可以通过克隆项目仓库获得全部资源git clone https://gitcode.com/gh_mirrors/vi/virgil克隆后在项目根目录就能找到Virgil.woff2字体文件。当然你也可以直接下载这个 woff2 文件使用无需其他依赖。提示如果你需要修改字体或二次开发项目里的src/Virgil.vfj是 FontLab 源文件字体工程文件普通使用场景完全用不到它。使用 font-face 嵌入 Virgil 字体的完整步骤 整个嵌入过程只有三步照着做就能生效。项目自带的index.html里就有一份可直接参考的完整示例。第一步把字体文件放进项目目录将Virgil.woff2放到你的网站静态资源目录例如放在fonts/或项目根目录和index.html同级即可。第二步用 font-face 声明字体规则在 CSS 中或 HTML 的style标签内添加如下声明font-face { font-family: Virgil; src: url(Virgil.woff2); font-display: swap; }注意url()中的路径要和你放置字体文件的目录保持一致。font-display: swap能让字体在加载完成前先用系统字体占位显示避免页面文字不可见的白屏闪烁这也是index.html中的官方写法。第三步用 font-family 应用到页面元素声明完成后把Virgil作为字体族名称应用到任意元素上即可.card { font-family: Virgil, sans-serif; }像这样你的标题、正文、按钮或整个页面就都会以 Virgil 手写字体显示了。字体族名可以自定义但建议保持和 font-face 声明中的名称一致并始终在后面加上一个通用字体作为兜底。免费商用与授权说明 ✅很多开发者关心版权问题这里可以放心Virgil 字体遵循SIL Open Font License 1.1OFL项目中的LICENSE.md有完整协议文本。简单来说你可以免费使用、复制、修改和再分发该字体将字体嵌入网站、软件或产品中包括商业用途打包字体随软件一起分发只需注意不能单独出售字体文件本身修改后的衍生字体也必须保持同样的开源协议。满足这些条件即可放心大胆地用。提升加载速度的 3 个小技巧 ⚡字体虽然只有 60KB但几个细节能让体验更好善用 font-display: swap如上文所示让文字先以系统字体渲染避免阻塞页面提前预加载在 HTML 中加入link relpreload hrefVirgil.woff2 asfont typefont/woff2 crossorigin加快首屏字体就绪速度优先使用 WOFF2它是目前压缩率最高的网页字体格式浏览器兼容性已足够广泛常见问题 FAQ QVirgil 字体支持中文吗A不支持。Virgil 主要覆盖拉丁、希腊、西里尔字母中文场景建议配合中文字体使用如font-family: Virgil, PingFang SC, sans-serif;。Q一定要用 woff2 格式吗A现代浏览器都支持 WOFF2直接用即可如需兼容更老的浏览器可额外转换出 woff 或 ttf 格式并在 font-face 中依次列出。Q修改字体后还能叫 Virgil 吗AOFL 协议规定衍生字体不能使用保留字体名 Virgil修改后请另起新名称。总结 Virgil 手写字体凭借其免费商用授权、超小的文件体积和出色的手写质感是给网页添加人情味的高性价比之选。只需拿到Virgil.woff2、写一段 5 行的 font-face 规则、再设置一个 font-family3 分钟内就能让网站拥有 Excalidraw 同款手写风格。如果你正在寻找一款开箱即用的网页手写字体不妨现在就动手试试吧【免费下载链接】virgilThe old-font that powered Excalidraw. Now replaced by Excalifont.项目地址: https://gitcode.com/gh_mirrors/vi/virgil创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考