您好,登錄后才能下訂單哦!
這篇文章主要介紹了CSS3中如何引入多種自定義字體font-face,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
今天在HTML中發(fā)現(xiàn)了一個問題,提供給我們默認(rèn)的字體有很多,但是除了那些“黑體”、“宋體”、“楷體”等支持中文字體之外,其余的都不知道中文字體,如果我們需要用自己喜歡的字體怎么辦呢?CSS3中是否可以引入自定義下載的字體呢?如果可以我們應(yīng)該怎么引入?帶著這一系列的問題我們來看下解決方案,說什么都不如看效果,下面是三種字體在網(wǎng)頁中的效果,“春聯(lián)標(biāo)準(zhǔn)字體”、“江南藝術(shù)調(diào)字體”和“毛浙東藝術(shù)字體”的效果:
谷歌瀏覽器:
火狐瀏覽器:
以上就是效果展示,大家有個了解就可以了!
接著我們看下怎么在CSS中引入:
首先我們要引入某個字體,就應(yīng)該有這么個字體,(用戶不需要有),下載字體放到項目的font文件夾下面
字體下載大家在網(wǎng)上自行下載,也可以在這里下載,下載完成之后我們就來引入字體
HTML代碼:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>字體文件測試</title> </head> <body> <div class="chunlian">春聯(lián)標(biāo)準(zhǔn)字體測試</div> <div class="jiangnan">江南藝術(shù)調(diào)字體測試</div> <div class="maozedong"> 毛澤東字體測試</div> </body> </html>
然后就是CSS樣式設(shè)置:
<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即可!
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“CSS3中如何引入多種自定義字體font-face”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。