建设生鲜网站价格,手机app定制开发多少钱,湖南响应式官网建设哪家好,wordpress剑侠情缘主题内容简介 有些网站为了凸显某部分字体#xff0c;而引入自定义字体#xff0c;但由于自定义字体相对都比较大#xff08;几M#xff09;,导致页面加载缓慢#xff1b;所以本文介绍三种压缩字体的方法#xff0c;可根据项目情况自行选择。 压缩方法
1、利用Fontmin程序而引入自定义字体但由于自定义字体相对都比较大几M,导致页面加载缓慢所以本文介绍三种压缩字体的方法可根据项目情况自行选择。 压缩方法
1、利用Fontmin程序效果如下图 1运行Fontmin程序后1位置输入需要生成的文字内容2位置拖入ttf文件源文件7947KB; 2点击“生成”按钮生成成功后弹出生成文件ttf文件变成11KB根据浏览器兼容性引入文件。 Tips当需要增加新的文字时需要重新生成文件。 2、利用Node.jsFontmin组件效果如下图 1配置好Node.js框架本文使用Express 2在index.js文件增加代码用来自动读取“views”下面的所有*.ejs文件的文字然后根据“src”的ttf源文件使用Fontmin组件生成压缩文件生成目录“dest”。 Tips适用于多文件情况下自动汇总生成。 // 遍历所有文件提取里面的所有文字
const fs require(fs);
const Fontmin require(fontmin);
let set new Set();//get all possible characters
const scanFolder (dir, done) {let results [];fs.readdir(dir, (err, list) {if (err) {return done(err);}let i 0;(function iter() {let file list[i];if (!file) {return done(null, results);}file dir / file;console.log(file)fs.stat(file, (err, stat) {if (stat stat.isDirectory()) {scanFolder(file, (err, res) {results results.concat(res);iter();});} else {results.push(file);iter();}});})();});
};
//get all possible characters
const generateFinalHTML finalString {const fontmin new Fontmin().src(public/fonts/SourceHanSansCN-Medium.ttf).dest(public/fonts/build/).use(Fontmin.glyph({text: finalString,hinting: false})).use(Fontmin.ttf2woff({deflate: true}));fontmin.run((err) {if (err) {throw err;}});
}
//get all possible characters
scanFolder(views, (n, results) {results.forEach(file {const result fs.readFileSync(file, utf8);const currentSet new Set(result)set new Set([...set, ...currentSet]);});generateFinalHTML(Array.from(set).join())
})
3、利用font-spider组件效果如下图 1安装font-spider组件
npm install font-spider -g 2新建index.html文件 3执行下面命令生成压缩文件。
font-spider ./*.html
总结 可根据项目实际情况选择适当方法。
