CSS中如何添加特效字体

html-css05

CSS中如何添加特效字体,第1张

特殊字体一般不是说不能添加，而是考虑到用户电脑上预装的字体有限，所以局限在宋体和微软雅黑两种字体，css属性中有个font属性，例如{font-family:"迷你简菱心"},在装过这个字体的的电脑会有效果，但是再没有装过的电脑可能就是其它字体了，一般会解析为宋体，问题解决一般由两种解决方案。

第一：css3下载字体，代码如下

@font-face {

font-family: '自己命名字体名字'

src: url('字体路径')

src: url('FileName.eot?#iefix') format('embedded-opentype'), /*其它格式*/url('FileName.woff') format('woff'),

url('FileName.ttf') format('truetype'),

url('FileName.svg#FontName') format('svg')

font-style: normal

font-weight: normal/*设置默认样式*/

}

.aa{font-family:"自己命名字体名字"}

不兼容ie8及以下浏览器

第二：切png图片

文本虚拟化效果可以通过css的text-shadow来实现。

text-shadow语法:

text-shadow

：

none

|

none

|

[

,

]

*

或none

|

[,

]*

也就是：

text-shadow:[颜色(Color)

x轴(X

Offset)

y轴(Y

Offset)

模糊半径(Blur)],[颜色(color)

x轴(X

Offset)

y轴(Y

Offset)

模糊半径(Blur)]...

或者

text-shadow:[x轴(X

Offset)

y轴(Y

Offset)

模糊半径(Blur)

颜色(Color)],[x轴(X

Offset)

y轴(Y

Offset)

模糊半径(Blur)

颜色(Color)].

例子：

.demo

{background:

#666666width:

440pxpadding:

30px

font:

bold

55px/100%

"微软雅黑",

"Lucida

Grande",

"Lucida

Sans",

Helvetica,

Arial,

Sanscolor:

#ffftext-transform:

uppercase}

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>CSS3发光字</title> 

<style>

*{ padding:0margin:0font-size:14px }

body{ background: #f3f5f5 }

.d{ width:100%text-align:centermargin:20px auto }

.a , .n{ text-decoration: nonefont-size:6emfont-family:"微软雅黑" }

.a{ color:blue }

.a:link{ color:blue }

.n{ color:#FFFtext-shadow: 0 0 10px #000,0 0 25px #000 }

.def , .h:hover{ animation: run 2.4s infinite-webkit-animation: run 2.4s infinite-moz-animation: run 2.4s infinite

-ms-animation: run 2.4s infinite-o-animation: run 2.4s infinite }

@-webkit-keyframes run{

0%,100%{ color:#ffftext-shadow:0 0 10px blue,0 0 10px blue }

50%{ text-shadow:0 0 10px blue,0 0 40px blue }

}

@-moz-keyframes run{

0%,100%{ color:#ffftext-shadow:0 0 10px blue,0 0 10px blue }

50%{ text-shadow:0 0 10px blue,0 0 40px blue }

}

@-o-keyframes run{

0%,100%{ color:#ffftext-shadow:0 0 10px blue,0 0 10px blue }

50%{ text-shadow:0 0 10px blue,0 0 40px blue }

}

@-ms-keyframes run{

0%,100%{ color:#ffftext-shadow:0 0 10px blue,0 0 10px blue }

50%{ text-shadow:0 0 10px blue,0 0 40px blue }

}

@keyframes run{

0%,100%{ color:#ffftext-shadow:0 0 10px blue,0 0 10px blue }

50%{ text-shadow:0 0 10px blue,0 0 40px blue }

}

</style>

</head>

<body>

<hr>

字体不带动效：

<div class="d">

<a href="javascript:void(0)" class="n">如何使用CSS3制作特效发光字</a>

</div>

<hr>

字体自带动效：

<div class="d">

<a href="javascript:void(0)" class="a def">不记得你的名字，但记得你的死期。</a>

</div>

<hr>

字体悬浮动效：

<div class="d">

<a href="javascript:void(0)" class="a h">剑之所至，心之所往。</a>

</div>

<hr>

</body>

</html>