前端CLI开发工具【免费下载链接】fontsourceSelf-host Open Source fonts in neatly bundled NPM packages.项目地址https://gitcode.com/gh_mirrors/fo/fontsource点击查看免费下载Batang 是一款随 Windows 95 首发、面向韩文长文阅读场景设计的 myeongjo明体风格衬线字体在 Fontsource 仓库中以batang为家族标识收录。本文以其家族描述文档registry/data/families/google/batang/description.en-US.md为核心结合仓库中的 family.json、distribution.json 等元数据与分发配置从字体设计定位、技术规格、许可、子集划分到 npm/CDN 两种前端引入方式为读者提供一份可直接落地的前后端完整解读。Batang 字体概览韩文明体家族的经典成员Batang韩文바탕意为基础/底衬是一款知名的 myeongjo明体风格衬线字体是随 Windows 95 操作系统首次发布的韩文系统字体之一。在字体分类上它属于衬线体serif——韩文语境下的明体Myeongjo对应中文的宋体一类笔画末端带有明显的装饰性衬线适合正文排版。家族描述文档明确指出它被设计用于长文本阅读long-form text use场景以最优先的可读性与清晰度为目标。在 Fontsource 仓库的元数据中该家族的基本事实如下见 registry/data/families/google/batang/family.json字段值说明familyBatang家族名对应 npm 包名fontsource/batangclassifications[serif]字体分类衬线体designerHanYang IC Co.设计方dateAdded2024-05-15收录进 Fontsource 仓库的日期primaryScriptKore主书写系统韩文ISO 15924 代码statusactive家族当前处于活跃维护状态其中primaryScript字段的取值由 registry/scripts/schema.ts 中的scriptSchema约束/^[A-Z][a-z]{3}$/即标准的 ISO 15924 四位脚本代码。设计定位为长文阅读优化的明体排版家族描述的核心论断是 Batang was designed for optimal readability and clarity for long-form text use——即为了长文阅读的最优可读性与清晰度而设计。这一点决定了它的使用场景画像适合韩文正文、书籍/文档排版、长篇文章页面属于正文字体text face而非展示字体display face字形整体规整、笔画对比适中明体衬线结构在屏幕与印刷媒介上都保留了传统韩文排版的阅读习惯。值得注意的是family.json 的inspection源码检视字段给出了该字体实际的技术实现细节fontVersionVersion 2.21glyphs22,772个字形codepoints20,579个已映射的 Unicode 码点outlineglyfTrueType 轮廓而非 CFF 曲线features.gsub包含vert竖排替换特性说明字体为竖排排版场景保留了 OpenType 支持weight/style400 / normal即单一常规字重。这些检视数据由仓库的 inspection 流程生成其结构同样定义在 registry/scripts/schema.ts 的sourceInspectionSchema中glyphs必须为正整数、outline枚举glyf/cff/cff2/bitmap等。拉丁字符形态Batang 与 BatangChe 的差异化定位家族描述中特别强调了一个容易被忽略的细节This version includesproportionalLatin characters. For a version withmonospace, half-widthLatin characters, see BatangChe.这句话点明了 Batang 家族内部两个版本的互补关系Batang韩文字形为明体衬线拉丁字符采用比例宽度proportional——即i与w宽度不同与英文常规排版一致混排时视觉更自然BatangCheChe 为韩语체即体拉丁字符采用**等宽、半宽monospace, half-width**形式适合需要对齐的场景如代码、表格、数字列。BatangChe 的描述文档registry/data/families/google/batangche/description.en-US.md与 Batang 互为对照措辞几乎一致仅拉丁字符形态相反并反向指引回 Batang。两个家族在 Fontsource 中作为独立的 npm 包维护fontsource/batang与fontsource/batangchefamily.json 均登记为 HanYang IC Co. 设计、serif分类、OFL-1.1 许可。因此选择建议非常简单中韩文混排、追求自然排版效果选 Batang需要在等宽对齐场景如技术文档、代码段使用韩文选 BatangChe。许可证与来源溯源OFL-1.1 与上游项目许可协议Batang 以SIL Open Font License 1.1OFL-1.1授权完整许可文本见 registry/data/families/google/batang/license.txt版权归属为 Copyright 2024 The Batang and Gungsuh Project AuthorsBatang 与 Gungsuh 联合项目后者即同源的 Gungsuh 明体家族。family.json 中license字段记录了idOFL-1.1attribution版权声明原文url官方许可文本链接。OFL-1.1 的核心要点包括字体可自由使用、研究、修改与再分发但不得单独售卖字体本身衍生字体必须沿用同一许可使用字体排版的文档不受许可限制。来源溯源provenance字段记录了该字体在 Fontsource 中的入库快照来源repositorygoogle/fonts上游字体仓库目录ofl/batangrevision固定到具体 commit9295d784...保证可复现typegithub。同时project字段指向作者维护的上游项目googlefonts/batang及其 revision6c1e09f9...。在 api/shared/registry.ts 中RegistryFamilyDetailSchema对provenance与project的语义做了区分前者是Fontsource 摄入的快照后者是作者维护的上游项目。这种上游项目 固定快照的双重溯源结构是 Fontsource 保证字体可审计、可复现的基础设计。分发形态静态字重与子集划分Batang 是静态字体家族不提供 variable 可变字体包这一点由 registry/data/families/google/batang/distribution.json 明确声明static仅一个变体——normal样式、400字重与 inspection 检视结果一致未声明variable字段因此在 Fontsource 中只有fontsource/batang静态包不存在fontsource-variable/batang。该文件的 schema 由 registry/scripts/schema.ts 的familyDistributionSchema定义其.refine()规则要求必须声明 static 或 variable 之一且static数组不可为空。字符子集subsetsdistribution.json的characters部分声明了 Batang 的字符切片方式defaultSubsetkorean——默认子集为韩文slicing{ definition: korean-web, subset: korean }——韩文子集使用korean-web切片定义即面向 Web 的韩文常用字集切片定义文件见 registry/data/subsets/korean-web.json将庞大的韩文字形切分为可增量加载的 slicessubsets完整列表subset iddefinitioncyrilliccyrillicgreekgreekkoreankoreanlatinlatinlatin-extlatin-ext这与源码检视中的unicodeRange相互印证字体实际覆盖韩文音节区UAC00-D7A3、谚文字母区U3131-318E、U1100-11F9、片假名/平假名、大量 CJK 汉字U4E00起的大段区间、拉丁、希腊、西里尔、全角/半角符号等。默认子集取korean意味着不做手动选择时生成 CSS 的font-face会以韩文切片为主并通过unicode-range让浏览器按需下载。在 Web 项目中引入 Batangnpm 包方式Batang 无 variable 包因此直接使用静态包。安装与引入步骤依据 website/docs/getting-started/install.mdx1. 安装使用 pnpm / npm / yarn 安装npm install fontsource/batang2. 引入在应用入口文件如src/main.tsx、src/main.ts中导入。最简单的方式是根导入默认包含400常规字重import fontsource/batang;如需显式按字重/样式导入Batang 当前仅 400 normal写法如下未来若家族扩展字重可同样套用import fontsource/batang/400.css;注意正常样式导入不会包含斜体变体Batang 家族本身也没有 italic 变体distribution.json 的static中仅normal。3. 在 CSS 中使用body { font-family: Batang, serif; }生成 CSS 基于unicode-range与子集切片工作默认导入会引用korean-web切片浏览器只下载页面实际用到的字符片段无需手动挑选子集。若项目明确需要某个子集也可按子集显式导入如import fontsource/batang/korean.css。4. TypeScript 项目的可选配置若 TypeScript 开启了noUncheckedSideEffects并对 CSS 导入报错可创建全局声明文件如src/globals.d.tsdeclare module *.css; declare module fontsource/* {} declare module fontsource-variable/* {}使用 Vite 等自带 CSS 导入处理的打包器通常无需此步骤。CDN 方式版本化样式表与字体文件除 npm 自托管外Fontsource 通过 jsDelivr 提供 CDN 分发详见 website/docs/getting-started/cdn.mdx。URL 均按 SemVer 版本化CSS 样式表格式https://cdn.jsdelivr.net/fontsource/css/{id}{version}/{file}.cssBatang 对应的示例!-- 默认样式表含全部子集声明 -- link relstylesheet hrefhttps://cdn.jsdelivr.net/fontsource/css/batanglatest/index.css / !-- 仅韩文子集、压缩版 -- link relstylesheet hrefhttps://cdn.jsdelivr.net/fontsource/css/batanglatest/korean.min.css /生产环境建议使用精确版本号如5.x.x精确版本不可变、可获得长期缓存浮动版本latest、5、5.2适合需要自动升级的场景但缓存较短。字体文件格式静态字体 URL 模式为https://cdn.jsdelivr.net/fontsource/fonts/{id}{version}/{subset}-{weight}-{style}.{extension}Batang 为 400 normal 静态字体对应https://cdn.jsdelivr.net/fontsource/fonts/batanglatest/korean-400-normal.woff2小结Batang 是 Fontsource 中一个小而完整的静态字体家族样本单一 400 字重、明体衬线风格、韩文为主并覆盖拉丁/希腊/西里尔等脚本通过korean-web切片实现 Web 按需加载。与 BatangChe 的比例/等宽拉丁字符差异为不同排版场景提供了明确的选择依据OFL-1.1 许可与双重溯源结构上游项目 固定快照保证了可自由使用与可复现性。无论是通过 npm 自托管打包还是借助 jsDelivr CDN 快速引入Batang 都能为韩文长文阅读场景提供一份兼顾可读性与清晰度的经典字体方案。想深入了解其数据结构定义可继续阅读 registry/scripts/schema.ts注册表 schema与 api/shared/registry.tsAPI 层家族详情结构实际引入方式可参考 install.mdx 与 cdn.mdx。赞分享前端CLI开发工具【免费下载链接】fontsourceSelf-host Open Source fonts in neatly bundled NPM packages.项目地址https://gitcode.com/gh_mirrors/fo/fontsource点击查看免费下载相关推荐Albert Sans 字体家族解析几何无衬线字体的 Fontsource 分发与前端集成指南Albert Sans 字体家族解析几何无衬线字体的 Fontsource 分发与前端集成指南 导读 Albert Sans 是一款现代几何无衬线geome前端CLI开发工具Fontsource 字体家族解析Aleo——兼具个性与可读性的可变石板衬线字体Fontsource 字体家族解析Aleo——兼具个性与可读性的可变石板衬线字体 Aleo 是 Fontsource 开源字体注册表中收录的一款现代石板衬线前端CLI开发工具fontsource 字体家族解读Gen Jyuu Gothic 圆体日文无衬线体的来源、字重与 OpenType 特性fontsource 字体家族解读Gen Jyuu Gothic 圆体日文无衬线体的来源、字重与 OpenType 特性 本篇指南以 fontsource 仓前端CLI开发工具上一篇10分钟快速上手基于google-api-php-client的Google Classroom API集成指南下一篇解锁多语言开发的终极潜力jsii如何重塑编程新范式创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考