壓縮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小時內與您取得聯系。

整合營銷服務商