CSS引入自定義字體可以讓網頁設計更加個性化,而且可以增加網站的獨特性。在CSS中引入自定義字體有兩種方式:使用字體格式文件或通過外部字體庫引入。
使用字體格式文件
@font-face{ font-family: 'MyFont'; src: url('MyFont.ttf') format('truetype'); }
上述代碼中,我們定義了一個名為MyFont的字體族,同時設置了字體文件的地址和格式。為了提高兼容性,可以添加多個格式,例如:“svg”、“eot”和“woff”。
一旦定義了該字體,就可以在樣式表的任何地方使用它:
p{ font-family: 'MyFont', sans-serif; }
在上述代碼中,我們為
標簽設置了一個自定義字體。如果該字體無法加載,將會使用默認字體“sans-serif”代替。
引用外部字體庫
另一種方式是從外部引用字體庫。有很多在線字體庫可以供選擇。例如,我們可以使用Google Fonts來引入字體:
<link rel="stylesheet">
然后,我們可以在樣式表中使用該字體:
p{ font-family: 'Roboto', sans-serif; }
在上述代碼中,我們使用了Google Fonts提供的名為“Roboto”的字體。如果該字體無法加載,將會使用默認字體“sans-serif”代替。
無論使用哪種方式,自定義字體的使用都需要注意版權問題,不要隨意使用他人的字體。