字体设计 | 锤子前端

《CSS 单位完全参考手册》

Wed, 02 Sep 2026 13:28:01 GMT

《CSS 单位完全参考手册》

标签：
#前端开发 #CSS #响应式设计 #Web排版 #容器查询 #视口单位 #字体相对单位 #CSS数学函数

总结：

这是一本由 Mykola Ptushchuk 编写的交互式 CSS 单位参考手册，涵盖从基础像素到现代容器查询单位的所有 CSS 度量单位。全书共 7 章，每个单位都配有实时浏览器演示，可在线调整参数观察实际效果，并提供完整 PDF 下载。

文章要点：

1. 全书结构清晰，覆盖七大单位家族：从绝对单位（px）、字体相对单位（em/rem/ch/cap 等）、视口单位（vw/vh 及小/大/动态视口变体）、容器查询单位（cqi/cqw 等）、百分比、数学函数，到角度单位，形成完整的 CSS 度量体系地图。

2. 视口单位家族详解：现代移动端浏览器 UI 会动态收缩/展开，因此视口单位分为默认（等价于大视口）、小视口（sv，假设浏览器控件展开）、大视口（lv，假设控件收起）和动态视口（dv，实时状态）四大家族，解决了 100vh 在移动端全屏布局中常见的"被地址栏遮挡"难题。

3. 容器查询单位让组件真正可移植：cqi/cqw 等单位测量的是组件所在的"查询容器"而非整个视口，使同一个卡片组件在 300px 侧边栏和 700px 主栏中能自动呈现不同布局，无需媒体查询或额外类名，实现了"组件响应自身上下文"而非"响应整个页面"的范式转变。

4. 字体相对单位不止 em/rem：除了常见的 em（当前元素字体大小）和 rem（根元素字体大小），还有 ch（数字 0 的字宽，适合设置最佳阅读行宽如 65ch）、cap（大写字母高度，适合图标与标题对齐）、lh（当前行高作为长度）等精细排版单位，以及对应的根元素变体（rch/rex/rcap 等，2026 年 1 月才在 Firefox 中补齐，至此全浏览器支持）。

5. CSS 数学函数是单位的粘合剂：calc() 可混合不同单位（如 100% - 240px），clamp() 实现流体排版（如 clamp(2rem, 5vw + 1rem, 4rem)），min()/max() 取极值，还有三角函数（sin/cos/tan）可用于无 JS 的圆形布局，指数函数（pow/sqrt）可构建模块化字号比例系统。

6. 实用选型建议：正文用 rem 尊重用户偏好，组件内部比例用 em 保持缩放一致性，line-height 推荐无单位写法（如 1.5）以便作为乘数继承，clamp() 的流体值中务必包含 rem 项以确保缩放无障碍性。

7. 交互式学习体验：每个单位都配有可拖拽、可滑动的实时演示，直接在浏览器中观察单位变化效果，将抽象概念转化为直观体验，并支持下载完整 PDF 离线阅读。

URL：
https://cssunits.com/

CSS Units

CSS Units — The Complete Reference

A complete interactive reference to every CSS measurement unit. From the basics of px and rem to the nuances of svh, dvh, and cqw.

《Departure Mono — 复古像素等宽字体》

Thu, 27 Aug 2026 01:03:17 GMT

《Departure Mono — 复古像素等宽字体》

标签：
#字体设计 #像素艺术 #复古科技 #等宽字体 #开源工具

总结：
Departure Mono 是一款由设计师精心打造的等宽像素字体，灵感源自早期命令行界面、90年代末/00年代初的微型像素字体，以及科幻影视中的概念美学。网站通过极具沉浸感的"机场航班信息屏"和"太空任务报告"等场景化展示，生动呈现了这款字体在代码、数据表格、终端界面等场景下的应用效果。

文章要点：

1. 设计灵感多元融合：字体汲取了早期命令行与图形界面的限制美学、90年代末微型像素字体的精髓，以及科幻影视中的未来概念，呈现出独特的复古科技感。

2. 等宽像素风格：作为一款 monospaced pixel font，每个字符占据相同的宽度，非常适合代码编辑、终端显示、数据对齐等需要整齐排版的场景。

3. 场景化展示超有代入感：网站没有枯燥地罗列字形，而是用"机场航班动态屏"、"地球/外太空温度读数"、"TCP协议头结构图"、"键盘布局图"、"2057年Kerberos 5星球任务报告"等创意场景，直观展示字体在实际应用中的表现力。

4. 技术细节丰富：展示了完整的字符集（包括大小写字母、数字、标点符号和特殊字符），并通过协议头表格、科学数据表格等体现了字体在信息密度较高时的可读性。

5. 科幻叙事增强体验：网站融入了完整的科幻世界观设定（如2057年的太空探索任务报告），让字体展示变成了一次沉浸式的"未来阅读体验"，而非简单的产品介绍。

URL：
https://departuremono.com/

Departure Mono

A monospaced pixel font with a lo-fi, techy vibe.

《Datatype：用字体把文字变成图表的魔法》

Thu, 30 Apr 2026 07:32:52 GMT

《Datatype：用字体把文字变成图表的魔法》

标签：#前端 #OpenType #可变字体 #数据可视化 #字体设计

总结：

Datatype 是一款开源可变字体，利用 OpenType 连字替换技术，将纯文本表达式（如

{b:30,70,50,90}`）实时渲染为条形图、折线图和饼图，无需任何 JavaScript 或图片资源。它通过 CSS 的 `font-variation-settings

控制字宽和字重，WOFF2 仅 73KB，兼容所有现代浏览器，为网页和桌面应用提供了一种零依赖、高性能的轻量级数据可视化方案。

文章要点：

- **纯字体驱动，零 JS 依赖**：利用 OpenType 的 calt`（上下文替换）和 `liga`（标准连字）特性，把 {b:1,3,7}` 这类文本直接变成条形图，不需要加载任何图表库或图片
- **三种图表，一句话搞定**：支持条形图 {b:...}`、折线图 {l:...} 和饼图 {p:...}`，每种最多支持 20 个数据点，数值范围 0–100，语法简单得像在聊天
- **可变字体，随意调节**：通过 `wdth`（字宽 50–150）和 `wght`（字重 100–900）两个轴，可以像调音量一样控制图表的间距和线条粗细，适配不同排版场景
- **轻到不可思议**：WOFF2 格式仅 73KB，TTF 4MB，覆盖 Google Fonts Latin Core 字符集，对网页性能几乎零负担
- **开箱即用，跨平台友好**：Web 端一行 `@font-face` 即可；桌面端安装 TTF 后，在 Adobe 等支持 OpenType 连字的软件里直接粘贴文本就能出图
- **开源可定制**：基于 Python + fontTools 构建，提供完整的构建脚本和开发服务器，方便开发者二次修改或扩展新的图表类型

文章URL：https://github.com/franktisellano/datatype

GitHub

GitHub - franktisellano/datatype: Datatype is a variable font that turns text into charts.

Datatype is a variable font that turns text into charts. - franktisellano/datatype