fonts 开源字体库使用指南9 个常用字体族克隆到上手 5 分钟【免费下载链接】fontsMy favorite fonts: SF Pro Text, Pingfang SC, Avenir Next, Roboto, Uber and more.项目地址: https://gitcode.com/gh_mirrors/font/fonts本文以 fonts 开源字体库为例讲清一套字体从下载、安装到调用到网页里的完整路径。仓库里共 9 个字体族目录覆盖网页、中英混排、代码编辑三类常见需求仓库本身采用 MIT 协议字体文件可安装到 macOS、Windows、Linux 任意平台。快速开始克隆、安装、调用字体安装教程每个平台两条命令搞定第一步拿到仓库git clone https://gitcode.com/gh_mirrors/font/fonts cd fonts克隆完成后仓库根目录下的每个文件夹就是一个字体族目录内容格式Helvetica/、HelveticaNeue/、Menlo/经典西文字体ttc 合集Avenir Next/4 个字重400/500/600/700ttf woff/woff2/eot/svgArial/Regular/Bold/Italic 4 个文件ttfJetBrainsMono-2/16 个字重 NL 变体 变量字体 woff2ttf/woff2MesloLGS-NF/Powerline 兼容等宽字体ttfNotoSansCJKsc-hinted/Noto Sans CJK SCThin 到 Black 共 9 个 otfotfNotoSerifCJKsc-hinted/Noto Serif CJK SCExtraLight 到 Blackotf第二步装进系统。macOS 一条命令批量打开所有字体find . \( -name *.ttf -o -name *.otf -o -name *.ttc \) -exec open {} \;在弹出的字体册里逐个点安装字体即可。Windows 用户选中字体文件右键选择为所有用户安装或直接复制到C:\Windows\Fonts。Linux 用这两行for d in */; do sudo cp -r $d /usr/local/share/fonts/; done sudo fc-cache -f -v第三步在网页里调用。装好后设计软件Figma、Photoshop、Illustrator里直接可选网页端写一段 font-face 声明即可以 Avenir Next 常规体为例font-face { font-family: Avenir Next; src: url(Avenir Next/400 Regular/avenir-next-regular.woff2) format(woff2); font-weight: 400; font-display: swap; }其余字体照此替换路径字重对应各自文件夹里的文件。按项目类型选字体不用逐个浏览 9 个字体族直接按你要做的东西挑官网、产品页正文用Avenir Next/字重阶梯完整且是仓库里唯一自带成套 Web 字体格式eot/woff/woff2/svg的西文字体族需要更中性、商务感的排版用Helvetica/或HelveticaNeue/Arial/可留作系统回退。中文内容正文用NotoSansCJKsc-hinted/字重从 Thin 到 Black 齐全还附带 Regular/Bold 两个NotoSansMonoCJKsc等宽版本长文阅读、出版物风格的排版配NotoSerifCJKsc-hinted/衬线字体。代码编辑器、终端IDE 里用JetBrainsMono-2/fonts/ttf/每个字重都有 Italic 配对另有去掉连字的 NL 变体终端用 Powerline 兼容的MesloLGS-NF/喜欢 macOS 系统风格就装Menlo/。实用技巧中英混排字体怎么选中英文混排项目用一条 font-family 回退栈一次解决——英文部分命中前面的字体中文部分自动落到 Notobody { font-family: Avenir Next, Noto Sans CJK SC, Helvetica Neue, sans-serif; }搭配原则很简单英文无衬线配 Noto Sans英文衬线配 Noto Serif代码块单独切到等宽字体避免同一层级里无衬线和衬线混用。字体格式怎么选场景推荐格式说明现代浏览器网页woff2体积最小Avenir Next/与JetBrainsMono-2/fonts/webfonts/里现成可用旧浏览器兼容woff / eot / ttfAvenir Next/的 400~600 三个文件夹带齐了 eot 和 svg桌面安装ttf / otf / ttc走上面的系统安装命令打印输出otfNoto CJK 系列全部是 OTF网页字体怎么加载更快两个动作给首屏用到的字体加预加载并声明替换策略link relpreload hrefAvenir Next/400 Regular/avenir-next-regular.woff2 asfont typefont/woff2 crossorigin上面 font-face 里的font-display: swap让浏览器先用后备字体渲染文字Web 字体加载完再替换用户不会看到空白。另外JetBrainsMono-2/fonts/variable/下的变量字体用font-weight: 100 800一行声明即可覆盖全部字重一个文件替代十几个 ttf适合只在一个页面用 JetBrains Mono 的场景。许可说明仓库顶层 LICENSE 是 MIT。具体到字体JetBrains Mono 目录内附带JetBrainsMono-2/OFL.txtSIL 开源字体许可Noto CJK 系列出自 Google Noto 项目同为 OFL属于可放心免费商用的字体。需要提醒的是Helvetica/、Arial/、Menlo/、Avenir Next/属于各权利方字体仓库只是把它们聚合在一起商用前请确认你所在环境已有相应授权。三步收尾git clone拉取仓库对照上文表格确认 9 个目录齐全按平台命令安装只装项目用到的字体族不必全部灌进系统网页项目写好 font-face 指向 woff2并加上 preload 与 swap商用前翻一眼对应目录的许可文件。【免费下载链接】fontsMy favorite fonts: SF Pro Text, Pingfang SC, Avenir Next, Roboto, Uber and more.项目地址: https://gitcode.com/gh_mirrors/font/fonts创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考