SVG / JSX / TSX
用于网页与设计软件
刊物标题应在最终容器中检查衬线尖端和外伸部分，并用手机宽度比较 400、700。正文保留为文字，只把需要固定字形的标题部分作为路径图形。
衬线 字体生成器
Playfair Display 字体转 SVG 在线工具
将 Playfair Display 文字转换为 SVG，保留衬线与粗细对比，制作编辑风格标题、邀请函和有展示感的字标。 下方已选好 Playfair Display，输入文字并调整参数后即可导出 SVG、DXF 或 React 组件。
文本选项
预览
字体静态样本；字体加载后会更新为当前设置的实时预览。
SVG 选项
微调导出单位、填充行为和描边输出。
输出
字体样本The Sunday Edit / 700
字体特点与使用建议
关于 Playfair Display
适用场景
- 编辑风格标题
- 邀请函标题
- 衬线字标
- 专题图形
Playfair Display 适合编辑风格标题、邀请函和强调衬线对比的短字标。粗细笔画本身就有展示感，不必再加很多装饰。转成 SVG 后，应给这些细节足够的显示空间。小型界面标签或尺寸很小的镂空切字，往往需要更简洁的搭配字体。
字形观察重点
用实际文案检查细笔画、衬线尖端、字腔和向外伸出的部分。大图上完整的细节，缩到最终尺寸可能就不明显了。不要只看大写字母，也要检查小写和标点。给衬线留出边界空白，并保持等比缩放，避免破坏粗细对比。
- 分类
- 衬线
- 可变字体
- 是
- 斜体支持
- 是
- 可用字重
- 400 · 500 · 600 · 700 · 800 · 900
同样文案 · 相同尺度
Playfair Display 字形对比
The Sunday Edit 用两款字体的 400 字重比较衬线与留白。请再缩到手机上的实际标题宽度；宽度测量只能说明占用空间，不能证明最细笔画仍然清晰。
这组文案中，Playfair Display · 400 的排版宽度比 Merriweather · 400 少 7.1%。
对比如何生成与测量
两份样例均由内置字体目录中的文件生成：字号 72 px，开启字偶距与标准连字，额外字距和描边均为零。两行使用相同的坐标尺度与基线，小屏幕下也按同一比例缩小。宽度指包含字符间距的排版推进宽度，不是可见轮廓的包围盒。结果只适用于这些字体文件和这组文字；相同字重数值不代表视觉粗细相等。此处用于比较版面占用，不是易读性评分或加工测试。
Playfair Display 字重与间距建议
回到转换器调整- 标签字重
- 400
- 标题字重
- 700
- 字符间距
- 0 至 0.02em
- 曲线精度
- 高
这些设置用于开始比较字形，请用实际文案和最终尺寸调整。加工极限取决于工艺、材料与刀具；上方的字体对比不能代替材料试做。
字重与字距怎么调
大尺寸、偏精致的标题可从 400 开始，需要更强存在感时可试 700。保留字偶距，再按具体短语小幅调整间距。较粗的原生字重会同时调整整个字形，通常比加一圈粗描边更自然。字距不要拉得太散，以免短标题失去整体感。
Playfair Display 转 SVG：标题与衬线细节
设计软件与网页图形可选 SVG，兼容的 CAD 工作流可选 DXF，React 项目可下载 JSX、TSX 路径组件。请按目标软件选择格式。
SVG / DXF
用于切割与雕刻
雕刻标题先测试最细的衬线和标点。镂空加工对细尖与封闭区域要求更高；如果工艺无法保留，应放大标题或比较更结实的衬线字体。
下载前检查
- 大尺寸精致标题可试 400，更醒目的字标可比较 700。
- 保留衬线边缘的空白，不要让细笔画或标点被裁切。
- 实体制作先测试最细衬线，不要仅凭大图判断能否切割。
检查最小显示尺寸下的细笔画和标点，确认衬线没有被裁切，图形也没有拉伸。保留原始 SVG。实体制作前先试做最精细的字符，再决定完整作品的尺寸与工艺。
Playfair Display 转 SVG 常见问题
1Playfair Display 适合制作 SVG 标题和 Logo 吗？
Playfair Display 适合制作 SVG 标题和 Logo 吗？
适合有足够显示空间的编辑标题、邀请函和衬线字标。它的粗细对比需要在最终尺寸下检查。很小的界面标签或镂空切字，可以先比较结构更简单的搭配字体。
2Playfair Display 转 SVG 推荐用 400 还是 700？
Playfair Display 转 SVG 推荐用 400 还是 700？
大尺寸、偏精致的标题可从 400 开始，更有力量的字标可试 700。保留字偶距并检查衬线尖端和字腔。较粗的原生字重通常比粗描边更能保持原有字形关系。
3Playfair Display 标题缩小后，为什么细笔画不明显？
Playfair Display 标题缩小后，为什么细笔画不明显？
矢量轮廓清楚，不代表很细的可见笔画在小尺寸下仍然清晰。请在真实背景和手机宽度下比较 400、700，也可放大标题或换更结实的字体。直接加粗描边可能改变衬线形状，应先比较原生字重。
4什么时候适合把 Playfair Display 和 Merriweather 放在一起比较？
什么时候适合把 Playfair Display 和 Merriweather 放在一起比较？
下方将 The Sunday Edit 用两款字体的 400 字重按相同尺度展示，可观察衬线尖端、字腔和标题占用的宽度。请按最终版面中能保留的细节选择，不要把所有衬线字体都当成相同的使用方式。
5Playfair Display 标题导入后被裁切，应该检查哪里？
Playfair Display 标题导入后被裁切，应该检查哪里？
给衬线伸出部分、大写字母和下伸字母留出空间，并保留导出的 viewBox。随后检查网页容器、蒙版或设计软件中的裁切范围。导出路径完整，也可能因为外层容器裁得太紧而看不到细节。
6Playfair Display 适合激光切割或雕刻吗？
Playfair Display 适合激光切割或雕刻吗？
印刷或雕刻通常比小尺寸镂空切割更容易保留细节。按成品尺寸检查细笔画和衬线尖端，并为封闭字腔安排支撑。正式制作前，先用实际材料测试最精细的字符。