在CSS中,聲明字體的方式不止有默認的幾種字體類型,還可以自定義字體來實現更精細化的頁面樣式。下面介紹如何使用CSS聲明自定義字體。
@font-face { font-family: 'MyCustomFont'; src: url('mycustomfont.woff2') format('woff2'), url('mycustomfont.woff') format('woff'); }
上述代碼中,我們使用了@font-face規則來定義自定義字體,'MyCustomFont'是自定義字體的名稱,使用時需要如下聲明:
.selector { font-family: 'MyCustomFont', sans-serif; }
其中,sans-serif是備選字體,用于當定義的字體不可用時作為備用字體的通用字體類型。
除了定義字體類型,還可以控制自定義字體的字重、斜體、字體大小等樣式效果,示例如下:
@font-face { font-family: 'MyCustomFont'; src: url('mycustomfont.woff2') format('woff2'), url('mycustomfont.woff') format('woff'); font-weight: bold; font-style: italic; } .selector { font-family: 'MyCustomFont', sans-serif; font-size: 24px; }
通過font-weight和font-style屬性,我們可以將自定義字體設置為粗體、斜體等效果,并且可以在使用時通過font-size屬性設定字體大小。
總之,自定義字體是CSS中非常有用的功能,使用它可以讓我們更加自由地控制頁面的排版和樣式,帶來更好的用戶體驗。