css的font-weight:500和设计稿的不一样，如何解决？

Question

设计稿：

css出来的效果：

如图：为什么设计稿的字体会比较粗呢，如何解决。

Answer 1

中文文字内容的字重只有 普通 和 加粗 两种。并没有 light、regular、bold 之分。虽然可以通过文字描边实现类似的效果，但是没有必要，和设计师说明一下情况就好。

另外一个就是你直接使用具体的字体，如果客户端的设备没有安装对应字体的话，是不会应用的。
当然你可以使用 @font-face 来引入自定义的字体包，但是并不建议这样用，因为中文字体包动则 3~4M 以上，很占用带宽，会对项目有很多衍生影响（如果使用 Minify font seamlessly 缩减字体库的话，会造成其他的问题）。

---

最后也是很重要的一件事，
如果没有购买字体的商业授权，最好不好指定字体。不然容易被律师函警告。

Answer 2

指定的字体 PingFangSC 不一定生效，设备上不一定安装了这个字体。

不同字体的展示效果也是不同的。

为了确保字体一定生效，可以把页面中出现的文字从字体文件中提取出现，生成字体子集文件，然后通过 @font-face 引入。

Answer 3

UI设计的字体PingFangSC估计你的电脑上面没有，这个一般都是苹果系统自带的，这个问题不好解决，每个客户端和浏览器不一定支持这种字体，可以和设计师说明情况，当然也可以引入字体，但是引入字体有侵权风险
我们目前解决解决办法是：使用font-family多设置一些字体，按照权重支持就显示，没有只能显示默认的字体

 font-family:PingFangSC-Medium, PingFangSC-Regular, PingFang SC, Microsoft YaHei,Arial,Helvetica,sans-serif,'宋体','黑体';

Answer 4

设计稿一般是安装苹果的尺寸进行设计输出，然后进行适配，开发写进代码的字体 如果编译代码的终端没有这个字体，你的font-family写了也是白写，这个建议跟设计师沟通 换字体 换粗细等手段最终是还原设计稿达到视觉效果，多沟通吧。