尧图建网站 尧图建网站 YAOTU WEB BUILD 免费咨询
ARTICLE DETAIL

资讯详情

深耕网站建设与建站编程的一线实战洞察。

未来荧黑:这款开源中文字体如何让你亲手定制出44款变体

未来荧黑:这款开源中文字体如何让你亲手定制出44款变体 未来荧黑这款开源中文字体如何让你亲手定制出44款变体【免费下载链接】glow-sansSHSans-derived CJK font family with a more concise modern look. 未来荧黑·未來熒黑·ヒカリ角ゴ基于思源黑体改造拥有粗度和宽度系列更加简明现代的超大字体家族。项目地址: https://gitcode.com/gh_mirrors/gl/glow-sans打开设计稿你多半遇过这种尴尬思源黑体可靠但略显标准商业字体好看却要掏授权费想要一点个性就得在几十款字体间来回切换。如果你恰好也在找一款开源中文字体——免费可商用、造型现代、还能亲手调节每个笔画——未来荧黑Glow Sans就是为这个痛点而生的答案。它基于思源黑体改造而来却把字体设计变成了一场可视化参数游戏。往下读十分钟你就能用它排出第一张满意的版面。值得入坑的四个理由未来荧黑强在哪一个字重家族五种宽度思源黑体的 7 个字重被扩展为 9 个字重100 到 990再乘以压缩、窄、常规、宽、扩展 5 种宽度凑齐整整 44 款字体从正文到海报标题一网打尽。⚡拉滑块就能设计字体项目内置了一个 Web 可视化调参工具中宫、重心、撇捺软硬、字重粗细……全部变成滑块与开关改动即时生效。简繁日三语通吃简体中文、繁体中文、日文全覆盖并精心匹配 Fira Sans 与 Raleway 两款西文字体中英混排不打架。真正免费商用字体文件以 SIL Open Font License 1.1 发布个人作品、商业项目都能放心使用。未来荧黑官方样张名称标识与東字的重复排列直观展现字体的简明现代气质两条路快速用上未来荧黑路线 A不写代码装好即用直接下载发布版字体文件解压后按系统惯例安装即可Windows 放入C:\Windows\FontsmacOS 双击用字体册安装Linux 则丢进~/.local/share/fonts。装好后在任意软件的字体系列里搜索Glow Sans就能找到它。路线 B拉源码本地预览调参工具如果你想亲眼看看参数化变形的过程复制仓库并在本地起一个静态服务# 克隆项目仓库 git clone https://gitcode.com/gh_mirrors/gl/glow-sans cd glow-sans # 安装前端依赖提供 canvas 等图像处理能力 npm install # 启动本地预览服务器默认监听 8080 端口 npm run serve浏览器打开http://localhost:8080你就能在 demo/ 提供的交互界面里拖滑块、勾开关实时观察单个汉字的变化——这是理解未来荧黑工作原理最直观的入口。把字形掰弯的秘密参数化建模与滤镜未来荧黑没有借助任何字体设计软件它走的是建模 滤镜的算法路线原理可以这样理解字形模型GlyphModel先把思源黑体里每个字的轮廓提取出来转成一套可被算法操作的结构化数据存放在 src/glyph-manipulate/GlyphModel.js。模型滤镜ModelFilters对字形做形体级的宏观变形比如整体拉宽、横竖笔画增粗、中宫缩放、重心抬升等。后处理滤镜PostFilters对轮廓做笔画级的细节修饰比如去掉口部的装饰脚、把撇捺末端压平、调整竖弯钩的弧线张力。整个流水线在 scripts/apply-filter.js 中串联读入字形模型 一份参数 JSON依次套用滤镜最后输出新轮廓。参数文件就放在 parameters/glow/ 下每个数字对应一个字重。{ weight: 1.08, // 字重微调数值越大笔画越粗 width: 1, // 宽窄1 为常规越小越窄 counter: 0.96, // 中宫值越小结构越紧凑 gravity: 1.03, // 重心数值高则重心偏上 softness: 0.93, // 撇捺软硬越小越硬朗 dotsoftness: 0.25, // 点画软硬控制点的圆润程度 feetremoval: true, // 是否去除口类部件的装饰脚 flattenends: 0.75, // 撇捺勾末端的平直化程度 hooktension: 0.5, // 竖弯钩的弧线张力 latinscale: 1.08 // 配套西文的缩放比例 }这些参数正是 44 款字体差异的来源。官方还准备了 parameters/normal.tsv 这类 TSV 权重表一行一个字重配合 parameters/tsv2json.js 可一键批量转成 JSON方便统一管理整族参数。未来荧黑上与思源黑体下的逐字对比中宫更收敛、重心重新配置、笔画更简洁平直三个实战场景把参数用到点子上场景一网页与 App 的混排体验把构建好的字体文件丢进项目静态资源目录用font-face声明即可注意 font-weight 对应 100–990 的数值区间/* 声明未来荧黑简体常规字重 */ font-face { font-family: Glow Sans SC; src: url(fonts/GlowSansSC-Regular.otf) format(opentype); font-weight: 100 990; /* 覆盖整个可变字重区间 */ font-display: swap; /* 加载期间先用系统字体兜底 */ } body { font-family: Glow Sans SC, PingFang SC, sans-serif; line-height: 1.6; }场景二中文为主的品牌视觉品牌物料里标题与正文常需要同一气质、不同份量。直接利用宽度系列标题用扩展宽度 高字重正文用常规宽度 中字重既统一又分层。日文场合它同样有对应版本观感与简体中文一脉相承。ヒカリ角ゴ未来荧黑日文版与思源黑体日文版的对比多语言风格保持一致场景三用 demo 调参导出自己的专属参数在npm run serve启动的页面上把字调到满意后点击保存会导出一份 JSON它同时也会编码进 URL方便分享给同伴继续微调。把这份 JSON 放进parameters/glow/目录构建时即被采用。踩坑自查手册高频问题速查问构建中途报内存溢出答字形数据量很大给 Node 提高内存上限再跑即可例如NODE_OPTIONS--max-old-space-size8192 npm run build-family。问某个字显示缺失或异常答部分字符如Enclosed CJK Letters And Months在宽度变形上难度过大被暂时剔除同时暂不支持ccmp特性。属已知取舍可先确认该字符是否在支持范围内。问参数调了但字形没啥变化答先确认参数 JSON 路径是否正确若用的是源码构建可重新生成后处理流程后再试避免使用旧缓存产物。问它是可变字体Variable Font吗答不是。未来荧黑通过对思源黑体做形变来生成不同字重与宽度每次变形都产出独立的静态字体文件。高阶玩法从零构建整套字体家族想更进一步你可以完整走一遍原料 → 参数 → 字体的生产链路# 1. 初始化字体资源下载思源黑体、Fira Sans、Raleway 原始字体 npm run init-fonts # 2. 安装 Python 侧依赖字形模型转换等脚本需要 pip install -r requirements.txt # 3. 构建整个字体家族44 款字体 npm run build-family构建入口脚本在 scripts/ 目录包括汉字字集抽取、模型提取、样本生成等环节。想扩展玩法可以从这两处入手一是修改 parameters/ 下的 TSV 权重表重新批量生成参数二是直接改造 ModelFilters.js 与 PostFilters.js为字形流水线注入全新的滤镜逻辑——比如自创一种转角处理风格。每一步都有对应脚本支撑详细说明见 docs/README-en.md。出发吧定制属于你的字体把今天的内容收进脑海你只需要记住三件事 未来荧黑是一款免费可商用的开源中文字体9 字重 × 5 宽度 44 款简繁日三语可用 它的灵魂是参数化变形Web 可视化工具让你零基础也能调出专属字形 参数、脚本、源码全开放从安装到自定义滤镜进阶路径清晰完整。下一份需要多一点个性的设计稿别再让默认字体替你决定气质——打开终端克隆项目亲手把笔画调到让你心动的那个刻度吧。【免费下载链接】glow-sansSHSans-derived CJK font family with a more concise modern look. 未来荧黑·未來熒黑·ヒカリ角ゴ基于思源黑体改造拥有粗度和宽度系列更加简明现代的超大字体家族。项目地址: https://gitcode.com/gh_mirrors/gl/glow-sans创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表