如何设置小于100的font-weight，调整font-size时不改变字重

我将font-size从0调整到30px时，font-size和font-weight都发生了变化，但我只希望增大font-size，不改变font-weight。
下图是我增大font-size后的效果：

我想要实现的效果如下所示：

请问该如何实现？非常感谢各位的帮助！

解决方案 #

你可以按以下优先级逐一排查解决：

• 显式声明固定的font-weight取值
  不要依赖父级继承的默认字重，在目标元素上明确写死字重值，避免属性默认重置带来的变化。如果使用font简写属性，必须显式带上字重参数，否则简写规则会自动将font-weight重置为默认值。

.target-element {
  font-weight: 400; /* 常规字重对应400，加粗对应700，按需固定即可 */
}

• 不要用transform: scale实现文字大小变化
  如果是通过缩放元素模拟字号变化的动效，缩放过程中文字会被拉伸，看起来就像字重变粗。改为直接过渡font-size属性即可：

.target-element {
  transition: font-size 0.3s ease;
  font-weight: 400;
}
/* 触发字号变化的状态类 */
.target-element.active {
  font-size: 30px;
}

• 固定字体渲染配置
  部分浏览器会在字号变化时自动调整抗锯齿策略，导致视觉上字重变化，可以固定抗锯齿相关参数：

.target-element {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

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