SuperAPI AI 工具集

geist

前端与建站

查看项目

更新于 10-16 09:48

技能介绍

用途:Geist 是 Vercel 的开源字体家族,面向开发者与界面,用于 Next.js 界面的排版与代码展示。含 Geist Sans(现代无衬线,用于导航、正文、按钮、标题、表单、表格、对话框)、Geist Mono(等宽,用于代码、快捷键、终端输出、提交哈希、金额、指标、时间戳、环境变量键、功能开关)和 Geist Pixel(像素风展示字体,仅用于标题、标志等装饰场景,不可用于正文或设置界面)。

主要能力:可变字体单文件支持 100–900 全部字重;自托管随应用打包,无外部请求;通过 CSS 变量 --font-geist-sans 与 --font-geist-mono 灵活调用;针对 Next.js 优化,兼容 next/font 实现零布局偏移加载;1.7.0 重做了西里尔字母支持。Geist Pixel 提供 Square、Grid、Circle、Triangle、Line 五种基于不同几何原型的变体。

使用方式:安装命令 npm install geist。在 App Router 中从 geist/font/sans 与 geist/font/mono 导入,将 GeistSans.variable 与 GeistMono.variable 加到 html 的 className;Tailwind 中在配置里将 sans、mono 映射到对应 CSS 变量,组件内用 font-sans、font-mono。注意导入路径为 geist/font/sans 和 geist/font/mono,而非 geist/font。排版建议:标题紧凑字距、克制字重,正文可读,数值与代码用 Mono,层级优先于颜色装饰,避免全站默认 text-base。

限制与注意:新版编码连字默认关闭,已移至 Stylistic Set 11,需显式启用,如 VS Code 中设置 "editor.fontLigatures": "'ss11'",CSS 中用 font-feature-settings: 'ss11' 1;。避免混用多个无关字体、用 Mono 排长段落、滥用 Pixel 或全部标题加粗。GeistSans 默认使用 latin 子集,其他子集需在 next.config.js 配置。具体价格、平台与商用条款资料未提供。