SVG / JSX / TSX
用于网页与设计软件
复古叠加图层要看实际 CSS 缩放和位置，不能只看字号。比较 400、700 时保留阶梯轮廓，避免平滑。频繁更新的分数、计时器可交给游戏文本系统处理。
像素 字体生成器
Pixelify Sans 字体转 SVG 在线工具
将 Pixelify Sans 文字转成 SVG 矢量路径，制作复古游戏标题、直播图层和像素风徽章，保留阶梯状轮廓。 下方已选好 Pixelify Sans，输入文字并调整参数后即可导出 SVG、DXF 或 React 组件。
文本选项
预览
字体静态样本；字体加载后会更新为当前设置的实时预览。
SVG 选项
微调导出单位、填充行为和描边输出。
输出
字体样本PIXEL MODE / 600
字体特点与使用建议
关于 Pixelify Sans
适用场景
- 复古游戏标题
- 像素风字标
- 直播叠加图层
- 游戏界面图形
Pixelify Sans 适合复古游戏标题、直播叠加图层和像素风徽章。文字转成 SVG 后保存的是阶梯状矢量轮廓，不是位图，放大时仍能保留几何形状。它适合明确需要数字网格风格的画面；长说明和中性产品标签，可以搭配更简洁的字体。
字形观察重点
检查阶梯斜线、方形字腔、数字和标点在实际界面中的显示。轮廓在数学上保持清楚，不代表浏览器里的像素节奏一定均匀；CSS 尺寸和位置仍会影响效果。把整行对齐到目标网格，并保留有意设计的方角，不要用平滑处理抹掉字体特点。
- 分类
- 像素
- 可变字体
- 是
- 斜体支持
- 否
- 可用字重
- 400 · 500 · 600 · 700
同样文案 · 相同尺度
Pixelify Sans 字形对比
用同一组像素风标签比较 400、700，可观察阶梯斜线、字腔和数字间隙。这是矢量轮廓对比，不能保证任意浏览器缩放或 CSS 尺寸下都对齐像素。
这组文案中，Pixelify Sans · 400 的排版宽度比 Pixelify Sans · 700 少 3.1%。
对比如何生成与测量
两份样例均由内置字体目录中的文件生成：字号 72 px，开启字偶距与标准连字，额外字距和描边均为零。两行使用相同的坐标尺度与基线，小屏幕下也按同一比例缩小。宽度指包含字符间距的排版推进宽度，不是可见轮廓的包围盒。结果只适用于这些字体文件和这组文字；相同字重数值不代表视觉粗细相等。此处用于比较版面占用，不是易读性评分或加工测试。
Pixelify Sans 字重与间距建议
回到转换器调整- 标签字重
- 500
- 标题字重
- 700
- 字符间距
- 0 至 1 px（按最终显示尺寸）
- 曲线精度
- 低至中
这些设置用于开始比较字形，请用实际文案和最终尺寸调整。加工极限取决于工艺、材料与刀具；上方的字体对比不能代替材料试做。
字重与字距怎么调
标签可从 500 或 600 开始，小型展示徽章可试 700。开启字偶距，先做简单的间距调整，再按实际显示尺寸观察。游戏图形可尝试整数倍缩放和网格对齐，但仅使用整数字号，并不能保证每条路径或边缘都正好落在像素上。
Pixelify Sans 转 SVG：像素风文字与导出
设计软件与网页图形可选 SVG，兼容的 CAD 工作流可选 DXF，React 项目可下载 JSX、TSX 路径组件。请按目标软件选择格式。
SVG / DXF
用于切割与雕刻
雕刻像素徽章应测试最小块面与一个内角。圆形 CNC 刀具不能原样做出所有方形内角；导入时避免意外平滑，先检查材料上的实际结果，再重复整个阶梯图案。
下载前检查
- 用最终 CSS 尺寸、缩放和定位检查像素节奏。
- 避免意外的小数缩放，重点查看阶梯斜线和方形字腔。
- 导入加工软件时保留方角，不要误用自动平滑。
检查实际显示尺寸、缩放和定位，不要只看放大预览。逐一查看斜线、标点和方形字腔。加工前确认没有误用平滑处理，并测试最小块面或内角。
Pixelify Sans 转 SVG 常见问题
1像素风字体转成 SVG 后还会保持像素效果吗？
像素风字体转成 SVG 后还会保持像素效果吗？
会保留 Pixelify Sans 的阶梯状矢量轮廓，而不是变成位图。但屏幕上的像素节奏还取决于 CSS 尺寸、缩放和位置。请在实际界面检查斜线、方形字腔与标点，不要只看放大预览。
2Pixelify Sans 转 SVG 怎么选字重？
Pixelify Sans 转 SVG 怎么选字重？
可用字重为 400 到 700。标签可先试 500 或 600，展示徽章可试 700。按目标尺寸与网格检查轮廓；仅使用整数字号，并不能保证每条显示边缘都正好落在像素上。
3Pixelify Sans 导出的 SVG 是固定像素的图片吗？
Pixelify Sans 导出的 SVG 是固定像素的图片吗？
不是位图，保存的是阶梯状矢量轮廓。导出不会固定图片分辨率，也不会把边缘锁定到屏幕像素。相同 SVG 在不同 CSS 尺寸与位置下可能呈现不同效果，请在实际游戏或叠加界面中检查。
4使用整数字号，就一定能让 Pixelify Sans 边缘清晰吗？
使用整数字号，就一定能让 Pixelify Sans 边缘清晰吗？
不能保证。viewBox 的缩放、CSS 宽度和屏幕位置都会影响边缘落点。整数字号并不能让每一个路径坐标都对齐设备像素。请用真正的显示尺寸测试，并为目标网格采用一致的缩放与定位方式。
5动态游戏分数适合转成 Pixelify Sans 路径吗？
动态游戏分数适合转成 Pixelify Sans 路径吗？
固定标题、徽章或直播标签适合使用路径；频繁变化的分数、计时器通常用普通文字或游戏文本系统更方便。将固定装饰与动态数字分开，并在实际渲染环境中检查数字，不能只依赖放大的 SVG 预览。
6Pixelify Sans 适合激光切割或雕刻吗？
Pixelify Sans 适合激光切割或雕刻吗？
当块面和字腔足够大时，可以尝试雕刻或刻字膜。保留方角、避免自动平滑，镂空区域还需支撑。CNC 刀具会影响内角形状，因此要先按成品尺寸测试代表性细节。