尧图网络 高端网站定制 · 原创设计
免费咨询热线
400-888-6620
免费获取方案
Inter 变量字体:一个文件把 9 种字重带进你的网页
Inter 变量字体一个文件把 9 种字重带进你的网页【免费下载链接】interThe Inter font family项目地址: https://gitcode.com/gh_mirrors/in/interInter 是一款为屏幕显示设计的无衬线字体包含 Thin 到 Black 共 9 个字重和完整斜体。变量字体版本单个文件即可交付opsz 轴能按字号调整字形适合网页 UI 与文档站。适合谁小字号界面文本是它的用武之地Inter 属于几何新无衬线geometric neo-grotesque风格上接近 Roboto、San Francisco但它最有辨识度的设计是偏大的 x 高度——也就是小写字母相对字体的比例。这背后是它的出身Inter 最初就是为计算机屏幕做的在 13~16px 的正文字号下x 高度大一点字母轮廓更清楚长段落阅读时的视觉负担更小。仓库里同时提供了一组大字号变体 Inter Display。两者的区别正体现在 x 高度上从对比图能看到文本版 x 高度更高Display 版在同样大写高度下 x 高度略低大字更紧凑。所以适用场景比较明确Web 产品界面、仪表盘、文档站这类以小字号正文为主的场景选标准文本版如果页面里大标题很多直接用 Display 版或者靠变量文件的 opsz 轴切换下文会讲。从零到跑起来网页引入的最短路径最省事的方式是自托管。把仓库克隆下来取 docs/font-files/ 里编译好的字体文件和 docs/inter.cssgit clone https://gitcode.com/gh_mirrors/in/inter两者放到你的 web 服务器上页面里引用这份 CSS 后样式这样写:root { font-family: Inter, sans-serif; } supports (font-variation-settings: normal) { :root { font-family: InterVariable, sans-serif; } }这正是 docs/inter.css 文件头部注释里给出的用法不支持变量字体的旧浏览器回退到 9 个字重的静态文件现代浏览器只加载 InterVariable 一份字重 100~900 全部覆盖请求字重变化时不会再触发新文件下载。字体显示策略它也替你处理了CSS 里每处都是font-display: swap正文会先用后备字体渲染不会白屏等待。真实项目里怎么调opsz 光学尺寸与斜线零InterVariable 有三个轴wght字重、ital斜体、opsz光学尺寸。第三个最容易被人忽略。所谓光学尺寸是指同一款字体在大字号和小字号下应该用不同的细节大字号需要相对更细的笔画和更小的内部空间才显得协调opsz 就是干这件事的轴。写进 CSS 很简单h1 { font-variation-settings: opsz 40; }这样标题就固定用大字号形态不必再同时维护 Inter 和 InterDisplay 两个字体名。其余 OpenType 功能也有内置各功能的源码按文件拆分放在 src/features/ 目录。日常用得上的两个zero把数字 0 换成斜线零在代码、版本号、ID 里区分数字 0 和字母 otnum是等宽数字每个数字宽度相同表格里的数字列自然对齐。像calt上下文标点替代、liga连字这类默认开启的功能正常排版下不用操心。能不能商用SIL 开源字体许可证的边界Inter 采用 SIL Open Font License 1.1完整条款见 LICENSE.txt。对使用者来说可以归纳为四句商用没问题随产品使用、嵌入软件、随服务分发都可以用它做的文档不受任何限制可以修改并做衍生字体但衍生作品必须继续用 OFL 发布不能换成别的许可证字体本身不能当独立商品出售想卖衍生版本仓库说明建议先联系作者Inter 是保留字体名衍生作品不能沿用这个名字。对绝大多数项目——官网、App、设计系统——这些条款不构成任何额外成本。什么时候该考虑换一家有两种情况值得重新评估。第一种你的界面以中文、日文或韩文为主。Inter 的字符覆盖集中在拉丁文、西里尔文、希腊文和部分欧洲语言CJK 字符会回退到系统字体这种情况下更稳的做法是从一开始就按Inter 管拉丁字母 CJK 字体管汉字组合设计并在font-family里定好回退顺序。第二种你需要字宽变化。Inter 只有 wght、opsz、ital 三个轴没有 condensed 或 expanded如果密集数据面板确实在横向空间上捉襟见肘可以去看带宽度轴的字体家族。如果你的产品是小字号为主的 Web UI又不想维护一堆字重文件直接克隆仓库、把 docs/font-files/ 挂到服务器上然后在 14px 正文和 32px 标题两个尺寸下验证效果就是最短的一条验证路径。【免费下载链接】interThe Inter font family项目地址: https://gitcode.com/gh_mirrors/in/inter创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
RELATED

