溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了CSS3中如何引入多種自定義字體font-face，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
今天在HTML中發現了一個問題，提供給我們默認的字體有很多，但是除了那些“黑體”、“宋體”、“楷體”等支持中文字體之外，其余的都不知道中文字體，如果我們需要用自己喜歡的字體怎么辦呢？CSS3中是否可以引入自定義下載的字體呢？如果可以我們應該怎么引入？帶著這一系列的問題我們來看下解決方案,說什么都不如看效果，下面是三種字體在網頁中的效果，“春聯標準字體”、“江南藝術調字體”和“毛浙東藝術字體”的效果：
谷歌瀏覽器：
火狐瀏覽器：
以上就是效果展示，大家有個了解就可以了！
接著我們看下怎么在CSS中引入：
首先我們要引入某個字體，就應該有這么個字體，（用戶不需要有），下載字體放到項目的font文件夾下面
字體下載大家在網上自行下載，也可以在這里下載，下載完成之后我們就來引入字體
HTML代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>字體文件測試</title> </head> <body> <div class="chunlian">春聯標準字體測試</div> <div class="jiangnan">江南藝術調字體測試</div> <div class="maozedong"> 毛澤東字體測試</div> </body> </html>
然后就是CSS樣式設置：
<style type="text/css">
@font-face {
font-family:'chunlian';
src: url(font/chunlian.ttf);
}
@font-face {
font-family: 'jiangnan';
src:url(font/jiangnan.ttf);
}
.chunlian{
font-family: 'chunlian';
font-size: 50px;
text-shadow: none;
}
.jiangnan{
font-family: 'jiangnan';
font-size: 40px;
}
@font-face {
font-family: 'maozedong';
src:url(font/maozedong.ttf);
}
.maozedong{
font-family: 'maozedong';
font-size: 50px;
text-shadow: none;
}
</style>如果再加入其他字體直接在CSS中寫@font-face即可！
感謝你能夠認真閱讀完這篇文章，希望小編分享的“CSS3中如何引入多種自定義字體font-face”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
