Fontello – 讓你的網站更多元化

一、什麼是Fontello

Fontello是一個免費的圖標字體工具，它幫助你在你的網站上嵌入矢量圖形，使得你的網站更加豐富多彩。它提供了近2000個可縮放的矢量圖標，同時也支持自定義圖標。Fontello非常易於使用，用戶只需要點擊一個圖標即可將其添加至自己的定製格式。

給你一個例子，我們可以先以Zip的形式下載Fontello，然後解壓至網站路徑中的一個目錄。例如，我們可以在目錄中創建一個新的文件夾名為fonts，將所有的圖標文件放在其中。Fontello還提供了一個styles.css文件，它會將所有圖標呈現在一個單獨的網頁上。我們只需要放置該CSS文件至header頁面頭部，並引用樣式表，即可將圖標應用到自己的網站中。

二、Fontello如何使用

Fontello的使用非常簡單。首先，我們需要前往Fontello的官方網站，上傳或拖拽自己的ico或svg圖片文件，然後選擇希望添加的圖標。Fontello會將這些圖標打包輸出成一個自定義字體文件（相當於一個頂級文字）和一個樣式表文件。

在下載自定義字體文件和樣式表之後，我們可以將它們添加到一個網頁中。例如：

<!DOCTYPE html>
<html>
  <head>
    <title>Fontello Test</title>
    <link rel="stylesheet" href="path/to/fontello/fontello.css">
  </head>
  <body>
    <i class="demo-icon fontello-icon"></i>
  </body>
</html>

上述代碼中，我們可以看到用<i>標籤來添加一個icon圖標，其中class屬性被設置為demo-icon fontello-icon的值告訴瀏覽器該元素是Fontello自定義字體「fontello」中的一個圖標。在該例中，我們將圖標的編碼設置為unicode字元「&#xe800」。這個unicode字元可以在Fontello的樣式表中找到。

三、如何定製Fontello

Fontello還允許用戶擴展和定製自己的字體圖標集合。要做到這一點，用戶可以轉到Fontello官方網站並點擊「Custom Icons」按鈕。然後，用戶可以上傳或拖拽新的ICO或SVG文件進行自定義圖標的添加。我們可以根據自己的需要建立一個新的圖標庫。

當添加自定義圖標後，用戶可以通過導出樣式表和字體文件來使用它們。例如，如果我們建立了名為「myicons」的自定義圖標庫，我們可以在網頁中使用以下代碼來添加我們剛剛創建的圖標：

<!DOCTYPE html>
<html>
  <head>
    <title>Custom Font Icons</title>
    <link rel="stylesheet" href="path/to/fontello/myicons/fontello.css">
  </head>
  <body>
    <i class="fontello-icon my-custom-icon"></i>
  </body>
</html>

上述代碼中，我們可以看到我們在<i>標籤的class屬性中指定了一個名為「fontello-icon」的類和「my-custom-icon」的自定義圖標類名。因此該元素將被渲染成我們自定義圖標庫中的一個圖標。

四、Fontello的優點

Fontello提供了許多優勢：

1. Fontello具有高度可縮放性。當我們使用矢量圖形而不是標準的圖片時，我們可以更輕鬆地對圖形進行縮放、旋轉和修改顏色等操作，而不會破壞圖像的質量。

2. Fontello可以提升頁面性能。當我們使用矢量圖形時，我們可以縮短頁面的載入時間，從而提高頁面的渲染速度。此外，Fontello生成的字體文件一般較小，更易於下載和使用。

3. Fontello允許用戶自定義圖標。我們可以根據自己的需求添加自己的圖標，並將其添加到自己的自定義集合中。

五、總結

Fontello是一個非常實用的工具，它極大地簡化了網站圖標的處理。使用Fontello，我們可以輕鬆地將高度可縮放的圖標添加到我們的網站中，從而使網站變得更加豐富多彩並提高性能。Fontello不僅易於使用還支持自定義圖標，這使得它成為開發人員最喜歡的一款圖標字體工具之一。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/230746.html