PingFang sc字体的使用

前言

        刚开始从事于网站这个行业时，记得那时候做的页面都是宋体。过了两年之后特别流行微软雅黑。现在微软雅黑已经不能满足我们的审美要求，就想可不可以换成各种各样的想要的字体。于是@fant-face被人熟知到熟用，这里就先不详细阐述@font-face了。先说说苹果字体PingFang sc。最近ui同学觉得页面上的微软雅黑不好看，看着苹果官网的字体不错。但是苹果官网的字体是苹果的官方字体，不得商用，然后就有了PingFang sc。

问题

         然后我就去网上下载了一个PingFang sc字体，放到服务器上面，然后css中引入（如下图1），再在body中引入自定义的这个名称（如图2）。觉得很高兴，终于有了满意的字体效果了。这是发现了一个bug，文字的颜色竟是一个深一个浅，看起来特别丑。去网上找资料看看是什么问题，也没有找到相关的资料，后来问了另一个前端同学加上看了苹果官网是怎么解决的。然后找到了解决办法。

1 2

解决

        去网上download了PingFang sc 的所有规格字体。从极细到特粗一共是六种。然后用到哪种的时候就调用哪个字体（如下图1、2）。

1 2

       现在网站里面用的是常规类型，看着比较合适。

END

       因为网上也没有解释这个问题的相关资料，所以我们尝试着找方法去解决。第一次有bug的原因可能是下载的字体不对。以免以后再遇到类似问题，所以在此处做个记号。

       如果上面阐述中有不对的地方，还请指出。互相帮助，互相学习，谢谢！

      另：附上一个压缩字体的插件连接    http://font-spider.org/    

      大概好处就是，可以把10多兆的字体文件压缩到几十k，加快加载速度；并且可以自动生成各种兼容需要的字体文件；缺点是：压缩方法很粗暴，就是把项目中的所有html检查一遍，然后把没用过的文字从字体文件中剔除；这样导致的问题是，在以后的改版调试中新加的某些之前没出现过的文字，就需要从新运行font－spider压缩一次字体文件