使用 字蛛 压缩字体文件实现网站加速

这是一个神奇的东西

个人开发的时候使用了艺术字体,由于谷歌和微软等巨头没有收录,为了缩短服务加载时间,本人找到两种方法

  1. cdn加速,腾讯云目前进行免费cdn加速服务,但是由于使用的域名没有进行备案,所以 pass
  2. 使用字蛛 压缩所使用的字体文件

下面是坑

@font-face {
    font-family: 'xixinkaijian';
    src:url('../fonts/xixinkaijian.eot');
    src:
        url('../fonts/xixinkaijian.eot?#font-spider') format('embedded-opentype'),
        url('../fonts/xixinkaijian.woff') format('woff'),
        url('../fonts/xixinkaijian.ttf') format('truetype'),
        url('../fonts/xixinkaijian.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
`</pre>

<pre>`@font-face {
    font-family: 'hycgj';
    src:url('../fonts/hycgj.eot');
    src:
        url('../fonts/hycgj.ttf') format('truetype'),
        url('../fonts/hycgj.eot?#font-spider') format('embedded-opentype'),
        url('../fonts/hycgj.woff') format('woff'),
        url('../fonts/hycgj.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
`</pre>

<pre>`@font-face {
    font-family: 'hyngj';
    src:url('../fonts/hyngj.eot');
    src:
        url('../fonts/hyngj.ttf') format('truetype'),
        url('../fonts/hyngj.eot?#font-spider') format('embedded-opentype'),
        url('../fonts/hyngj.woff') format('woff'),
        url('../fonts/hyngj.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
`</pre>

#此处需注意font_1前面没有像平常引用地址的**小数点**

<pre>`font_1 p {
    font-family: 'xixinkaijian';
}
`</pre>

<pre>`font_2 p {
    font-family: 'hycgj';
}
`</pre>

<pre>`font_3 p {
    font-family: 'hyngj';
}