css - font-weight 400 500，什么情况下可肉眼区分的出来？

Question

font-weight 400 500，什么情况下可肉眼区分的出来？
设计给的400和500，看着是不一样，做成页面看着就一样了。
请问在什么浏览器或者什么设备（PC、安卓、IOS、内置浏览器、pad）可肉眼看出他们的区别？
大佬们都是如何处理400和500的。

Answer 1

如果一个字体只有 normal 和 bold 两种粗细值选择，指定粗细值为 100-500 时，实际渲染时将使用 normal

和字体有直接关系，大部分的字体都是会分为以下这样各种字重类型：

• 100 - Thin
• 200 - Extra Light (Ultra Light)
• 300 - Light
• 400 - Regular (Normal、Book、Roman)
• 500 - Medium
• 600 - Semi Bold (Demi Bold)
• 700 - Bold
• 800 - Extra Bold (Ultra Bold)
• 900 - Black (Heavy)

但是实际情况下在网页端浏览的字体文件，可能不会时包含所有字重的字体包。特别是中文字体的情况。
中文字体包内容尺寸和英文字体包的内容差了好几个数量级，一些风格化的字体包会非常容易超过10M，所以基本上都以指定字重的形式去引入:

@font-face {
  font-family: "test";
  src:
    url("/fonts/test-regular.woff2") format("woff2"),
    url("/fonts/test-regular.woff") format("woff");
}

而设计师在设计的时候不会受到这个限制。所以如果不是确定客户端会携带的字体包，一般会让在设计UI的时候只使用 normal 和 bold 类型的字重。

• font-weight - CSS：层叠样式表 | MDN
• JELLY | 深入了解font-weight
• 解决 font-weight 无效的问题 - orange 前端随笔

Answer 2

飞机票：https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-weight
说人话：1、不要指望系统自带字体；2、图是图；代码是代码；3、非要出效果；让UI给你设计的字体,且让他保证版权,否则一律默认字体,只有细/正常/粗三种

Answer 3

在字体支持的情况下 ��，因为需要你的字体支持字重，不然你这里无论设置的是什么用字重都没有用