压缩HTML引用字体

例简介

有些网站为了凸显某部分字体，而引入自定义字体，但由于自定义字体相对都比较大（几M），导致页面加载缓慢；所以本文介绍三种压缩字体的方法，可根据项目情况自行选择。

压缩方法

1、利用Fontmin程序（效果如下图）

1）运行Fontmin程序后，1位置输入需要生成的文字内容，2位置拖入ttf文件（源文件7947KB）;

2)点击“生成”按钮，生成成功后，弹出生成文件（ttf文件变成11KB），根据浏览器兼容性引入文件。

Tips：当需要增加新的文字时，需要重新生成文件。

2、利用Node.js+Fontmin组件（效果如下图）

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

总结

可以根据项目实际情况，选择适当的方法。

TML<head>元素

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>

HTML <title> 元素

<title> 标签定义了不同文档的标题。

<title> 在 HTML/XHTML 文档中是必须的。

<title> 元素:

定义了浏览器工具栏的标题
当网页添加到收藏夹时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题

一个简单的 HTML 文档:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>文档标题</title>
</head>
 
<body>
文档内容......
</body>
 
</html>

HTML <base> 元素

<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML <style> 元素

在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

HTML <meta> 元素

meta标签描述了一些基本的元数据。

META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

<meta> 标签- 使用实例

为搜索引擎定义关键词:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为网页定义描述内容:

<meta name="description" content="免费 Web & 编程 教程">

定义网页作者:

<meta name="author" content="tom">

每30秒钟刷新当前页面:

<meta http-equiv="refresh" content="30">

HTML <script> 元素

JavaScript 最常用于图片操作、表单验证以及内容动态更新。

下面的脚本会向浏览器输出"Hello World!"：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
<script>
document.write("Hello World!")
</script> 
</body>
</html>

HTML<noscript> 标签

只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>文档标题</title> 
</head> 
<body>

<script>
document.write("Hello World!")
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>

<p>不支持 JavaScript 的浏览器会使用 <noscript> 元素中定义的内容（文本）来替代。</p>
 
</body>
</html>

JavaScript事件响应:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>文档标题</title> 
</head>
<body>

<h1>我的第一个 JavaScript </h1>

<p id="demo">
JavaScript 可以触发事件，就像按钮点击。</p>

<script>
function myFunction()
{
	document.getElementById("demo").innerHTML="Hello JavaScript!";
}
</script>

<button type="button" onclick="myFunction()">点我</button>

</body>
</html>

HTML 脚本标签

标签	描述
<script>	定义了客户端脚本
<noscript>	定义了不支持脚本浏览器输出的文本

HTML链接

HTML使用标签 <a>来设置超文本链接。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

在标签<a> 中使用了href属性来描述链接的地址。

默认情况下，链接将以以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。

注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>文档标题</title> 
</head>
<body>
<p><a href="//www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p>
</body>
</html>

HTML head 元素

标签	描述
<head>	定义了文档的信息
<title>	定义了文档的标题
<base>	定义了页面链接标签的默认链接地址
<link>	定义了一个文档和外部资源之间的关系
<meta>	定义了HTML文档中的元数据
<script>	定义了客户端的脚本文件
<style>	定义了HTML文档的样式文件

p6框架留言板项目css、js等静态文件的引用及头部header布局

tp6的view模板是引用的tp5的包文件

头部导航条-首页-用户登录-用户名-退出登陆


    //模板标签的替换 - config/view.php
    'tpl_replace_string'=>  [
        '__STATIC__'=>'/public/static'
    ]

修改其他

在线咨询

上一篇：报表发展史，用ActiveReports报表工具在.
下一篇：HTML标签之链接标签

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商