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

资讯详情

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

如何从零定制一款开源中文字体:未来荧黑终极上手指南

如何从零定制一款开源中文字体:未来荧黑终极上手指南 如何从零定制一款开源中文字体未来荧黑终极上手指南【免费下载链接】glow-sansSHSans-derived CJK font family with a more concise modern look. 未来荧黑·未來熒黑·ヒカリ角ゴ基于思源黑体改造拥有粗度和宽度系列更加简明现代的超大字体家族。项目地址: https://gitcode.com/gh_mirrors/gl/glow-sans你是不是也有这种感觉英文网站随手就能找到几百款风格迥异的漂亮字体可一到中文翻来覆去就是那几张老面孔。想给海报换个气质、给 App 换个更现代的排版却常常因为中文字体设计太专业而放弃。其实这条路已经有人替你打通了。未来荧黑Glow Sans就是一款基于思源黑体改造的开源 CJK 字体它通过参数化设计把设计一款字体从手工活变成了可调节的工程——9 种字重 × 5 种宽度共 44 款组合而且完全免费可商用。从思源黑体的骨里长出来的新面孔未来荧黑的故事要从思源黑体说起。思源黑体是 Adobe 和 Google 联手打造的开源字体覆盖简体中文、繁体中文和日文质量没得说但它只有 7 个字重、没有宽度变化风格也比较标准。未来荧黑做的事情相当于在思源黑体的骨架之上做了一次微整形字面更收敛、中宫更紧凑、重心重新排布笔画细节更干净利落。更妙的是这一切不是设计师逐字逐笔改出来的而是靠图像处理算法完成的。开发者先把字形轮廓转换成一种可形变的字形模型再通过参数驱动变形于是调字体这件事就从 Photoshop 式的精雕细琢变成了拧旋钮式的工程操作。你甚至不需要安装任何字体设计软件整个制作过程靠代码就能跑完。蓝底白字的家族展示图左侧是未来荧黑字样右侧铺满東字网格直观呈现其简明现代的字形气质。5 分钟看到定制效果想最快感受到这套字体的魅力普通人根本不用碰代码——直接去 Release 发布页下载对应字重的文件安装到系统字体目录Windows 是C:\Windows\FontsmacOS 是~/Library/FontsLinux 是~/.local/share/fonts然后在任何软件里选Glow Sans就能用。如果你对定制本身更感兴趣仓库里还藏着一个可视化调参 demo。把仓库克隆到本地后启动预览服务git clone https://gitcode.com/gh_mirrors/gl/glow-sans cd glow-sans npm install # 安装依赖 npm run serve # 启动本地预览浏览器访问 localhost:8080打开页面左边是参数滑块中间是实时字形预览拖一下滑块、字立刻变化所见即所得。这个 demo 本身也是作者用来确定字体参数的生产工具可以说是把工作台直接端到你面前了。想从源码完整构建整套字体的开发者则按npm run init-fonts下载字体素材→npm run build-family的顺序执行即可。像调音台一样调字体调字体和调声音其实是同一件事。录音棚里的调音台有很多旋钮音量、低音、高音、混响……每个旋钮管一个维度拧一点就有反应。未来荧黑的参数面板就是一座字体的调音台核心旋钮大约 16 个这里挑几个最常用的说weight字重相当于音量拧大笔画变粗拧小变细width宽度相当于左右声道的宽度控制字面宽窄counter中宫相当于中频密度值越小字的内部空间越紧整体越收敛gravity重心相当于高音与低音的配比改变字的视觉重心高低softness / dotsoftness柔软度相当于混响值越大笔画越圆润柔和feetremoval / endsremoval去脚去端相当于效果器开关决定要不要保留装饰性的衬脚。最直观的对照在仓库的对比图里同样是酉州两个字机械压缩出来的字笔画被挤变形而未来荧黑通过参数化调整宽度变窄了、笔画粗细却依然协调视觉上舒服得多。对比图从宽度、结构、重心、笔画四个维度展示了未来荧黑相对思源黑体的改进衬脚被移除、重心重新配置、笔画走向更平直干练。拿系统里自带的一组参数举个例子parameters/glow/500.json大致长这样注释就是每个旋钮在干嘛{ weight: 1.08, // 字重1 偏粗 width: 1, // 宽度1 为正常 counter: 0.96, // 中宫1 更收敛 gravity: 1.03, // 重心1 略高 flattenends: 0.75, // 笔画末端平直化程度 feetremoval: true // 是否移除装饰衬脚 }三个真实场景的改造实录与其背参数表不如看三个实际使用场景里遇到问题 → 拧哪几个旋钮 → 解决的小故事。场景一手机阅读太挤了。小屏上正文字号本来就小笔画一糊就难读。把width收到 0.95 左右让单行塞进更多字counter调到 0.98 略微收紧中宫增强辨识度再把dotsoftness调到 0.5 软化点画、减少屏幕上的毛刺感阅读体验立刻清爽一截。场景二印刷样张不够精神。印刷品需要更清晰的笔画区分度。把width放宽到 1.05、contrast提到 1.1 增强横竖笔画的对比flattenends给到 0.6 让收笔更利落同时保留feetremoval为 false——印刷场景下装饰衬脚反而是加分项能提升整版的精致感。场景三网页加载慢、字又平淡。网页里按字重分别引入不同文件配好font-face即可。中宫略收、字重选 400 或 500 的常规款当正文标题换 700 甚至更粗的字重整页立刻有了层次font-face { font-family: Glow Sans SC; src: url(fonts/GlowSansSC-Regular.woff2) format(woff2); font-weight: 400; /* 正文用常规字重 */ font-display: swap; }新手最容易踩的四个坑坑一构建到一半内存溢出。整套家族构建动辄数小时、还要求至少 4GB 可用内存。嫌慢或想省内存就只构建需要的子集——加参数-- --subset sc简体、tc繁体或j日文。真溢出了给 Node 加内存再跑NODE_OPTIONS--max-old-space-size8192 npm run build-family坑二装完发现某些字显示不出来。未来荧黑剔除了少量在宽度压缩时难以处理的字符比如带圈的 CJK 字母和月份符号这是刻意为之不是安装坏了。确认字体资源下载完整可重跑npm run init-fonts。坑三参数调了半天没反应。大概率是参数文件路径不对或者缓存了旧构建。先npm run clean清缓存再确认 JSON 放进了正确目录。坑四把它当成可变字体来用。它不是可变字体是靠算法把思源黑体的静态字形做形变来拓展家族的。想实时预览形变效果玩一下 demo 里的滑块就好别在 CSS 里试图实时驱动它的字重轴。关于这个开源项目你还需要知道授权很友好字体按 SIL Open Font License 1.1 发布免费、可商用甚至可以修改再发布构建字体的源码则走 MIT 协议。放心拿去做商业项目。社区定位项目目标是填补免费可商用 现代简洁 有宽度变化中文字体的空白欢迎提交 Pull Request但作者也坦白形变算法并不完美个别曲线质量有限如果你遇到个别字的问题建议反馈到 Issues而不是指望逐字手工修复。目录速览parameters/glow/存着各字重的参数配置也就是配方src/glyph-manipulate/是字形形变的核心算法scripts/是构建脚本samples/里是各字体的字形样本模型tests/里有样张 PDF 和对比图。想深挖顺着这几条路走就行。去调一款你的字体未来的字库不会只有别人设计好的那几款而是每个人都能像选滤镜一样挑到、甚至调出适合自己的那一款。未来荧黑已经把门槛降到了拧旋钮的高度——下一个站在调音台前的为什么不能是你现在就去动手git clone https://gitcode.com/gh_mirrors/gl/glow-sans cd glow-sans npm install npm run serve浏览器打开预览页把第一个滑块拖到底看看那个瞬间你的第一个专属字形已经诞生了。【免费下载链接】glow-sansSHSans-derived CJK font family with a more concise modern look. 未来荧黑·未來熒黑·ヒカリ角ゴ基于思源黑体改造拥有粗度和宽度系列更加简明现代的超大字体家族。项目地址: https://gitcode.com/gh_mirrors/gl/glow-sans创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表