★ FEATURED ARTICLE 做品牌视觉这十几年被问得最多的问题之一就是“有没有那种一看就特别未来的字体”问的人五花八门有做智能硬件的、做数据中台的也有给一场科技发布会赶物料的。我一般不会直接甩个字体名过去因为科技感字体这五个字里藏着一个特别容易踩的坑很多人以为“科技感”是字体自带的属性其实它是一组视觉变量在特定场景下叠加出来的结果。同一款字摆到 96px 的发布会主视觉上冷峻得像来自十年后压进 12px 的正文里立刻糊成一团反过来一款看起来平平无奇的等宽字体配上合适的数据图表和间距反而比任何“未来风”字体都更像一家真在做技术的公司。这篇东西想聊的就是这件事怎么挑、怎么配、怎么落地。我会把“科技感字体”拆成可判断的视觉变量再给出六类在实际项目里反复验证过的字体方向每一类都讲清楚它适合谁、不适合谁、参数怎么调。中间会穿插我在品牌项目里踩过的坑——字体加载后页面抖一下、中英混排基线错位、小字号笔画粘连、商用授权埋雷这些都不是看字体预览页能发现的问题。适合正在做品牌升级的设计师、要给自己产品选字的前端和产品经理也适合单纯想搞明白“为什么有些字看起来就很高级”的爱好者。不需要你有字体设计基础但需要你愿意为几十像素的差异较真。1. 拆解“科技感”先看清字体里哪几个变量在起作用聊选型之前得先把“科技感”这个模糊的形容词拆开不然选字体就变成了逛字体网站凭感觉点收藏最后拼出来的东西像六个人各穿各的衣服。我的经验是所谓科技感本质上来自三个维度的克制骨架的几何纯度、笔画的对比度、以及节奏的一致性。这三个变量任意一个走偏字就会从“精密”滑向“廉价”或者“玩具感”。1.1 骨架、切口、字重决定第一印象的三个变量先看骨架。字体的骨架指的是字母内部的构造逻辑比如字母 O 是接近正圆还是压扁的椭圆字母 a 是单层结构还是双层结构字母 G 的横杠是直的还是带钩。科技感强的字体骨架往往高度几何化——圆形基于正圆转折基于直角斜线基于等边三角形的角度。这种几何化会给人一种“被计算过”的心理暗示而这正是科技叙事最想要的效果。你可以做个实验把同一段标题分别用几何骨架和人文骨架的字体排出来前者看起来像产品参数页后者看起来像生活方式广告差别非常明显。再看切口。切口指的是笔画末端的处理方式是圆的、平的还是斜切的。科技感字体里最常见的是平切和斜切尤其是那种 45 度或 30 度的斜切终端它会在视觉上制造一种“被激光切割过”的锐利感。相对的圆形终端和喇叭口终端会带来手写和古典的气质用在科技场景里会显得软。这也是为什么很多品牌在做视觉升级时光是换掉喇叭口终端整体调性就能往前推五年。最后一个变量是字重和它的分布。科技感不来自“粗”而来自字重阶梯是否够密、够极端。一套只有 Regular 和 Bold 两个字重的字体做不出细腻的层次而一套从 Thin 到 Black 有七八档、中间还有 SemiBold、ExtraBold 的字体家族才能支撑起从超大标题到脚注的完整表达。这里有个反直觉的点极细字重在大字号上非常“未来”但一旦降到 14px 以下就基本不可读屏幕上的抗锯齿会把它啃得七零八落。我见过不少项目把 200 字重用在正文里上线后一堆用户反馈“看着累”这不是审美问题是物理问题。提醒判断一款字体是否有科技感别看它的宣传页配图去看它在 12px、纯黑背景、无抗锯齿优化的情况下长什么样。能扛住这个场景的才值得进你的候选池。1.2 用一张对照表把品牌人格翻译成字体特征品牌选字体最怕的就是“我觉得好看”。更靠谱的做法是先把品牌人格翻译成可判断的描述再去匹配字体特征。下面这张表是我在做品牌视觉规范时常用的翻译逻辑左边是你对品牌的描述右边是对应的字体技术特征中间那一列是我实际会去字体详情页核对的具体项。品牌人格描述对应的字体技术特征核对清单精密、理性、工程师气质几何骨架、低对比度、平切终端看 O 是否接近正圆、看字腔是否偏方高速、动态、有冲劲斜体角度明显、字宽偏窄、字距紧凑看 Italic 是否为真斜体而非倾斜简洁、克制、留白多中性 x 高度、均匀字重、无装饰看是否有衬线、看连字是否克制数据密集、技术可信等宽节奏、表格数字、斜杠零看是否支持 tnum、zero 特性双语国际化中英配套设计、字重数量对齐看中文家族是否有对应 7 档字重实验性、前沿感可变字重、断笔、非常规字宽看是否有可变字体版本这张表的用法是先勾出你品牌最核心的两到三条再去找同时满足这几条的字体。请注意别贪心全选全部满足的字体基本不存在强行凑只会得到一锅乱炖。我一般会让团队先做减法把人格收敛到三条以内选型效率能提高一大截。2. 六款科技感字体的逐一选型拆解下面这六类方向是我在不同类型的科技品牌项目里反复用到的。为了让你能自己找到对应的字体我不会只丢名字而是给出每一类的识别特征、适用场景和明确的弃用信号。你在字体网站上按这些特征去筛比记住六个名字有用得多。2.1 第一款几何圆形骨架最“干净”的未来感这一类的识别特征是字母 O 接近正圆字母 a 是单层结构字母 G 带一条直横杠字母 M 的顶点通常削平或做成尖角整体字腔开阔、留白充足。它给人的第一印象是干净、开阔、有点冷很像早期科幻电影里飞船控制台的界面字体放到今天依然不过时。它最擅长的场景是大字号标题发布会主视觉、官网首屏大字、产品包装上的型号名、展厅墙面的品牌标语。在这个尺度上几何骨架的纯度会被放大圆形和直线的对比会形成一种“精密仪器”的观感。我在做一个智能硬件品牌的全案时把它的主视觉标题全部换成了这一类配合 -0.03em 的字距客户第一反应是“怎么突然变贵了”。但它的短板也很明显。第一小字号可读性一般因为几何化的圆形字母在小尺寸下容易糊成一团尤其是 e、a、s 这几个字母。第二不适合长段落它的节奏太均匀读三行以上眼睛会累。第三中文基本没有对应的几何骨架字体中英混排时你会面临“西文很未来、中文很普通”的割裂感这个问题我在第 3 章会讲具体解法。弃用信号如果你的正文占比超过页面的 60%或者产品里有大量 12px 以下的小字说明这一款只能当“装饰性标题字”别让它承担信息传达的主力。2.2 第二款低对比工业无衬线硬核硬件品牌的安全牌这一类的特征是笔画粗细几乎一致低对比度字腔偏方末端多为平切或轻微斜切x 高度偏大整体看起来敦实、有分量。它没有几何圆形骨架那么“飘”也没有人文无衬线那么“暖”处在中间偏硬的位置。我通常把它用在两类项目上。一类是工业设备、机器人、能源相关的品牌这类客户需要“可靠”多过“炫酷”低对比度的均匀笔画天然传递稳定感。另一类是 B 端产品的界面字体因为它在大字号和小字号之间的表现差异小一套字体能把官网页、控制台、说明书全部覆盖减少混用带来的视觉噪音。这类字体选型时有个隐藏指标要看字重之间的跨度是否够用。很多低对比度家族只提供 400、500、700 三档看着够实际排起来会发现“标题不够重、正文不够轻”。我一般要求至少五档最好有 300 到 800 的完整区间这样在暗色界面上做层次才有余地。暗色背景有个特性同样的字重白字在黑底上会比黑字在白底上显得更粗这叫光学膨胀所以暗色主题下的正文通常要比亮色主题降半档字重这一点后面还会展开。还有一个容易被忽略的细节是数字。工业品牌大量涉及参数、型号、规格如果字体的数字是比例数字每个数字宽度不同在表格里就会左右跳动看着非常不专业。选型时务必确认支持等宽数字特性或者至少提供表格数字的 OpenType 特性开关。2.3 第三款等宽工程体技术叙事里最有说服力的一款等宽字体的每一个字符占据相同的水平宽度这个特性原本来自打字机和早期终端设备所以它天然携带一种“机器感”和“底层感”。在科技品牌里它的价值被严重低估了——很多人只把它当代码字体用其实它在品牌叙事里的表现力极强。我常用的三个场景一是技术型产品的官网用它排命令行示例、API 片段、日志输出可信度立刻拉满二是数据看板和监控大屏等宽数字能让数值刷新时不发生横向抖动这个细节在实时数据场景里是硬需求三是品牌物料里的“技术标签”比如产品规格表、序列号、版本号用等宽字体排出来会自带一种“这是真参数”的暗示。选这一类字体时重点看三个地方。第一是否有斜杠零或点零就是数字 0 中间带一道斜杠或一个点用来和字母 O 区分。在代码和技术文档场景里这是刚需。第二i、l、1 的区分度好的等宽字体会给 i 加一个小衬线头、给 l 加一个弯钩让三个字符在小字号下也能分辨。第三是否有连字特性某些等宽字体会把箭头、大于等于这类符号组合渲染成连字视觉上更漂亮但在需要逐字符对照的场景里反而是干扰所以要确认这个特性可以关掉。提示等宽字体不要用在中文正文上。中文本身就是方块字、天然等宽西文等宽字体和中文搭配时英文单词会显得异常松散读起来像被拉长的口香糖。2.4 第四款可变字重家族一套顶三套可变字体是这几年的重头戏它把字重、字宽、倾斜甚至光学尺寸做成连续可调的轴一个文件顶过去五六个静态文件。对品牌来说它的意义不只是省体积更重要的是让排版能跟着屏幕和交互动态变化。举个实际例子同样是首屏大标题在 4K 大屏上我希望字重是 250、字宽略窄显得轻盈通透在手机上我希望字重提到 600、字宽略宽保证辨识度。用静态字体我得准备两套文件、写两套媒体查询用可变字体一行 CSS 的font-variation-settings就能连续过渡甚至可以在滚动时做字重的动态变化做出那种“字体在呼吸”的效果。这一类要重点关注光学尺寸轴。光学尺寸的意思是字体针对不同字号做了微调小字号版本笔画略粗、字腔略开避免糊大字号版本笔画略细、细节更锐利显得精致。有光学尺寸轴的可变字体同一套字体从 12px 到 120px 都能保持最佳状态这是静态字体做不到的。但可变字体也有坑。第一文件体积不一定更小如果只用到两个静态字重可变字体全量文件可能比两个静态文件加起来还大。第二老环境兼容性某些排版软件、某些低版本渲染引擎对可变字体的支持不完整可能出现字重不生效、回退成默认字重的情况。第三字体子集化工具的处理差异可变字体做子集化时如果工具版本旧容易把轴信息丢掉导出的文件变成静态字体。我在一个项目里就吃过这个亏本地测试一切正常上线后所有标题都变成默认字重排查了半天才发现是构建流程里的子集化工具版本太老。2.5 第五款中英双语配套体中文品牌绕不开的必选项做中文品牌纯西文的科技感字体只能解决一半问题。真正决定整体调性的是中文那一半。中文科技感字体的核心特征是骨架方正、笔画粗细均匀、折角处理干净、字面率高就是字在字身框里占的比例大看起来更饱满。这类字体通常以“黑体”家族的形式出现家族里带七八个甚至十几个字重。选中文科技感字体我的核对顺序是这样的。先看字重数量低于五档的基本不用考虑做不出层次。再看字符集覆盖至少要有常用简体字加标点如果涉及繁体或多语言市场还要看扩展字符集。然后看是否有配套西文很多中文字体家族会配套设计一套西文字母这套西文和中文是同一个设计语言下出来的混排时协调度远高于你自己另配一款西文字体。最后看变量字体版本如果家族提供可变版本优先选它。这里有个特别实际的问题中文字体的体积。一套完整的中文字体动辄几兆到十几兆直接丢到网页上会让首屏加载变得非常难看。所以中文网页字体基本都要做子集化按字符使用频率切分成多个分片配合unicode-range让浏览器只下载需要的分片。这个技术在下面第 3 章会给出具体做法。提醒中文科技感字体在极小字号比如 10px 到 11px下的表现差异很大有些字体在这个尺寸下笔画会互相粘连。选型时务必在真机上把字重 400 的字排一排看看“囊”“赢”“鑫”这种笔画密集的字能不能分辨。2.6 第六款展示型实验字体只给大字用最后这一类是“调味品”不是主食。它的特征是极度夸张的字宽超宽或超窄、断笔、几何重组、非常规的字重对比有的甚至把字母做成半抽象的图形。它出现的地方通常是科技展会的主题字、潮流科技品牌的 Logo 字、海报上的巨型标题。这类字体的价值在于制造记忆点。一场发布会的主视觉如果全部用稳妥的无衬线会显得很安全但也很平庸在关键位置放一个实验性字体做的巨型标题视觉冲击力立刻不同。我通常的做法是主标题的关键词用实验字体副标题和正文回归稳妥的家族字体形成“一个亮点 大量稳定”的结构。但它的使用边界必须卡死。第一绝不用于正文也不用于任何需要精确阅读的信息比如按钮文字、表单标签、说明条款。第二控制使用面积一屏里出现超过两处就会显得杂乱。第三注意字符集完整度很多实验字体只做了基本拉丁字母和少量符号缺中文、缺数字、缺标点一旦遇到需要排中文或特殊符号的场景就直接崩掉。第四核查授权实验字体大多来自独立设计师授权条款差异很大有的免费版只允许个人使用商用要单独购买。3. 把六款字体编成一套能跑起来的字体系统选完字体只是开始真正决定最终效果的是怎么把它们组织成一套系统。我见过太多品牌字体单独看都很好组合起来却像六个不同品牌拼在一起。问题基本都出在层级、间距和混排这三件事上。3.1 字号阶梯与字重映射表字体系统的第一件事是定层级。我的做法是先定一个基准字号再按固定比例往上往下推。基准字号一般取 16px网页或 10pt印刷比例我常用 1.25大四度或者 1.333纯四度前者层级温和、适合信息密集的产品后者对比强烈、适合品牌官网。下面这张表是我在一个科技产品官网项目里实际用的阶梯可以直接参考层级字号字重行高字距用途展示级56–72px250–3001.05-0.03em首屏主标题一级标题36–40px500–6001.15-0.02em章节标题二级标题24–28px5001.3-0.01em模块标题三级标题18–20px6001.40卡片标题正文16px4001.70段落文字辅助文字14px4001.60.01em说明、注释标签12–13px5001.40.05em分类标签、状态数据28–36px5001.1-0.01em数值展示等宽数字这张表里有两个地方值得展开。一个是展示级用 250 字重这只有在可变字体或者有极细字重的家族里才做得到视觉上会非常轻盈但前提是字号够大、背景够干净。另一个是标签用 0.05em 的正字距因为小字号的全大写字母如果字距为 0会挤在一起加一点正字距能明显提升辨识度这个小细节在规范文档里经常被漏掉。3.2 字距、行高与光学修正的实测参数字距这件事规律很简单但特别容易被忽略字号越大字距越要收字号越小字距越要放。原因是字体的默认字距是按中等字号设计的放大之后字母之间的空隙在视觉上被同比放大显得松散缩小之后空隙被压缩显得拥挤。所以展示级标题要用负字距把字母“收拢”小字号标签要用正字距把字母“撑开”。具体数值上我的经验区间是72px 以上的标题用 -0.03em 到 -0.04em36px 到 48px 用 -0.02em 左右正文 16px 用 012px 到 13px 的全大写标签用 0.04em 到 0.06em。这些数值不是拍脑袋是反复调出来的视觉平衡点你可以直接拿去用再根据实际字体微调半档。行高方面西文正文 1.5 到 1.6 就够中文正文要放到 1.7 到 1.8因为汉字是方块结构、没有上下伸部行与行之间必须留出足够空气才不压抑。标题行高可以压到 1.05 到 1.15尤其是多行大标题行高越紧气势越足但低于 1.0 就会开始撞字。还有一个专业一点的参数叫光学修正主要是针对可变字体的光学尺寸轴。如果你用的字体带这个轴务必让排版系统自动按字号匹配小字号自动切到细笔画打开字腔的版本大字号自动切到细节锐利的版本。CSS 里可以这样写.title { font-family: Brand Sans, sans-serif; font-variation-settings: wght 280, opsz 72, wdth 96; letter-spacing: -0.03em; } .body-text { font-variation-settings: wght 400, opsz 16; letter-spacing: 0; } .data-number { font-variant-numeric: tabular-nums slashed-zero; font-feature-settings: tnum 1, zero 1; letter-spacing: -0.01em; }opsz那个值要和实际字号大致匹配别写死一个不动的数。wdth是字宽轴科技感品牌我一般会收到 96 左右让字稍微窄一点显得更精密。3.3 中英混排的基线对齐与比例控制中英混排是中文品牌最头疼的问题也是最容易露怯的地方。核心矛盾在于中文字面率高、视觉重心偏低西文字面率低、重心偏高两者放在一行里如果直接按同一个字号排往往会出现“中文看着大、英文看着小”或者“英文浮在上面”的问题。我的处理办法是三步走。第一步控制字号比例西文字号设成中文字号的 0.95 到 0.97 倍。比如中文 16px西文用 15px 或 15.5px视觉上两者的字面高度就接近了。第二步靠字体栈顺序对齐基线把西文字体写在字体栈前面中文字体写在后面浏览器会先用西文字体渲染所有拉丁字符遇到中文再回退到中文字体这样基线自然对齐不会出现错位。第三步微调行高中英混排的段落行高要比纯中文再放 0.05 到 0.1给西文的上下伸部留出空间。还有一个进阶技巧是统一 x 高度。如果你有条件选字体尽量选那些 x 高度接近的中英配套字体。x 高度指的是小写字母 x 的高度它决定了文字的主体视觉大小。中文字体的“x 高度”概念上对应的是汉字主体的高度两者差距太大会让混排看起来像两种字号。这一条在选型阶段就要核对等到排版阶段再调就很费劲了。注意不要为了对齐而手动给英文加vertical-align或者position: relative微调这些补丁在响应式布局里会全部失效。基线问题必须在字体栈层面解决。3.4 网页端加载子集化、预加载与布局抖动治理字体系统的最后一步是工程落地。很多品牌官网视觉稿很漂亮上线后首屏字体闪一下再变或者加载期间大面积布局跳动体验非常差。这几个问题的解法是明确的。子集化是第一步。西文字体去掉不需要的语言和符号通常能从几百 KB 压到几十 KB。中文字体必须按字符频率切片把最常用的几百个汉字放在第一片次常用的放第二片通过unicode-range声明每个分片负责的字符范围浏览器会自动按需下载。一个处理得当的中文网页字体首屏实际下载量可以控制在 100KB 到 200KB 之间。预加载是第二步。首屏关键的那一款字体通常是标题字或者正文字用link relpreload asfont crossorigin提前拉取能省掉几百毫秒的等待。但别把所有字体都 preload会挤占带宽、拖慢其他资源。布局抖动治理是第三步也是最容易被忽略的。字体从回退字体切换到自定义字体时字符宽度差异会导致整个页面重新排版这就是你看到的“页面抖一下”。解法是给回退字体配一份度量覆盖用size-adjust、ascent-override、descent-override这几个属性让回退字体的字面大小和行高尽量贴近目标字体font-face { font-family: Brand Sans Fallback; src: local(Arial); size-adjust: 102%; ascent-override: 92%; descent-override: 22%; line-gap-override: 0%; } body { font-family: Brand Sans, Brand Sans Fallback, sans-serif; }配合font-display: swap让文字先用回退字体显示自定义字体加载完再切换虽然还是会有变化但因为度量接近不会出现大幅跳动。这套方案我在这两年的项目里基本是标配上线后基本看不到用户抱怨文字闪动。4. 授权边界字体系统里最容易埋雷的一环字体授权这件事我是真见过血。有个项目上线三个月后收到授权方的函件原因是设计团队从某个免费字体站下的字体站点标注“免费商用”但原厂授权里写得很清楚网页嵌入需要单独许可。最后不仅补了授权费还紧急替换了全站字体返工量巨大。所以我现在的习惯是字体选型阶段就把授权核查做完绝不放到上线前。4.1 三类使用场景的授权差异字体授权不是“买一次就全都能用”它通常按使用场景分拆。最容易混淆的是下面这四类使用场景常见授权要求容易踩的坑桌面排版设计稿、印刷品按安装台数授权团队共用一份字体文件超出授权台数网页嵌入单独的网页字体许可常按访问量分级以为买了桌面授权就能上网页应用/游戏内嵌单独的嵌入许可打包进安装包后随分发扩散超出范围商标与 Logo多数授权明确禁止用于商标注册直接用字体排 Logo 去注册商标重点说商标这一条。很多授权协议里明确写了字体不得用于商标、标识、商号注册。也就是说你可以用这款字体排海报、排官网但不能拿它排出一个 Logo 然后去注册。真要用于 Logo通常需要走定制或者购买专门的标识授权。这一点在设计圈里争议很多但白纸黑字写在协议里做项目时就得按协议来。还有一个细节是转曲。很多人以为把文字转成矢量轮廓就不算使用字体了其实大多数授权协议里转曲后的使用仍然算使用只不过不再受“安装台数”限制。所以转曲主要解决的是交付和技术兼容问题不解决授权问题这个认知要建立起来。4.2 上线前的自查清单我把每次项目的字体核查整理成了一份清单逐条打勾能挡掉绝大部分风险确认每一款字体的来源渠道是官方或授权渠道不是二手打包站逐款核对授权协议中关于网页嵌入、应用内嵌、商标使用的条款记录授权类型、有效期、授权范围尤其是访问量或安装台数的上限确认开源字体是否保留了版权声明是否修改过字体文件部分协议对修改后分发有额外要求团队内部建立字体资产清单明确哪款字体可以用在哪些场景涉及 Logo 的场景确认是否需要单独的标识授权或考虑定制提醒开源不等于无条件。部分开源字体许可要求保留原版权声明部分对“修改后以原名称分发”有限制。用之前花十分钟读一遍协议比事后补救便宜得多。5. 排障实录那些上线后才暴露的字体问题下面这些是我在实际项目里真实遇到过、并且排查过的问题。它们有个共同点在字体预览页和设计稿里都看不出来只有到了真实设备、真实内容量、真实网络环境下才暴露。5.1 屏幕显示类发虚、粘连、伪加粗发虚最常见的原因是字重太细。很多设计师在大屏上看着 200 字重的标题很漂亮到了笔记本或者低分辨率显示器上就变成一片灰雾。屏幕渲染和印刷不一样极细笔画在像素网格上无法稳定落点会被抗锯齿处理成半透明的灰边。解决办法是给极细字重设一个下限比如只在 40px 以上使用以下自动回退到 300 或 400。粘连出现在小字号的中文上。汉字笔画多10px 到 12px 时相邻笔画容易挤在一起比如“量”“赢”这类字。这时候与其调字距不如直接提高字重或者提高字号改变渲染的落点对齐。我试过在各种缩放级别下对比最后发现最简单的解法是把最小正文字号定在 13px笔画粘连问题基本消失。伪加粗是最隐蔽的问题。当你需要的字重字体文件里没有时浏览器或者设计软件会自动做“合成加粗”就是把原来的字形往右下方复制一遍再叠上去。这种加粗在屏幕上看起来又糊又脏尤其是中文字体。判断方法很简单把文字放大到 400%看笔画边缘是不是有明显的重影。解法是确保字体家族覆盖你用到的所有字重缺档就用可变字体调别依赖合成。5.2 混排与版式类跳行、抖动、错位数字横向跳动在数据看板里太常见了。数值从 1 变成 8如果用的是比例数字整行文字会左右挪一下看着非常廉价。解法就是前面提到的表格数字特性给数字容器加上font-variant-numeric: tabular-nums问题立刻解决。加载抖动是网页字体特有的。除了度量覆盖还有一个容易漏的点不要把不同字重的字体拆成多个独立的font-face声明却不做任何加载策略浏览器可能只下载了 Regular标题的 Bold 在切换时又触发一次布局。合理的做法是把关键路径上的字重合并或者用可变字体一次性解决。基线错位在中英混排里出现得最多。典型表现是英文单词比中文高出一截或者被中文“压”下去一截。除了前面说的字体栈顺序和字号比例还有一个原因是行高设置用了固定像素值而不同字体的默认行高不同。我的习惯是行高一律用无单位倍数比如 1.7、1.5让行高随字号自动计算避免在响应式断点之间出现错位。5.3 问题速查表现象最可能的原因处理方式大标题在部分设备上发灰字重过细屏幕抗锯齿吃掉了笔画提高字重或设大字号下限小字笔画粘连字号过小或字体本身字腔偏窄最小正文字号提到 13px或换字体文字边缘有重影合成加粗缺字重补字重文件或用可变字体数字刷新时整行跳动使用了比例数字启用表格式数字特性首屏文字闪一下后重排字体加载引起的布局偏移配度量覆盖 font-display英文比中文高出一截字体栈顺序错误或字号比例不当西文在前、字号乘 0.95暗色界面文字显得过粗亮暗反转造成的光学膨胀暗色主题整体降半档字重中文网页字体加载极慢未做子集化按字符频率切片 unicode-range心得排查字体问题时先判断是“字的问题”还是“渲染的问题”。方法是在同一台设备上把同一段文字分别用系统默认字体和你的字体排出来如果系统默认字体也有同样的现象那就是渲染环境的问题换字体解决不了。最后分享一个我在做字体规范时的小习惯不要只交付一份 PDF 规范文档同时交付一个可运行的示例页面。规范文档里写“标题字重 280、字距 -0.03em”设计师和开发看到的理解可能完全不同而一个能直接在浏览器里打开、能切亮暗主题、能拉响应式宽度的示例页把所有这些参数都固化成了可对照的实物。这个示例页我在每个品牌项目里都会花一天做出来后来发现它省下的沟通成本和返工成本远远超过这一天的投入。字体这件事参数是死的落地的分寸感是活的能让人直接看到分寸感长什么样比写十页规范都管用。
阅读完成 · 觉得有帮助？
