Montserrat 免费商用字体完整指南9 字重 3 家族 4 格式从安装到自建一次讲清【免费下载链接】Montserrat项目地址: https://gitcode.com/gh_mirrors/mo/MontserratMontserrat 是一款 SIL OFL 1.1 协议的开源几何无衬线字体免费商用、可修改、可再分发不用注册、不用激活。仓库一次性给齐 3 个字体家族主力 / Alternates / Underline× 9 个字重 × 4 种格式WOFF2、TTF、OTF、可变字体网页和印刷直接落地。这篇文章带你走四站挑对文件 → 装好生效 → 排出专业感 → 能自己改它每站结尾都有一条验收标准随时确认自己有没有做对。开篇·选型与授权OFL 底线和文件怎么挑授权上OFL 1.1 给了你三件事商用免费包括交付客户和上架售卖的产品、可以修改、可以再分发。只有两条限制修改后的字体对外发布时必须随包保留 OFL 声明仓库根目录的OFL.txt不能拿 Montserrat 这个原名去卖修改版本。转发前看一眼许可文本即可。先选家族一共 3 个家族定位目录Montserrat主力网页、印刷、界面通吃fonts/Alternates替换 a、g 等字形更活泼适合 Logo 和宣传语fonts-alternates/Underline字母自带下划线长度与文字对齐适合强调和小标题fonts-underline/再选字重九档从细到重编号就是 CSS 里的 font-weight 值字重数值典型用途Thin100纯装饰、大字背景ExtraLight200辅助说明、水印感文字Light300长文正文的轻选项Regular400正文默认值Medium500次要强调SemiBold600次级标题、按钮Bold700主标题、导航ExtraBold800大字重海报Black900最强视觉锤最后按使用端选格式30 秒就能挑对格式适合场景注意点WOFF2网页加载文件最小桌面软件不认TTF桌面安装、办公文档兼容性最好OTF专业印刷排版设计软件首选可变字体一个文件覆盖 100–900 全部粗细老系统、老软件可能不识别这张图证明字重梯度的均匀度从最细的 Thin 到最重的 Black中间各级过渡平缓任意两级之间的视觉落差都可控——你可以在版面里精确挑粗细而不是只有细和粗两档。这张图对应多语言场景9.0 版本把字形从 1968 个扩到 2731 个货币符号、分数、扩展西里尔字母和非洲语言字符都在做国际化项目不用怕缺字。验收标准你能一句话说出网页用 WOFF2、桌面用 TTF、印刷用 OTF就算过了。第二站·落地接入十分钟把字体装到桌面和网页上 这一站解决从下载文件到两端生效的最短路径。第一步拿到文件。克隆整个仓库三个家族、四种格式一次拿齐如果只用一部分也可以只拷走对应目录# 克隆仓库三个家族、四种格式一次拿齐 git clone https://gitcode.com/gh_mirrors/mo/Montserrat第二步桌面安装。三个平台各一条路平台做法Windows / macOS进fonts/ttf/目录双击 Montserrat-Regular.ttf 点安装Linux把 ttf 文件放进~/.fonts再跑fc-cache刷新缓存装完在任意软件的字体列表里搜 Montserrat九个字重加斜体应该都在。第三步网页引入。网页端用fonts/webfonts/里的 WOFF2配一段 font-face。下面这段的作用是告诉浏览器字体叫什么、文件在哪、对应什么字重三要素/* 三要素字体名、文件、字重 */ font-face { font-family: Montserrat; src: url(fonts/webfonts/Montserrat-Regular.woff2) format(woff2); font-weight: 400; /* 对应 Regular其余字重各声明一条 */ font-display: swap; /* 加载完前先用系统字体占位用户不会看到空白 */ }font-display: swap是关键字体没加载完时浏览器临时用系统字体顶住加载完再替换。给任意元素写上font-family: Montserrat字形一变就算成功。验收标准桌面软件字体列表搜得到 Montserrat网页文字显示为 Montserrat两项都过安装环节收工。第三站·参数与搭配正文、标题、移动端三套参数直接抄✨ 这一站解决装上了却不好看——所有参数都是推荐值直接搬进项目。正文抄这组项取值为什么字重Regular400长文阅读最均衡的一档字号16px网页阅读的舒适基线行高1.6行与行之间留白降低视觉疲劳颜色#333 深灰比纯黑柔和长时间阅读不刺眼标题层级靠字重拉开不靠猛加字号层级字重建议字号细节H1Bold700clamp(1.5rem, 5vw, 3rem)字间距收 0.02em 左右更稳H2SemiBold600约 1.5rem默认字间距H3Medium500约 1.2rem默认字间距clamp 的作用是让字号在 1.5rem 到 3rem 之间随视口宽度平滑变化一行搞定响应式标题/* 字号随视口宽度在 1.5rem 到 3rem 之间平滑变化 */ h1 { font-size: clamp(1.5rem, 5vw, 3rem); }移动端 UI 的角色分工元素字重按钮文字Medium500或 SemiBold600导航标题Bold700正文Regular400辅助说明ExtraLight200或 Thin100字重越轻视觉层级越靠后。九个档位的价值就在这里不靠硬调字号也能排出节奏。字体搭配三组被验证过的组合组合适用场景Montserrat 标题 Merriweather 正文商务、正式场合无衬线配衬线经典耐看Montserrat 标题 Inter 正文科技产品气质统一屏幕表现都好Montserrat 标题 思源黑体/阿里巴巴普惠体正文中文项目Montserrat 只含拉丁和西里尔字形混排是标准做法可变字体粗细怎么连续调。静态字体像裁好的布片一次一件可变字体像整匹布一个文件里存着 Thin 到 Black 的连续曲线任意中间值都能取。声明时把字重写成区间/* 字重声明为区间而不是单值浏览器才知道可以取中间值 */ font-face { font-family: Montserrat Variable; src: url(fonts/variable/Montserrat[wght].ttf) format(truetype-variations); font-weight: 100 900; } /* 悬停时字重从 450 平滑过渡到 700 */ .dynamic-weight { font-variation-settings: wght 450; transition: 0.3s; } .dynamic-weight:hover { font-variation-settings: wght 700; }副作用是好的页面请求数量减少一次加载覆盖全部字重。注意一个已知问题——部分 Adobe CC 版本对可变字体渲染异常遇到这种软件直接改用静态 ttf 或 otf观感一致。两个姊妹家族。fonts-alternates/换掉 a、g 等部分字形同一套字重体系观感更活泼用在 Logo 和宣传语上比主力家族更有性格Underline 家族的下划线是跟着字母长出来的长度与文字严丝合缝做强调比手动画 border 省事且不会错位。CSS 里把 font-family 写成 Montserrat Alternates, sans-serif 就能切换。这张图是姊妹家族能力的直接证据下划线穿过整行文字、粗细对比鲜明全部来自字体本身而不是 CSS 装饰——做海报和小标题时这类效果一个属性都不用额外写。验收标准把字号全部固定只靠字重也能分出标题、正文、辅助说明三层版面就有层级感就算过了。第四站·进阶定制从零构建你自己的字体版本 这一站把整条工具链讲清楚命令只给最核心的几条。整个项目从设计源到构建脚本全部开源设计源文件在sources/子目录.glyphs 格式可用 Glyphs 软件直接编辑构建配置是sources/config.yaml每个家族一份依赖清单在requirements.txt。自己重新构建四步走pip install -r requirements.txt # 装齐构建依赖 make build # 生成三个家族的全部字体文件 make test # FontBakery 质检轮廓、间距、兼容性几十项自动检查 make proof # 生成字形对比的 HTML 报告make test是这套流程的亮点轮廓错误、间距异常、平台兼容性等指标自动扫一遍相当于给字体做全面体检结果输出成可读报告。想批量调整字符或 OpenType 特性scripts/目录下的脚本如scripts/customize.py就是入口。验收标准能跑通make build生成字体文件、make test的质检报告无错误项你就掌握了整条链路。收尾·五个常见误区对照表误区正确做法自查方式全站只用一种字重把字重当层级工具标题 Bold、正文 Regular、说明 ExtraLight缩小页面看标题和正文分得开吗什么环境都上可变字体目标软件、系统不明时先上静态 TTF观感一致在最老的目标软件里打开字重正常吗以为 Montserrat 支持中文只覆盖拉丁系与西里尔字母正文配中文字体混排输入一段中文看是否跳了备用字体修改后发布却不留协议随包保留 OFL 声明不用原名销售修改版检查发布包里有没有 OFL.txt格式用错端网页 WOFF2、桌面 TTF、印刷 OTF、动效用可变字体问一句这个文件的消费者认这个格式吗收尾·动手前的高频问答Q1 真的可以免费商用可以。OFL 1.1 明确允许商用、修改、再分发不收费只需守住两条限制发布时随包保留 OFL 声明、不用原名卖修改版。Q2 字重怎么选正文 Regular400或 Light300标题 Bold700或 ExtraBold800强调用 SemiBold600或 Medium500Thin100、ExtraLight200留给纯装饰。Q3 静态和可变优先用哪个要做粗细动画、想减少请求量用可变字体用户软件环境未知用静态 TTF。两者不冲突可按页面混用。Q4 Alternates 和 Underline 什么时候上主力家族做默认Logo、宣传语要活泼个性用 Alternates要下划线强调效果用 Underline比写 CSS 装饰属性稳。Q5 Adobe 系列软件有什么坑部分 Adobe CC 版本对可变字体渲染异常换静态 ttf 或 otf 即可观感一致。收尾·现在就能做的四件事进fonts/ttf/目录双击 Montserrat-Regular.ttf 和 Montserrat-Bold.ttf 完成安装任何软件里搜 Montserrat 即用。网页项目把 WOFF2 拷进目录照抄第二站的 font-face 声明十分钟见效。把第三站的正文四参数和标题层级表原样搬进下一个页面对比一下专业排版感的差别。花五分钟试试可变字体的悬停动画看字重 450 到 700 的平滑过渡效果比预期灵。结尾·留给你的一个问题你在新项目里会先伸手拿静态字重还是直接上可变字体做动效把你的字重搭配方案留下来也许能帮到正在选字的人。【免费下载链接】Montserrat项目地址: https://gitcode.com/gh_mirrors/mo/Montserrat创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考