編碼的世界 / 優質文選 / 生涯

html / CSS 自定義字體font 自己設置好看的特效字體

2022年3月24日
-   

這篇文章的主題是CSS3屬性 ： @font-face
樓主很喜歡CSS3的一些新增屬性，給我們前端程序員帶來了非常很多福利，我們的頁面也可以做的更加的美觀。
直接放效果圖吧，因為代碼較長，放在最下面了；

關於瀏覽器的兼容性問題 ![這裏寫圖片描述](https://imgconvert.csdnimg.cn/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTcxMjI1MTU1NzI1Mjg1?x-oss-process=image/format,png)
Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 類型的字體。
Internet Explorer 9+ 支持新的 @font-face 規則，但是僅支持 .eot 類型的字體 (Embedded OpenType)。
在這順便做個倡導： 全民抵制IE ( 不知道有木有用處 ~~o(>_<)o ~~ )
實用代碼： html
<body>
<div>
 <p class="cat1" style="margin-top: 50px;">個人喜歡的字體：你好啊！每天都要很開心噠！</p>
 <p class="sweet">個人喜歡的字體：你好啊！每天都要很開心噠</p>
 <p class="honey">個人喜歡的字體：你好啊！每天都要很開心噠！</p>
 <p class="flower">個人喜歡的字體：你好啊！每天都要很開心噠！</p>
 <p class="evil">個人喜歡的字體：你好啊！每天都要很開心噠！</p>
 <p class="blank">個人喜歡的字體：你好啊！每天都要很開心噠！</p>
 <p class="wing">個人喜歡的字體：你好啊！每天都要很開心噠！</p>
</div>
</body>

css
body{
 font-size: 18px;
}
div{
 width:650px;
 height:500px;
 margin:50px auto;
 padding:40px 0;
 background: url("bg1.jpg") no-repeat;
 background-size: cover;
}
div>p{
 margin-left:155px;
}
@font-face {
 font-family: myCatF;
 src: url("font/catH.ttf")
}
.cat1{
 font-family: myCatF;
 color:#f00;
}
@font-face {
 font-family: mySweet;
 src: url("font/tiantian.ttf")
}
.sweet{
 font-family: mySweet;
 color:#FF891F;
}
@font-face {
 font-family: myHoney;
 src: url("font/heart.ttf")
}
.honey{
 font-family: myHoney;
 color:#FFE379;
}
@font-face {
 font-family: myFlower;
 src: url("font/tiantian.ttf")
}





.flower{
 font-family: myFlower;
 color:#0f0;
}
@font-face {
 font-family: Evil;
 src: url("font/evil.ttf")
}
.evil{
 font-family: Evil;
 color:#00FFF0;
}
@font-face {
 font-family: blank;
 src: url("font/blank.ttf")
}
.blank{
 font-family: blank;
 color:#1FD1FF;
}
@font-face {
 font-family: wing;
 src: url("font/wing.ttf")
}
.wing{
 font-family: wing;
 color:#AA00FF;
}

(・-・*) 暫定這樣，不忙了以後再來補充
樓主還有一篇關於字體設定的博客也作為參考： http://blog.csdn.net/freedomvenly/article/details/78873712

熱門文章