相关推荐

网盘直链下载助手:安装与九大网盘直链获取指南

网盘直链下载助手:安装与九大网盘直链获取指南

网盘直链下载助手:安装与九大网盘直链获取指南 【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 ,支持 百度网盘 / 阿里云盘 / 中国移动云盘 / 天翼云盘 / …

📅 2026/11/4 1:21:41
XHS-Downloader:免费的小红书采集下载工具,5 分钟从零到上手

XHS-Downloader:免费的小红书采集下载工具,5 分钟从零到上手

XHS-Downloader:免费的小红书采集下载工具,5 分钟从零到上手 【免费下载链接】XHS-Downloader 小红书(XiaoHongShu、RedNote)链接提取/作品采集工具 项目地址: https://gitcode.com/gh_mirrors/xh/XHS-Downloader 想保存一…

📅 2026/11/4 1:21:41
HsMod 炉石插件:15 分钟装好,60+ 功能覆盖战棋 MMR 显示、换肤与挂机自动

HsMod 炉石插件:15 分钟装好,60+ 功能覆盖战棋 MMR 显示、换肤与挂机自动

HsMod 炉石插件:15 分钟装好,60 功能覆盖战棋 MMR 显示、换肤与挂机自动 【免费下载链接】HsMod Hearthstone Modification Based on BepInEx 项目地址: https://gitcode.com/GitHub_Trending/hs/HsMod 酒馆排了三把还在等下一局;日常…

📅 2026/11/4 1:21:41
MORE NEWS

更多资讯

📰

Bootstrap Table 实战:筛选、服务端分页与虚拟滚动的高频配置

Bootstrap Table 实战:筛选、服务端分页与虚拟滚动的高频配置 【免费下载链接】bootstrap-table An extended table for integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation, V…

📰

dsh-purge 安装指南:三大动作装好宿主补丁,一条命令验证生效

dsh-purge 安装指南:三大动作装好宿主补丁,一条命令验证生效 【免费下载链接】dsh-purge DeepSeek Harness 破甲:让所有模型都能破甲,不同模型可换不同提示词;默认提示词面向国模「小码酱」。Jailbreak for every mode…

📰

Inter 字体免费使用指南:变量字体接入与商用要点一次讲清

Inter 字体免费使用指南:变量字体接入与商用要点一次讲清 【免费下载链接】inter The Inter font family 项目地址: https://gitcode.com/gh_mirrors/in/inter Inter 字体是一款为计算机屏幕设计的开源无衬线字体家族,内置变量字体与丰富的 OpenT…

📰

Altium Designer(AD20)-PCB中-选中整个网络走线TRACK(高亮显示)

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

📰

Locale Emulator 区域模拟器实操指南:不改系统区域运行日文与繁中程序

Locale Emulator 区域模拟器实操指南:不改系统区域运行日文与繁中程序 【免费下载链接】Locale-Emulator Yet Another System Region and Language Simulator 项目地址: https://gitcode.com/gh_mirrors/lo/Locale-Emulator 假设你下载的游戏是日文版、常用的…

📰

【芳芯科技】果蔬运输车保鲜系统

实物效果图:实现功能:1.采用STM32单片机作为控制核心。2.MQ316硫化氢传感器实时检测气体浓度。3.DHT11实时检测环境温度和湿度。4.震动传感器检测是否触发震动报警。5.数据采用OLED显示屏进行显示。6.采集数据也会通过蓝牙实时发送到手机新型显示。7.采集…

TODAY

今日更新

THIS WEEK

本周精选

THIS MONTH

本月热门

读完文章,想聊聊您的网站?

告诉我们您的行业与需求,资深顾问一对一梳理方案与报价,全程免费。

📞 💬