CSS動態加載字體庫是一種方便快捷的方法,使網站能夠使用自定義字體而無需將字體文件下載到用戶設備上。這種方法可以顯著提高網站性能,減少頁面載入時間,同時也能讓網站有更加美觀的視覺效果。
@font-face { font-family: 'MyFont'; src: url('myfont-webfont.woff2') format('woff2'), url('myfont-webfont.woff') format('woff'); font-weight: normal; font-style: normal; }
首先我們需要在CSS中定義@font-face,該屬性允許我們將一個自定義字體文件嵌入到CSS文件中。我們可以使用“src”屬性指定字體庫文件的位置,同時還可以使用“font-family”屬性將其命名。請注意,這里使用woff2和woff兩種不同的格式來兼容不同的瀏覽器。
h1, h2, p { font-family: 'MyFont', sans-serif; }
定義字體庫后,我們可以使用字體名稱來為各個元素指定相應的字體。同一個頁面上的不同元素可以使用同一個自定義字體。請注意,我們需要提供一個備用字體,以便在自定義字體無法加載時,瀏覽器能夠使用備用字體來確保完整的頁面呈現。