Montserrat 开源字体怎么用：从下载安装到网页可变字重的一次完整记录-开发者社区

Montserrat 开源字体怎么用：从下载安装到网页可变字重的一次完整记录

【免费下载链接】Montserrat项目地址: https://gitcode.com/gh_mirrors/mo/Montserrat

这个仓库承载的是一个字体项目——Montserrat 字体，一套灵感来自布宜诺斯艾利斯蒙塞拉特区老招牌与旧海报的几何无衬线字体。它从 2010 年开始由设计师 Julieta Ulanovsky 发起，2011 年通过 Kickstarter 众筹完成首发，如今已迭代到 9.x 版本，覆盖 9 档字重、三大家族和四种文件格式，并在 SIL 开源许可下允许免费商用。下面是我把它真正用进一个实际项目的过程记录。

一次真实的改版任务

我最近接手了一个本地咖啡品牌的官网改版。客户给了一堆参考图，全是欧洲老牌杂志那种带有城市感的排版，标题字要"有性格但别太张扬"。我翻遍了系统自带的字体，要么太严肃，要么太圆滑，始终差一口气。后来同事扔给我一个压缩包，说"试试这个"，里面就是 Montserrat。

当时我只知道它是 Google Fonts 上很常见的一款字体，真正打开这个仓库之后才发现，它远比"下载一个 ttf"要完整得多：三套子家族、可变字体、web 字体、甚至还有用于自己重新构建字体的源文件。这篇文章就是我把它完整用进项目的记录，从拿到文件到网页上线，再到给印刷物料出字体。

能力地图：这个仓库里到底有什么

项目目录划分得很直白，拿到手基本不需要摸索：

三个子家族：常规Montserrat、字母形态更圆润装饰的MontserratAlternates、自带连续下划线的MontserratUnderline，分别放在fonts/、fonts-alternates/、fonts-underline/三个目录。
九档字重加斜体：从 Thin(100)、Light(300) 到 Bold(700)、Black(900)，每一档都有对应的 Italic，共 18 个静态文件。
四种分发格式：每个家族目录下都有otf/、ttf/、variable/、webfonts/四个子目录，桌面端、印刷端、网页端各取所需。
可变字体：Montserrat[wght].ttf和Montserrat-Italic[wght].ttf两个文件，用 CSS 就能在 100–900 之间平滑调节字重。
2731 个字形：9.0 版本把字符量从 1968 扩到 2731，支持拉丁扩展、完整西里尔字母，以及数学、货币、箭头等常用符号。
可自行构建：sources/下是.glyphs源文件和构建配置，make build可以重新生成字体，make test会跑 FontBakery 质量检查。
开源许可：SIL Open Font License 1.1，商用、修改、嵌入网页和 App 都允许。

我是怎么把它用进项目的

拿到仓库后，我的第一件事不是写代码，而是先把字体在系统里"落地"。在 macOS 上直接双击fonts/ttf/Montserrat-Regular.ttf装进字体册；Linux 机器上则把需要的文件拷到~/.fonts/后跑了一次fc-cache -f -v刷新缓存。这一步做完，设计稿里的字体预览就正常了。

真正花心思的是网页部分。客户的站点是静态页面，性能要求高，我没有引入整包字体，而是只挑了几档需要的字重，从fonts/webfonts/里拷出对应的.woff2文件放到站点目录，再用@font-face声明。woff2 本身压缩率就比 ttf 好不少，按需加载后首屏明显轻快。

排版上我按客户"老杂志"的调性做了搭配：正文用 Regular(400)，16px，行高 1.6；栏目标题用 SemiBold(600)；大标题用 ExtraBold 或 Black。标题的字距我压了大约 -1%，这样大字在页头里更紧凑，不会显得松散。

三个最值得细看的使用点

其一，网页按需引入 woff2。这是我在网页项目里最常用的写法，只声明用到的字重，加载量最小：

@font-face { font-family: 'Montserrat'; src: url('fonts/webfonts/Montserrat-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Montserrat'; src: url('fonts/webfonts/Montserrat-ExtraBold.woff2') format('woff2'); font-weight: 800; font-style: normal; }

其二，可变字体的字重过渡。客户想要导航按钮 hover 时字重"长胖"的动效，用静态字体做不了平滑过渡，换成fonts/variable/Montserrat[wght].ttf就很简单：

@font-face { font-family: 'Montserrat Variable'; src: url('fonts/variable/Montserrat[wght].ttf') format('truetype-variations'); font-weight: 100 900; } .button { font-family: 'Montserrat Variable', sans-serif; font-variation-settings: 'wght' 400; transition: font-variation-settings 0.3s ease; } .button:hover { font-variation-settings: 'wght' 700; }

其三，印刷物料用 OTF。给客户出菜单和包装 PDF 时，我改用fonts/otf/下的文件，OpenType 特性在排版软件里支持更完整，比如旧式数字和表格数字的切换。

实践里踩过的坑

Adobe 系软件里可变字体会"抽风"。项目 README 明确提过，某些版本的 Adobe CC 对可变字体支持不稳定，个别字重显示异常。我后来给客户的印刷文件统一换回静态 OTF，问题消失。如果你主要用 Adobe 全家桶，建议直接走静态字体，别在可变字体上较劲。
粗字重个别字形有小瑕疵。字体是 fontmake 生成的，README 里提到某些粗体字形存在已知渲染问题，团队正在跟进。实际使用中不仔细看很难察觉，但如果对字形要求苛刻，放大检查一遍再用。
Linux 上装了字体没生效。多半是缓存没刷新，fc-cache -f -v之后重启应用一般就能解决。
授权边界别搞混。OFL 允许免费商用、修改和再分发，但字体文件本身不能单独拿出来卖钱，且衍生作品要继续沿用 OFL 协议。文档里生成的图片、PDF 不受此限制，放心用。

不同场景该从哪里开始

纯网页项目：直接取fonts/webfonts/下的 woff2，按需声明，别整包引入。
桌面设计与 UI 稿：装fonts/ttf/即可，兼容性最好。
印刷与出版：用fonts/otf/，OpenType 特性支持更完整。
想做字重动画或极端精简文件数：上fonts/variable/的可变字体，一个文件顶九档。
想要更有装饰感或强调效果的标题：去fonts-alternates/和fonts-underline/里翻一翻，会有惊喜。

想上手的话，git clone https://gitcode.com/gh_mirrors/mo/Montserrat把仓库拉下来，先从fonts/ttf/Montserrat-Regular.ttf双击安装开始即可。至于更深的使用，README 里还留了构建和测试的命令，值得有兴趣的人翻一翻。