因可变字体text-stroke问题，将Google Fonts可变字体转为静态字体

问题概述 #

• Google Fonts中大量可变字体存在与-webkit-text-stroke的兼容问题，Montserrat是讨论最多的案例，但受影响的字体范围更广
• 应用-webkit-text-stroke后，文本渲染会出现遍布字符的小交叉线异常（文字描边异常效果）
• 已知其他文字描边方案不适用，因此不打算调整现有CSS实现

可行解决方案 #

1. 直接获取Google Fonts的静态字体版本 #

访问目标字体的Google Fonts详情页：

• 页面右上角点击「Download family」，下载的压缩包内默认包含该字体的静态字重文件（如Regular、Bold等单独的.ttf/.woff2文件，区别于可变字体）
• 若下载后仅得到可变字体，可在字体详情页的「Styles」面板中，选中具体的静态字重（如「400 Regular」），再执行下载操作

2. 将可变字体转换为静态字体的工具 #

Fonttools（命令行工具）

这是Python编写的开源字体处理库，可快速导出指定参数的静态字体：

# 导出字重为400的静态字体
fonttools varLib.instantiate your-variable-font.ttf --output static-400.ttf --axis wght=400
# 导出斜体字重400的静态字体
fonttools varLib.instantiate your-variable-font.ttf --output static-400-italic.ttf --axis wght=400,ital=1

Glyphs App（可视化工具）

导入可变字体后，通过「File > Export > Font」选项，选择导出静态字体格式，可自定义字重、样式等参数，适合可视化操作需求。

FontLab 7（专业字体编辑软件）

支持将可变字体拆分为多个静态字体文件，操作界面直观，无需命令行基础，适合处理复杂字体转换需求。

内容的提问来源于stack exchange，提问作者CRAIG