首頁 >web前端 >css教學 >使用Fontello僅加載您需要的圖標字體

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

Joseph Gordon-Levitt
Joseph Gordon-Levitt原創
2025-02-19 10:36:11257瀏覽

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

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

Using Fontello to Only Load Icon Fonts That You Need

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

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

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

創建自定義字體

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

集成字體

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

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

填充)和胖線屬性;將輪廓加入單一輪廓。

evenodd性能獲得

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

高級配置

>

CORS標題:

如果在單獨的域上託管字體文件,請在>
  • .htaccess>字體模仿類型:
  • 在您的
>中設置正確的MIME類型:
<code class="language-htaccess"><filesmatch>
  Header set Access-Control-Allow-Origin "*"
</filesmatch></code>
  • 結論 .htaccessfontello簡化了創建輕巧的自定義圖標字體。 即使是看似小的文件大小減少,也會積累以顯著提高網站性能。 考慮使用它來優化圖標字體工作流程。

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn