html / CSS 自定義字型font 自己設定好看的特效字型
阿新 • • 發佈:2019-02-18
這篇文章的主題是CSS3屬性 : @font-face
樓主很喜歡CSS3的一些新增屬性,給我們前端程式設計師帶來了非常很多福利,我們的頁面也可以做的更加的美觀。
直接放效果圖吧,因為程式碼較長,放在最下面了;
關於瀏覽器的相容性問題
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;
}
(・-・*)
暫定這樣,不忙了以後再來補充