图片压缩和自定义字体包

       前端工作中，我们经常会发现，设计师为了追求设计稿的美观使用了非常炫酷的字体。一方面咱不敢给前端大佬提要求，另一方面我们也得对自己的工作负责，泪往肚子里咽，有问题想办法解决。

       Iphone手机自带的字体是PingFang SC(没事，就顺带提一嘴)，一般我们做的项目本身就没有多大，但是一个字体包(*ttf,*otf等等)文件却有将近10M的大小，显得过于冗余。

       在这里我推荐一个我自己使用的图片压缩网站，我觉得非常好用。https://tinypng.com/，不仅仅压缩图片是无损的，界面也非常的萌萌哒。

 

                                                                                   （打钱）

        作为一个合格的前端，你必须在打包代码的时候，养成这样压缩图片的好习惯。

        扯远了，说回我们的字体问题，很多时候如果是需要动态生成一些不确定性的文本，需要使用特殊字体的话，我是建议直接引入你的字体包，这个目前我的能力有限，还无法避免。

       这里贴一段我的代码

 @font-face {                 font-family: "cityName";                 src: url("../font/cityName/PangMenZhengDaoCuShuTi-2.eot");                 /* IE9 */                 src: url("../font/cityName/PangMenZhengDaoCuShuTi-2.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */                 url("../font/cityName/PangMenZhengDaoCuShuTi-2.woff") format("woff"), /* chrome、firefox */                 url("../font/cityName/PangMenZhengDaoCuShuTi-2.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */                 url("../font/cityName/PangMenZhengDaoCuShuTi-2.svg#PangMenZhengDaoCuShuTi-2") format("svg");                 /* iOS 4.1- */                 font-style: normal;                 font-weight: normal;             }

       在我们的项目下面新建一个font文件夹，用于存储我们的字体包(个人习惯仅供参考)。

        而对于一些，我们已知的固定的字体，我们如果还引入字体包是非常不适宜的。这里我觉得有两种方法，一种是将字体做在图片上，我们使用图片。另一种就是我今天要说的方法，首先我们先确定那些需要用到特殊字体的文本，然后使用我的这个软件(下载地址会放置到底部)。

       打开来之后是这样的，我们将所需要使用的字体包拖入1位置（注:只支持*ttf格式的字体包),然后将我们所需要转换的文本卸载图中的2处，一切准备完成之后，我们就点击3.我们就可以获得我们所需要的文件。

文件格式如下:

        这样就获得我们需要的字体包了，但是对于那些没有录入的文本会使用自带的字体。代码同上。

        那么有些同学就要说了，只可以使用*ttf格式的字体包，那其他的怎么办了，不急，我们有很多在线的转换格式的网站可以帮我们实现格式的转化。例如https://convertio.co/zh/otf-ttf/

 

 

                                                                   (打钱)

   这就不需要我过多的解释了。

在这里贴一段使用时候的代码。.div{  font-family:cityName}

        我给我那个字体的命名是cityName，所以我可以这样写。你学会了吗。

 

链接：https://pan.baidu.com/s/1s8i_jthN2EnHlQHXGswBSA

提取码：omau

复制这段内容后打开百度网盘手机App，操作更方便哦