前端CLI开发工具【免费下载链接】fontsourceSelf-host Open Source fonts in neatly bundled NPM packages.项目地址https://gitcode.com/gh_mirrors/fo/fontsource点击查看免费下载Geom 是一款由 Thanos Poulakidas 设计的当代几何无衬线字体在经典几何构型与细腻动感之间取得平衡。本文以 Fontsource 仓库中 Geom 字体的官方介绍文档article.en-US.md为主体结合其 family.json、distribution.json 与 license.txt 等注册表数据系统讲解它的设计理念、字重与斜体体系、wght 可变轴、OpenType 排版特性、字符覆盖范围以及如何通过 Fontsource 的 NPM 包和 CDN 在真实项目中安装与使用。读完本文你将能准确判断 Geom 是否适合你的标题或正文场景并掌握它在 Vite、Webpack 等打包器下的完整接入方法。字体档案从注册表数据看 Geom在深入设计细节之前先通过 Fontsource 注册表元数据建立对 Geom 的整体认知。以下事实均来自 family.json属性值字体族名称Geom设计者Thanos Poulakidas分类classificationsans-serif风格标签tagssans/geometric许可证SIL Open Font License 1.1OFL-1.1加入 Fontsource 注册表日期2025-11-14上游来源provenancegoogle/fonts 仓库的ofl/geom目录源码最后修改时间2026-03-03字体版本Version 1.102轮廓格式glyfTrueType 曲线字形数 / 码位数516 个字形499 个码位该家族由 Google Fonts 生态自动同步进入 Fontsource因此它在 Fontsource 中的 provider 标识为google分发时保持与上游一致的版本锁定不会因为 Google 侧无通知更新而影响线上项目README.md 中阐述了自托管与版本锁定的价值。设计理念几何精确与动态表达的结合根据 article.en-US.md 的官方描述Geom 的定位可以概括为三点源自经典几何传统作为几何无衬线字体它的字形建立在明确的几何结构之上具有清晰、理性的骨架引入克制的动态元素在不破坏几何精确性的前提下通过细微的动态处理让笔画与字腔更具节奏感和能量使其区别于纯粹、严格几何构造的同类字体获得性格与运动感兼顾展示与正文虽然它主要为展示场景标题、品牌、大号标题而设计但其几何清晰度保证了优秀的可读性即使在更小的字号和较长文本中也能保持视觉吸引力。官方文档特别强调Geom 是几何精确性与精炼动感的结合体在结构与活力之间取得平衡最终呈现一种既经典又现代的气质。从注册表元数据看这一设计定位也与它的sans/geometric风格标签family.json完全吻合。字重与斜体体系Light 到 Black 的完整家族官方文档明确指出Geom 提供Light 到 Black 的七档字重每一档都经过精心调整的比例以保证整个家族的一致性并且每一个正体字重都配有对应的真斜体True Italic从而支持清晰的排版层级与强调表达。将官方描述与 distribution.json 中的静态分发清单对照可以得到完整对应关系字重值通用字重名称正体normal斜体italic300Light✅✅400Regular✅✅500Medium✅✅600SemiBold✅✅700Bold✅✅800ExtraBold✅✅900Black✅✅也就是说静态分发共包含14 个变体7 个字重 × normal / italic 两种风格。这在注册表数据中体现为distribution.json的static数组从300 / normal到900 / italic共 14 条记录。可变字体能力wght 轴的连续控制官方文档提到 Geom 同时提供可变字体variable font版本赋予设计师对字重过渡的流畅控制。注册表的字体检测inspection数据进一步证实了这一能力可变轴wght字重轴取值范围300 到 900默认值400该信息同时记录在 family.json 的axes检测结果与weight字段中。而 distribution.json 的variable分发清单显示Geom 的可变字体按normal 与 italic 两种风格分别提供variable: [ { axisKey: wght, style: italic }, { axisKey: wght, style: normal } ]这意味着开发者可以在 300–900 之间任意取值而不必局限于七个静态档位斜体同样拥有完整的可变字重范围。上游源文件为两个 TrueType 可变字体文件Geom[wght].ttf约 105 KB与Geom-Italic[wght].ttf约 108 KB。字符集与语言覆盖拉丁扩展与希腊文从 family.json 的检测数据与 distribution.json 的子集定义可以确认默认子集defaultSubsetlatin可用子集subsetslatin、latin-ext拉丁扩展、greek希腊文字符覆盖unicodeRange覆盖基本拉丁U0020 到 U007E、拉丁扩展、声调符号U0300 系列、希腊文U0374 到 U03CF、常用标点、货币符号U20AC、数字与分数U215B-215E、数学符号等区间共 499 个码位语言覆盖family.json 的languages字段列出了数百个语言标签绝大多数以_Latn拉丁文字为主并包含el_Grek希腊语。这意味着 Geom 可以胜任英文、西欧与中欧语言如法语、德语、西班牙语、波兰语、土耳其语、越南语等拉丁扩展需求以及希腊文的排版但不包含中日韩CJK等非拉丁文字字形。OpenType 排版特性丰富的字符级能力Fontsource 的注册表检测inspection记录了 Geom 支持的全部 OpenType 特性family.json分为两类GSUB字形替换特性特性标签用途aalt全部备选字形访问case大小写敏感形式ccmp组合字形分解dligdiscretionary ligatures装饰性连字frac分数形式liga标准连字locl地区性变体ordn序数字形式sups上标GPOS位置调整特性特性标签用途kern字距微调mark变音符号定位mkmk变音符号之间的定位其中liga、dlig等连字特性与kern字距微调让 Geom 在大号标题等展示场景中能呈现更精细的排版效果frac、sups、ordn则为表格、脚注、序数等正文场景提供了实用支持。许可证SIL Open Font License 1.1Geom 采用SIL Open Font License 1.1OFL-1.1完整许可文本保存在 license.txt 中版权声明为Copyright 2022 The Geom Project Authors该许可证允许免费使用、研究、修改与再分发字体包括与软件捆绑、嵌入和销售前提是字体本身不被单独出售、衍生作品需保留版权声明与许可证文本且不得在未获书面许可时使用保留字体名称。值得注意的是OFL 的约束只针对字体软件本身不适用于使用字体创作生成的文档内容。在实际商用或分发 Geom 时请务必阅读 license.txt 全文以确认条款。在 Fontsource 中安装与使用 GeomFontsource 将 Geom 打包为可直接通过包管理器安装的 NPM 包。依据官方安装指南install.mdx接入步骤如下。1. 安装包由于 Geom 支持可变字体官方推荐优先使用可变字体包它在连续字重下通常比多个静态文件更省体积npm install fontsource-variable/geom或使用 pnpm / yarnpnpm add fontsource-variable/geom yarn add fontsource-variable/geom如果项目需要固定的字面例如只使用某个具体字重则使用静态包npm install fontsource/geom2. 导入字体在应用的入口文件或页面组件中导入包。默认导入会提供 normal 风格、完整字重范围300–900的可变字面并利用unicode-range让浏览器只下载页面实际用到的字符集通常无需手动选择子集import fontsource-variable/geom;如果需要斜体可变字面导入对应的 CSS 文件可变字重的导入语法参考 variable.mdximport fontsource-variable/geom/wght-italic.css;静态包则按需按字重与风格分别导入注意正体导入不会包含同字重的斜体import fontsource/geom; // 默认字重 400 import fontsource/geom/300.css; // Light import fontsource/geom/900.css; // Black import fontsource/geom/900-italic.css; // Black 斜体3. 在 CSS 中使用导入后即可通过字族名引用。Fontsource 对可变字体的预览命名遵循{Family} Variable约定见 font-preview.ts因此建议使用body { font-family: Geom Variable, sans-serif; }配合可变轴做精细控制时可显式设置font-variation-settings.heading { font-family: Geom Variable, sans-serif; font-weight: 700; /* 标准方式设置字重 */ font-variation-settings: wght 650; /* 直接指定 wght 轴数值 */ }对于需要兼容不支持可变字体的旧浏览器的场景官方指南variable.mdx建议使用supports提供静态回退body { font-family: Geom, sans-serif; font-weight: 500; } supports (font-variation-settings: normal) { body { font-family: Geom Variable, sans-serif; font-weight: 500; font-variation-settings: wght 500; } }4. TypeScript 项目补充声明如果项目使用 TypeScript 且开启了noUncheckedSideEffectImports直接导入 CSS 可能会报类型错误。可在src/globals.d.ts中添加环境声明参考 install.mdxdeclare module *.css; declare module fontsource/* {} declare module fontsource-variable/* {}使用 Vite 或自带 CSS 处理能力的框架通常无需此步骤。5. 通过 CDN 引入非打包器场景对于需要稳定静态资源链接、不便引入打包器的场景Fontsource 官方 CDN 文档cdn.mdx定义了如下 URL 模式可变样式表https://cdn.jsdelivr.net/fontsource/css/{id}:vf{version}/{file}.css静态样式表https://cdn.jsdelivr.net/fontsource/css/{id}{version}/{file}.css可变字体文件https://cdn.jsdelivr.net/fontsource/fonts/{id}:vf{version}/{subset}-{axes}-{style}.woff2静态字体文件https://cdn.jsdelivr.net/fontsource/fonts/{id}{version}/{subset}-{weight}-{style}.{extension}按此规范Geom 对应的示例为版本号可替换为实际发布版本latest表示浮动版本link relstylesheet hrefhttps://cdn.jsdelivr.net/fontsource/css/geom:vflatest/index.css /link relstylesheet hrefhttps://cdn.jsdelivr.net/fontsource/css/geom:vflatest/wght-italic.min.css /官方文档建议生产环境优先使用不可变的精确版本号如5.2.7形式以获得长效缓存与可复现的部署浮动版本latest、5、5.2缓存更短且不会立即更新仅应在有意自动升级时使用。无论如何请以实际发布的版本号为准。这些数据从哪里来注册表文件与官网渲染链路Geom 在 Fontsource 中呈现的完整画像由一组注册表数据文件驱动article.en-US.md官方介绍正文即本文的核心素材来源family.json设计者、分类、许可证、上游来源、检测数据轴、特性、字形数、字符区间、语言列表等结构元数据distribution.json静态与可变字面的具体分发清单license.txtOFL-1.1 许可证全文。在官网字体详情页的 About 页签中FamilyAbout.tsx 负责读取这些内容并渲染由于 Geom 目录只提供了article.en-US.md而没有独立的 description 文件因此该文章会被直接用作 About 简介的正文渲染组件 RegistryMarkdown.tsx 会把文中的hr分隔线移除、将img图片渲染为空原文引用的两张字形示例图不会在网页中展示而字号预览specimen则由 font-preview.ts 根据可变轴信息动态生成font-face与预览样式。小结Geom 是一套结构完整、定位清晰的当代几何无衬线字体七档字重与配套真斜体覆盖了从标题到正文的常见需求wght可变轴300–900提供了连续的字重控制拉丁扩展与希腊文子集保证了较广的欧洲语言覆盖而kern、liga、frac、sups等 OpenType 特性进一步提升了实际排版品质。借助 Fontsource 提供的fontsource-variable/geom与fontsource/geom包你可以将它与常规 NPM 依赖一样管理实现版本锁定、离线可用、免第三方追踪的自托管字体加载方案。赞分享前端CLI开发工具【免费下载链接】fontsourceSelf-host Open Source fonts in neatly bundled NPM packages.项目地址https://gitcode.com/gh_mirrors/fo/fontsource点击查看免费下载相关推荐开源字体 Alata几何低对比度无衬线字体的设计解析与 Fontsource 自托管实践开源字体 Alata几何低对比度无衬线字体的设计解析与 Fontsource 自托管实践 Alata 是一款由 Spyros Zevelakis 设计、Ebe前端CLI开发工具Amethysta 字体全解析楔形衬线过渡衬线体的设计特性与 Fontsource 自托管实践Amethysta 字体全解析楔形衬线过渡衬线体的设计特性与 Fontsource 自托管实践 Amethysta 是专为低质量纸张印刷而设计的简约衬线字体前端CLI开发工具Hauora Sans 开源无衬线字体指南设计特性、OpenType 能力与 Fontsource 自托管实践Hauora Sans 开源无衬线字体指南设计特性、OpenType 能力与 Fontsource 自托管实践 Hauora Sans 是一款由 WCYS 前端CLI开发工具上一篇Hyperf 1.1 升级指南从 1.0 平滑迁移的完整改造清单下一篇AntiDupl终极指南三步快速清理电脑重复照片释放宝贵磁盘空间创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考