CSS3中引入多種自定義字型（font-face）
阿新 • • 發佈：2020-12-14
今天在HTML中發現了一個問題，提供給我們預設的字型有很多，但是除了那些“黑體”、“宋體”、“楷體”等支援中文字型之外，其餘的都不知道中文字型，如果我們需要用自己喜歡的字型怎麼辦呢？CSS3中是否可以引入自定義下載的字型呢？如果可以我們應該怎麼引入？帶著這一系列的問題我們來看下解決方案,說什麼都不如看效果，下面是三種字型在網頁中的效果，“春聯標準字型”、“江南藝術調字型”和“毛浙東藝術字體”的效果：（https://www.cnblogs.com/a1111/p/12815979.html：原作者連結）
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即可！