如何获取Google Fonts未提供的字体权重？Figma实现原理揭秘

一、Figma是怎么实现细分字体权重的？ #

Figma主要靠两种核心技术实现这个效果：

• 矢量字体轮廓插值：如果使用的是静态字体包（比如Google Fonts提供的Lato固定权重文件），Figma会分析不同权重字体的字形矢量路径，对路径上的控制点进行插值计算，在已有权重（比如300和400）之间生成视觉自然的中间权重轮廓。这种计算是在设计工具的渲染层面完成的，不依赖额外字体文件。
• 优先支持可变字体：很多字体（包括Lato）都有可变字体版本，这类字体在单个文件中包含了连续的权重范围（比如100到900），可以直接调整到任意细分权重。Figma会自动识别并加载字体的可变版本，从而实现无缝切换十多种权重的效果，而你感知到的“相同字体文件”其实是包含全权重范围的可变字体文件。

二、如何在CSS中实现类似的细分字体权重效果？ #

方法1：使用可变字体（推荐，效果最佳） #

大部分主流字体都提供可变字体版本，以Lato为例：

1. 获取Lato的可变字体文件（可从官方字体发布渠道下载），或者通过字体服务引入支持可变字体的样式表。
2. 在CSS中通过@font-face引入并使用：

@font-face {
  font-family: 'Lato';
  src: url('path/to/lato-variable.ttf') format('truetype-variations');
  /* 指定字体支持的权重范围 */
  font-weight: 100 900;
}

.target-text {
  font-family: 'Lato', sans-serif;
  font-weight: 550; /* 可以设置100-900之间的任意数值，比如520、680等 */
  /* 也可以用font-variation-settings精确控制权重轴，效果与font-weight一致 */
  /* font-variation-settings: 'wght' 550; */
}

这样设置后，浏览器会直接渲染出对应权重的字体效果，和Figma里的表现一致。

方法2：静态字体的视觉模拟（仅应急使用） #

如果只能用静态字体包，只能通过CSS属性模拟近似效果，但这种方法会影响字体清晰度和排版精度，不推荐用于正式场景：

/* 基于400权重模拟500效果 */
.text-simulate-500 {
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  /* 轻微横向拉伸模拟加粗 */
  transform: scaleX(1.03);
  transform-origin: left center;
}

/* 或者用文本阴影叠加模拟，但会导致字体模糊 */
.text-simulate-600 {
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  text-shadow: 0.4px 0 currentColor, -0.4px 0 currentColor;
}

内容的提问来源于stack exchange，提问作者Birrel