Figma与网页端Poppins字体显示不一致问题咨询

问题描述 #

使用Poppins字体族时，已在Figma中复制了完全相同的字体粗细、字号等参数，但网页端显示的字体仍存在差异，看起来更粗或更模糊：

Figma设计效果：

网页实际显示：

当前使用的CSS代码：

@font-face {
    font-family: 'Poppins';
    src: url(fonts/Poppins-Thin.ttf) format('truetype');
    font-style: normal;
    font-weight: 100;
}

@font-face {
    font-family: 'Poppins';
    src: url(fonts/Poppins-ExtraLight.ttf) format('truetype');
    font-style: normal;
    font-weight: 200;
}

@font-face {
    font-family: 'Poppins';
    src: url(fonts/Poppins-Light.ttf) format('truetype');
    font-style: normal;
    font-weight: 300;
}

@font-face {
    font-family: 'Poppins';
    src: url(fonts/Poppins-Regular.ttf) format('truetype');
    font-style: normal;    
    font-weight: 400;
}

@font-face {
    font-family: 'Poppins';
    src: url(fonts/Poppins-Medium.ttf) format('truetype');
    font-style: normal;
    font-weight: 500;
}

@font-face {
    font-family: 'Poppins';
    src: url(fonts/Poppins-SemiBold.ttf) format('truetype');
    font-style: normal;    
    font-weight: 600;
}

@font-face {
    font-family: 'Poppins';
    src: url(fonts/Poppins-Bold.ttf) format('truetype');
    font-style: normal;    
    font-weight: 700;
}

@font-face {
    font-family: 'Poppins';
    src: url(fonts/Poppins-ExtraBold.ttf) format('truetype');
    font-style: normal;    
    font-weight: 800;
}

@font-face {
    font-family: 'Poppins';
    src: url(fonts/Poppins-Black.ttf) format('truetype');
    font-style: normal;
    font-weight: 900;
}
  
* {
    font-family: 'Poppins',sans-serif;
}

解决步骤 #

1. 优化浏览器字体渲染 #

浏览器默认渲染策略可能让Poppins显粗，添加以下CSS规则修正：

* {
    font-family: 'Poppins', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* 必须明确指定与Figma一致的权重，避免浏览器自动插值 */
    font-weight: 400; 
}

• -webkit-font-smoothing: antialiased：优化Chrome、Safari等WebKit内核浏览器的字体细腻度
• -moz-osx-font-smoothing: grayscale：修复Firefox在Mac系统上的渲染偏差
• text-rendering: optimizeLegibility：提升字体清晰度与可读性

2. 确保字体文件与权重完全匹配 #

• 从官方渠道下载对应权重的Poppins字体（如Google Fonts），避免使用第三方修改版
• 检查@font-face中font-weight与文件名严格对应，比如Poppins-Regular.ttf必须绑定font-weight:400，防止浏览器自动合成粗体

3. 明确指定所有元素的字体权重 #

如果未明确设置font-weight，浏览器可能自动合成粗体。给所有使用Poppins的元素指定对应权重：

h1 {
    font-weight: 600; /* 对应Figma中的SemiBold */
}
p {
    font-weight: 400; /* 对应Regular */
}

4. 统一字号单位与数值 #

Figma中通常使用px作为字号单位，网页中避免用rem/em导致的换算偏差，直接设置与Figma完全一致的字号数值，比如：

p {
    font-size: 16px; /* 和Figma中的字号完全匹配 */
}

5. 改用WOFF2格式字体文件 #

WOFF2是浏览器优化后的字体格式，渲染更稳定且体积更小，替换原有TTF引用：

@font-face {
    font-family: 'Poppins';
    src: url(fonts/Poppins-Regular.woff2) format('woff2'),
         url(fonts/Poppins-Regular.ttf) format('truetype');
    font-style: normal;    
    font-weight: 400;
}

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