前端如何处理psd设计稿中文字使用的PingFangSC字体？

Question

拿到的设计稿中文字都用的是PingFangSC。把通用的font-family改成这样

font-family: "PingFang SC", "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "Hiragino Sans GB", "Source Han Sans CN Normal", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;

让页面在mac上优先使用PingFang SC字体，window上用微软雅黑
标题使用的是PingFangSC medium,详细介绍文字用的是PingFangSC light。

window电脑没有这种字体，标题的PingFangSC medium用的是 微软雅黑bold 看起来会有些大？
不用又和介绍文字没什么区别。
mac上使用的是PingFang SC 和 PingFangSC medium，PingFangSC light 看起来又有些区别？
不知道各位前辈有没有遇到过这样难受的问题？

Answer 1

中文字体包一般都会很大，放到服务器上再取下来效率很差，而且会出现页面抖动的问题，就是刚加载进来的时候是浏览器默认本身有的字体，整个字体文件下载下来后文字会被重新渲染，在这期间页面会出现抖动的现象，建议你就保留你现在的自己设置，如果用户的电脑本身有这个字体，那就取他系统里面的字体去渲染，没有的话取替代的字体。
如果字不经常换建议用图片，如果使用图片并且还是响应式页面的话，需要调整文字的大小，适配 PPI 的话，建议使用 SVG 图片格式。

Answer 2

遇到这种问题一般我都直接切成图片来搞，如果没有办法切图片的话，那就下载这个字体，传到服务器上去，然后再引用

Answer 3

叫UI改~！！！
哈哈开玩笑的，UI妹子是用来心疼的！！！
哈哈还是开玩笑的！！
。。。。
如果非要效果一致（这不是废话！），那就下载字体到服务器，然后再应用，但是似乎苹果的冬青黑字体是有版权的（未验证）。
不然就同一字体吧，其实有一些别的字体也很好看啊，像roboto什么的，可以考虑试试。
再者，如果标题不是经常换的，那也考虑切图。

Answer 4

不光是版权的问题，你装到服务器，客户打开页面的时候要加载字体，小的还可以，大的加载半天。还是做成图片吧

Answer 5

那玩意是苹果系统的字体，粗中细三种引入要50多M。放弃吧

Answer 6

系统自带字体，写在font-family里是没问题的，但如果放服务器上，不管是原字体文件还是裁切过的或者是转图转曲，原则上都会有版权问题，只是版权方追不追究的问题了。前端除以上提到的以外，最多是多适配几种相似字体，比如可以考虑下前段时间比较火的思源（话说干嘛不用思源？没记错的话不限商用吧）

Answer 7

没有字体库的话，就自己下载字体，上传到服务器，再在font-family里面引用就可以了
@font-face{

font-family:微软雅黑;
font-style:normal;
src:url(../dis_fun/line.ttf);

}

Answer 8

我一般只写 "Helvetica Neue", Helvetica, Arial 这三个

如果有必要的话 就引入web字体

Answer 9

@font-face

fontmin-字体子集化方案