css 压缩字体文件

第一步：安装font-spider压缩插件

npm i font-spider -g

第二步：在字体文件所在目录创建fontspider.html文件,将文件夹中的字体引入

代码如：fontspider中所示

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        @font-face {
            /*  自定义字体名字*/
            font-family: 'FontSpider';
            /* 未压缩的字体文件地址*/
            src: 
                /* 
                url('./AlibabaPuHuiTi-2-35-Thin.ttf') format('truetype'),
                url('./AlibabaPuHuiTi-2-45-Light.ttf') format('truetype'),
                url('./AlibabaPuHuiTi-2-55-Regular.ttf') format('truetype'),
                url('./AlibabaPuHuiTi-2-65-Medium.ttf') format('truetype'),
                url('./AlibabaPuHuiTi-2-75-SemiBold.ttf') format('truetype'),
                url('./AlibabaPuHuiTi-2-85-Bold.ttf') format('truetype'),
                url('./AlibabaPuHuiTi-2-95-ExtraBold.ttf') format('truetype'),
                url('./AlibabaPuHuiTi-2-105-Heavy.ttf') format('truetype'),
                url('./AlibabaPuHuiTi-2-115-Black.ttf') format('truetype'),
                url('./roboto-bold.ttf') format('truetype'),
                url('./roboto-medium.ttf') format('truetype'),
                url('./roboto-regular.ttf') format('truetype'),
                url('./SourceHanSansCN-ExtraLight.ttf') format('truetype'),
                url('./SourceHanSansCN-Light.ttf') format('truetype'),
                url('./SourceHanSansCN-Normal.ttf') format('truetype'),
                url('./SourceHanSansCN-Medium.ttf') format('truetype'),
                url('./SourceHanSansCN-Bold.ttf') format('truetype'),
                url('./SourceHanSansCN-Heavy.ttf') format('truetype'),
                url('./YouSheBiaoTiHei-2.ttf') format('truetype'),
                */
                url('./SourceHanSansCN-Bold.ttf') format('truetype'), 
                
                /* 以下格式的字体文件将在执行本文件时，自动生成 */
                /* url('./YouSheBiaoTiHei-2.eot?#font-spider') format('embedded-opentype'),
                url('./YouSheBiaoTiHei-2.woff') format('woff'),
                url('./YouSheBiaoTiHei-2.svg') format('svg'); */
                /* url('./SourceHanSansCN-Bold.woff2') format('woff2') */
        }
        .fontSpider{
            font-family: 'FontSpider';
        }
    </style>
</head>
<body>
<!--        记得给当前元素使用字体-->
<div class="fontSpider">
<!-- 填充需要压缩的字体  -->
    我的
</div>
</body>
</html>

注意：1、ttf格式的字体是一定要存在的 2、一次只能压缩一个.ttf文件，可以配置压缩时顺便生成其他格式的字体压缩文件

第三步：执行fontspider.html文件

进入字体文件所在的目录，字vscode或者终端工具中输入 font-spider ./fontspider.html 指令，回车执行

执行成功以后，将生成压缩文件并替换原来的文件，同时生成.font-spider文件夹，将原始的.ttf文件备份在该文件夹中，到此压缩并使用字体文件完成。

第四步：使用压缩之后的字体文件，将压缩文件放在/font文件夹下，并在/font/font.css中添加新增的字体样式

@font-face {
    font-family: 'Songti SC';
    src: url('./simsun.ttf');
    font-style: normal;
    font-weight: normal;
}
div{
　　font-family:Songti Sc;
　　font-size:16px;
}

posted @ 2025-07-30 15:20 enShine 阅读(25) 评论(0) 收藏举报

刷新页面返回顶部

css 压缩字体文件

公告