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

这是一个神奇的东西

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

  • cdn加速,腾讯云目前进行免费cdn加速服务,但是由于使用的域名没有进行备案,所以 pass
  • 使用字蛛 压缩所使用的字体文件
    #####下面是坑
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    @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';
    }
点击查看
-------------------本文结束 感谢您的阅读-------------------
0%