preface

Recently after the deployment of VUE project, when opening the web page, TTF file download time is too long, after the reasonable use of search engine, may be their own solidified thinking can not digest the scheme given by the big guys, so on their basis to do some small changes, then the narrative of it.

1. Introduce font-spider dependencies

NPM install font spider -g to import dependencies. After executing, type font spider -V to check whether the dependency is imported successfully

2. Create three files in the root directory

2.1 fonts

TTF, lato-bold. TTF can be replaced by the TTF font package you want to use

2.2 the index. The CSS

Set @font-face and the corresponding class element here. For comparison purposes, let’s introduce two fonts for comparison

@font-face {
    font-family: 'Lato-Medium';
    src: url('./fonts/Lato-Medium.eot');
    src:
        url('./fonts/Lato-Medium.eot? #font-spider') format('embedded-opentype'),
        url('./fonts/Lato-Medium.woff') format('woff'),
        url('./fonts/Lato-Medium.ttf') format('truetype'),
        url('./fonts/Lato-Medium.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
.medium {
    font-family:'Lato-Medium';
}
@font-face {
    font-family: 'Lato-Bold';
    src: url('./fonts/Lato-Bold.eot');
    src:
        url('./fonts/Lato-Bold.eot? #font-spider') format('embedded-opentype'),
        url('./fonts/Lato-Bold.woff') format('woff'),
        url('./fonts/Lato-Bold.ttf') format('truetype'),
        url('./fonts/Lato-Bold.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
.bold {
    font-family:'Lato-Bold';
}
Copy the code

Now that we’re done with our CSS, let’s move on to the HTML file

2.3 the index. HTML

CSS , and then compress the font we want at , we can only compress static fonts

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="Width = device - width, initial - scale = 1.0, the minimum - scale = 1.0, the maximum - scale = 1.0, user - scalable = no">
    <title>font spider</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div>
    	<! This is the Bold zip package.
        <div class="bold">
            abcdefghijklmnopqrstuvwxyz
        </div>
        <! Medium compression package -->
        <div class="medium">
            ABCDEFGHIJKLMNOPQRSTUVWXYZ
        </div>
        <! < span style = "max-width: 100%; clear: both; min-height: 1em;
            0123456789
    </div>
</body>

</html>
Copy the code

In HTML, the font size is compressed from ato Z to lato-bold. This means that the TTF file contains only ato Z fonts, and lato-bold contains only ato Z fonts.

3. Generate a new TTF package

After the above operations, we can execute the font-spider index.html to generate a new compressed TTF file. In this case, not only TTF files will be generated, but also eOT, WOFF, SVG files will be generated

4. Apply it to your own projects

Put the generated TTF file in your own project folder, and then when the CSS file is imported, write SRC: url(“.. /fonts/Lato-Bold.ttf”) format(‘truetype’);

@font-face {
    font-family: 'Lato-Bold';
    src: url(".. /fonts/Lato-Bold.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}
Copy the code

Write in the last

When I first encountered this problem, ALL I saw was a.html version of the font-spider method. At that time, I was so stuck in my mind that I searched Vue to see how to use the font-spider method. After seeking many help, he settled down and finally solved this problem.