Hubot Sans 开源项目教程

尚绮令Imogen

于 2025-03-30 10:00:37 发布

阅读量342

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00600/article/details/146722236

Hubot Sans 开源项目教程

hubot-sans Hubot Sans, a variable font from GitHub 项目地址: https://gitcode.com/gh_mirrors/hu/hubot-sans

1. 项目介绍

Hubot Sans 是由 GitHub 开发的一款可变字体，它是 Mona Sans 的机器人侧Kick。这款字体设计带有更多的几何装饰，以赋予技术性和独特感，非常适合用作标题和引语。Hubot Sans 是与 Degarism 合作制作的，它采用可变字体技术，允许将字体的不同变体整合到单个文件中，并且被所有主流浏览器支持。

2. 项目快速启动

为了在您的项目中使用 Hubot Sans，请按照以下步骤快速启动：

首先，您需要在项目中包含 Hubot Sans 字体文件。建议使用 .woff2 格式的字体文件，因为它提供了更好的压缩和性能。

<!-- 在 HTML 文档的 <head> 部分添加以下代码 -->
<link rel="preload" href="Hubot-Sans.woff2" as="font" type="font/woff2" crossorigin>

接着，在 CSS 中定义 @font-face 规则，设置字体的权重和拉伸范围：

@font-face {
  font-family: 'Hubot Sans';
  src: url('Hubot-Sans.woff2') format('woff2 supports variations'), url('Hubot-Sans.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-stretch: 75% 125%;
}

html {
  font-family: 'Hubot Sans';
}

这样就可以在 HTML 文档中使用 Hubot Sans 字体了。