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 里还留了构建和测试的命令值得有兴趣的人翻一翻。写在最后蒙塞拉特区的那些老招牌大多已经拆掉了但这套字体把它们的一部分留了下来现在又出现在你的网页、海报和咖啡杯上。下一版页面改版时不妨给标题留一行 Montserrat——它大概不会让你失望。【免费下载链接】Montserrat项目地址: https://gitcode.com/gh_mirrors/mo/Montserrat创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考