首页/新闻资讯/正文详情

接入 Inter 变量字体:两行 CSS 从落地到生产级排版

发布时间:2026/11/4 1:11:48 来源:云帆数科 栏目:资讯中心
接入 Inter 变量字体:两行 CSS 从落地到生产级排版
接入 Inter 变量字体两行 CSS 从落地到生产级排版【免费下载链接】interThe Inter font family项目地址: https://gitcode.com/gh_mirrors/in/inter后台系统、数据产品里大量的正文停留在 13–16px而多数系统字体在小字号下 x 高度偏矮、间距局促文字显得发灰发糊。Inter 就是为这种屏幕小字设计的几何无衬线字体它是可变字体字重 100–900 全区间连续可调还带一条 14–32 的光学尺寸轴采用 SIL OFL 1.1 许可证LICENSE.txt可免费商用、嵌入产品、随软件分发唯一限制是不能把字体本身当商品出售。网页接入两行 CSS 跑通 Inter仓库里的 docs/inter.css 一次性声明了三组字族InterVariable可变版单文件覆盖全部字重、Inter小光学尺寸的静态文件和InterDisplay大光学尺寸的静态文件。文件头部注释里就写了标准用法HTML 头部引一行 stylesheetCSS 里做静态打底 变量升级link relpreconnect hrefhttps://your-font-file-host/ link relstylesheet hrefhttps://your-font-file-host/inter.css:root { font-family: Inter, sans-serif; } supports (font-variation-settings: normal) { :root { font-family: Inter var, sans-serif; } }supports负责探测浏览器是否支持变量字体旧浏览器落到静态文件新浏览器自动切换到可变版。上线后你会得到单个约 340KB 的 woff2 文件docs/font-files/InterVariable.woff2font-weight从 100 到 900 任意数值都由它插值渲染替代了传统每个字重一个文件的 18 次请求。玩转变量轴wght 之外的 opsz 光学尺寸Inter 与一般变量字体的区别在于多了一条opsz轴14 对应 text、32 对应 display。同一字母 X 在两种光学尺寸下的差异下图看得很清楚左侧是文本版右侧是 Display 版注意橙色基准线的位置——Display 版的小写字母明显更高、笔画对比更强大字号下更扎实CSS 里按元素声明即可标题拉满显示优化正文保持文本优化这正是字体设计师预设的排版分层h1 { font-variation-settings: wght 700, opsz 32; } p { font-variation-settings: wght 400, opsz 14; }做完这一步同一份字体文件在不同字号下自动切换渲染策略你不用再手动在两个字族之间挑选。打开 OpenType 特性斜线零与表格数字仓库 src/features/ 目录放着完整的特性定义对开发者最实用的是三个。zero把普通 0 换成斜线零所有字形变体都有对应替换见 zero.fea代码、序列号场景必开tnum让数字等宽表格里的列数字能逐行对齐calt上下文替代会根据周边字形自动挑选标点形状默认开启。仓库还内置了实时切换的演示页 docs/lab/每个特性都能肉眼对比开关效果。code, .serial { font-feature-settings: zero; } .table-cell { font-feature-settings: tnum; }真实场景与适用边界场景你在做一个 B 端 SaaS 后台正文 14px、数据表格密集、有代码块、有大标题。Inter 的覆盖正好是这个区间——正文wght 400配opsz 14数字列开tnum代码区开zero顶部标题wght 700配opsz 32。如果还要显示西里尔、希腊文字体已内置支持清单见 docs/_data/languages.yml不用另配字体。多语言并排渲染的实际效果见下图四种语言正文节奏一致重点看第一行数字与符号区标点和货币符号的字形都很克制两个明确的坑一是别用 Google Fonts 上的版本README 明确说它过期且没有斜体字体文件应自行托管本仓库的产物二是opsz别乱拉满opsz 32是给大字号用的套在 14px 正文上笔画对比会显得发飘。反过来讲Inter 的定位是拉丁、希腊、西里尔文字的屏幕小字如果你的产品主语言是中文、阿拉伯文或需要竖排排版它只能当辅助字体不是正解。三句话带走接入照抄 docs/inter.css 的supports写法可变版加静态兜底一次到位。代码区开zero、表格数字列开tnum两行font-feature-settings的回报远超换字体本身。SIL OFL 1.1 允许免费商用和随产品分发唯一红线是别出售 Inter 本身衍生字体也别沿用保留名称 Inter。动手前建议先到 docs/lab/ 把每个特性开关拨一遍比再读三页文档更直观。【免费下载链接】interThe Inter font family项目地址: https://gitcode.com/gh_mirrors/in/inter创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

相关推荐

深度解析Hermes Agent容器化部署:5大安全架构策略与生产实践
深度解析Hermes Agent容器化部署:5大安全架构策略与生产实践

深度解析Hermes Agent容器化部署:5大安全架构策略与生产实践 Hermes Agent是一个功能强大的AI智能代理框架,支持多模态交互和团队协作。在容器化部署场景中,如何构建安全、高效、可维护的镜像成为技术团队面临的核心挑战。本文将深入探讨Her… · 2026/11/4 1:11:48

NapCatQQ 完整指南:从部署 NTQQ 机器人到发送第一条消息的一站式入门
NapCatQQ 完整指南:从部署 NTQQ 机器人到发送第一条消息的一站式入门

NapCatQQ 完整指南:从部署 NTQQ 机器人到发送第一条消息的一站式入门 【免费下载链接】NapCatQQ Modern protocol-side framework based on NTQQ 项目地址: https://gitcode.com/gh_mirrors/na/NapCatQQ NapCatQQ 是一个基于 NTQQ 的现代化 QQ 机器人协议框架… · 2026/11/4 1:11:48

