Montserrat9 个字重 3 个系列免费商用的几何无衬线开源字体【免费下载链接】Montserrat项目地址: https://gitcode.com/gh_mirrors/mo/Montserrat这款开源字体叫 Montserrat。当你在 Figma 里拖入一段标题、却发现字体需要购买商用授权时它可以顶上去。这个项目解决什么问题Montserrat 是一套基于 SIL OFL 许可证发布的几何无衬线字体OFL 是常见的开源字体许可一句话讲就是保留许可声明后任何商业项目都能免费使用。字体文件还能自由修改、分发或嵌入应用与网站。它替代的是两类常见开销一是字体按授权收费改个字符又要加钱二是一个项目里标题用一款付费字体、正文用一款、App 里再用一款风格难统一。这个家族提供 9 个字重和 3 个系列一套就能撑起整套视觉层级。后文按顺序讲全貌、安装、排版做法和坑。30 秒认识全貌项目规格字重范围100Thin到 900Black共 9 档每档带斜体系列3 个常规、Alternates替代字形、Underline内置下划线许可证SIL Open Font LicenseOFL免费商用格式TTF、OTF、WOFF2另含可变字体平台支持Windows、macOS、Linux、网页设计师是阿根廷的 Julieta Ulanovsky字体以布宜诺斯艾利斯 Montserrat 街区的招牌风格命名字形几何感强笔画转折干净放大看也不含糊。字符集覆盖带重音的完整拉丁字母符号和标点也很全。装上去 跑起来用下面的命令拿到完整字体包git clone https://gitcode.com/gh_mirrors/mo/Montserrat三个系统的安装都在一分钟内Windows打开fonts/ttf/目录右键字体文件选安装。macOS双击字体文件点安装字体。Linux把字体文件拷进~/.fonts/再执行fc-cache -f刷新缓存。装完在设计工具里能看到这个家族的 18 个样式9 个字重乘以正体、斜体日常排版够用。网页端只需要一个最小声明WOFF2 文件在 fonts/webfonts/ 目录里font-face { font-family: Montserrat; src: url(fonts/webfonts/Montserrat-Regular.woff2) format(woff2); font-weight: 400; font-style: normal; }其余格式一句话带过TTF 装系统兼容性最好OTF 走印刷更稳WOFF2 上网页体积最小。把字排好看几个真正有用的做法用两到三档字重拉开层次字重别贪多。正文 400、小标题 600、大标题 700是经典三档节奏。觉得对比不够就跳到 900相邻一档的差别肉眼看其实很弱。一屏超过三种字重版面容易乱。行高和字距记住两个数就行正文行高取字号的 1.5 到 1.8 倍标题可以收紧一点。标题字距缩 1% 左右正文保持默认即可。可变字体用在 hover 和响应式上可变字体放在 fonts/variable/一个文件覆盖 100 到 900 连续字重做悬停或响应式效果时粗细是渐变而不是跳档。h2 { font-weight: 400; transition: font-weight 0.3s; } h2:hover { font-weight: 700; }要下划线就别手绘需要下划线效果时用 Underline 系列。下划线长在字体内部跟着字距走比 CSS border 或 SVG 画线干净。容易踩的 3 个坑网页直接上 TTF现象是字体加载慢移动端流量开销大。原因是 TTF 和 OTF 面向桌面场景没有针对网络优化体积约为 WOFF2 的两倍。解法是网页改用 WOFF2本地安装和印刷再选 TTF 或 OTF。以为可变字体哪都能用现象是设置 font-weight: 350 没生效或者被就近取整到固定字重。原因是老浏览器不支持可变字体。解法是兼容旧环境的项目用静态字重文件兜底可变字体留给新环境。三个系列一次全装现象是字体菜单里同名条目超过 50 个挑起来费劲。原因是 3 个系列乘以 9 个字重再乘正体斜体全装纯属占地方。解法是只装当下用到的字重用到别的系列再加。下一步先装 Regular 和 Bold 两个字重丢进自己的项目里看效果。展示图在 documentation/ 目录clone 命令见上文装上去 跑起来。用顺手了再回来补齐其余字重和系列。【免费下载链接】Montserrat项目地址: https://gitcode.com/gh_mirrors/mo/Montserrat创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考