使用Fontello僅加載您需要的圖標字體

> fontello：創建輕量級自定義圖標字體

Fontello是一項免費的，用戶友好的服務，用於從矢量圖像製作自定義圖標字體。 它通過將來自各種開源項目（例如Awesome，Entypo和tescicons）的圖標合併到一個緊湊的文件中來簡化Web開發。這大大減少了頁面加載時間並改善了整體網站性能。

>圖標字體比標準圖像具有多個優點：它們在高分辨率屏幕上易於使用CSS（尺寸，顏色，陰影）設計，並且比圖像精靈更容易管理。 但是，對於新項目，SVG圖像可能是一種優越的替代方案，它提供了多色功能和更清晰的視覺效果。 如果傳統瀏覽器支持或工作流約束需要圖標字體，則優化其使用至關重要。

>通過流行的圖標字體庫（如字體Awesome（4.7，〜75KB））的挑戰是，大多數項目僅利用一小部分可用圖標。 不必要地加載整個庫會增加頁面重量。 fontello通過允許您選擇

所需的圖標來解決此問題。

創建自定義字體

1. 圖標選擇：>從fontello主頁中選擇您所需的圖標。
2. 自定義：>“自定義名稱”選項卡可讓您重命名圖標（例如，更改為icon-facebook>icon-fb）。 設置按鈕允許前綴修改（例如，更改默認的icon-前綴）。 您還可以調整單個圖標代碼。
3. >>下載：>一旦滿足，下載生成的字體文件。

集成字體

1. 提取：提取下載的zip文件。您會找到“ CSS”，“ FONTS”文件夾和“ config.json”文件（包含字體配置）。
>
2. import（可選）：對於現有項目，將“ config.json”文件拖到fontello頁面上，或通過設置＆gt;導入。
3. >>文件放置：將所有文件（維護文件夾結構）複製到您的項目目錄中。 >
>
4. css包含：在您的項目中包含生成的CSS文件（例如，）。 social-media.css
5. 用法：>用格式在您的html標記中使用圖標，用圖標的名稱替換<i class="icon-classname"></i>。 icon-classname
使用自定義圖像

> Fontello提供了一個龐大的庫，您可以導入自定義SVG圖像。 確保您的SVG適當準備：刪除填充物，顏色，複雜的規則（例如

填充）和胖線屬性；將輪廓加入單一輪廓。

evenodd性能獲得

Fontello大大減少了文件大小。 在一個示例中，一個字體很棒的4.7文件（75kb）被簡化為4KB fontello文件（使用八個圖標）。 儲蓄取決於使用的圖標數量。 這可以最大程度地減少HTTP請求並提高加載速度。 此外，Fontello允許在多個字體上具有一致的圖標前綴，從而簡化了管理。

高級配置

>

CORS標題：

如果在單獨的域上託管字體文件，請在>

• .htaccess>字體模仿類型：
在您的

>中設置正確的MIME類型：

<filesmatch "\.(ttf|otf|woff|woff2|eot)$">
  Header set Access-Control-Allow-Origin "*"
</filesmatch>

• 結論 .htaccessfontello簡化了創建輕巧的自定義圖標字體。 即使是看似小的文件大小減少，也會積累以顯著提高網站性能。 考慮使用它來優化圖標字體工作流程。

以上是使用Fontello僅加載您需要的圖標字體的詳細內容。更多資訊請關注PHP中文網其他相關文章！