Hermes Agent容器镜像优化实战指南:5个关键技术实现70%体积缩减与部署加速
Hermes Agent容器镜像优化实战指南:5个关键技术实现70%体积缩减与部署加速

Hermes Agent容器镜像优化实战指南:5个关键技术实现70%体积缩减与部署加速 在云原生时代,AI代理系统的容器化部署面临严峻挑战:庞大的依赖库、复杂的运行时环境、缓慢的构建速度直接影响开发效率和运维成本。Hermes Agent作为一款功能丰富的… · 2026/11/4 1:11:48

对应点齐了,相机位姿还是不对?用 Kornia 把 PnP 算对的最小路径
对应点齐了,相机位姿还是不对?用 Kornia 把 PnP 算对的最小路径

对应点齐了,相机位姿还是不对?用 Kornia 把 PnP 算对的最小路径 【免费下载链接】kornia 🐍 空间人工智能的几何计算机视觉库 项目地址: https://gitcode.com/kornia/kornia 3D 重建对不上、相机放偏了——你有 2D-3D 对应&#xff0c… · 2026/11/4 1:48:00

Wan2.2-TI2V-5B 本地部署指南:单张 4090,9 分钟出 5 秒 720P 视频
Wan2.2-TI2V-5B 本地部署指南:单张 4090,9 分钟出 5 秒 720P 视频

Wan2.2-TI2V-5B 本地部署指南:单张 4090,9 分钟出 5 秒 720P 视频 【免费下载链接】Wan2.2-TI2V-5B Wan2.2-TI2V-5B是一款开源的先进视频生成模型,基于创新的混合专家架构(MoE)设计,显著提升了视频生成的质… · 2026/11/4 1:48:00

没 iPhone 也能玩:DiPlay 热点模式白嫖 CarPlay
没 iPhone 也能玩:DiPlay 热点模式白嫖 CarPlay

没 iPhone 也能玩:DiPlay 热点模式白嫖 CarPlay 【免费下载链接】DiPlay Independent CarPlay receiver for compatible Android head units. Wired and wireless public preview. 项目地址: https://gitcode.com/gh_mirrors/di/DiPlay 先说个扎心的帖子 车… · 2026/11/4 1:47:00

如何用Hermes Agent打造你的智能投资助手:从零到专业分析的完整指南
如何用Hermes Agent打造你的智能投资助手:从零到专业分析的完整指南

如何用Hermes Agent打造你的智能投资助手:从零到专业分析的完整指南 在AI技术快速发展的今天,拥有一个能理解市场动态、提供专业投资建议的智能助手已经成为现实。Hermes Agent作为一款自学习AI代理框架,为你提供了构建个性化金融分析系统的… · 2026/11/4 1:47:00

沁恒 RISC-V 蓝牙应用中常用蓝牙参数的设定和修改
沁恒 RISC-V 蓝牙应用中常用蓝牙参数的设定和修改

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

KoboldCpp v1.98 使用指南:一个文件跑起本地 AI 模型,5 分钟见到第一条回复
KoboldCpp v1.98 使用指南:一个文件跑起本地 AI 模型,5 分钟见到第一条回复

KoboldCpp v1.98 使用指南:一个文件跑起本地 AI 模型,5 分钟见到第一条回复 【免费下载链接】koboldcpp KoboldCpp - Run GGUF AI models locally with a KoboldAI UI. One File. Zero Install. 项目地址: https://gitcode.com/gh_mirrors/ko/koboldcp… · 2026/11/4 1:47:00

双极步进电机控制实战:DRV8818PWPR与PIC18F86K22驱动调试
双极步进电机控制实战:DRV8818PWPR与PIC18F86K22驱动调试

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

STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析
STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析

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

DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案
DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案

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

AI辅助技术栈评估:提升研发决策效率60%
AI辅助技术栈评估:提升研发决策效率60%

1. 项目背景与核心价值技术决策一直是研发团队面临的重大挑战。随着技术生态的快速演进,技术栈的选择、维护和迭代变得愈发复杂。我们团队在过去两年里,先后经历了三次重大技术栈迁移,每次都需要投入大量人力进行技术评估和风险分析。直到去年… · 2026/11/4 0:00:17

从生成Token到直接决策:Jev如何重塑AI Agent工程实践
从生成Token到直接决策:Jev如何重塑AI Agent工程实践

1. 从"生成文字"到"拍板决策":Jev 到底在解决什么问题大多数人第一次接触大模型,脑子里建立的模型是"输入问题、输出文字"。你问它今天天气怎么样,它给你一段描述;你让它写个周报,它给你… · 2026/11/4 0:00:17

32G统一内存跑大模型:内存账、TPS实测与端云分流
32G统一内存跑大模型:内存账、TPS实测与端云分流

想在一台 32G 统一内存的小主机上把大模型跑成"日常可用",这件事我前后折腾了小半年。标题里说的这台 Mac mini M6,是我们这次讨论的目标平台,具体到手规格以实物为准;但下面这套推算方法和实测思路,对任何统… · 2026/11/4 0:00:17

双极步进电机控制实战:DRV8818PWPR与PIC18F86K22驱动调试
双极步进电机控制实战:DRV8818PWPR与PIC18F86K22驱动调试

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

STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析
STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析

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

DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案
DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案

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

了解更多?预约专属演示

我们的顾问将为您一对一讲解产品与方案

企业微信二维码