CSS中如何添加特效字体

JavaScript08

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图片

你要的在下面,给你;

我要的,在你名字后边,给我!

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">

<html>

<head>

<title>new document </title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<style type="text/css">

#appendDiv{

position:absolute

height:30px

width:120px

line-height:30px

text-align:center

border:1px solid #ddd

}

</style>

</head>

<script>

$(function(){

$("#btn").click(function(){

if($("#appendDiv").size() <= 0){

$("body").append("<div id='appendDiv'>Success</div>")

}

window.div = $("#appendDiv")

window.div.css({"background":"#eee","top":$(window).height() / 2 - 15 +"px","left":$(window).width() / 2 - 60 +"px","opacity":1})

setTimeout("window.div.animate({'top':-35,'opacity':0})",3000)

})

})

</script>

<body>

<button id="btn">Click</button>

</body>

</html>

javasript代码

<divid="blink">闪烁的文字</div>

<scriptlanguage="javascript">

functionchangeColor(){

varcolor="#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray"

color=color.split("|")

document.getElementById("blink").style.color=color[parseInt(Math.random()*color.length)]

}

setInterval("changeColor()",200)

</script>

css代码就是文字闪烁text-decoration:blink不过很可惜,IE、Chrome或Safari不支持"blink"属性值,所以只有在Firefox和Opera下支持这CSS实现在闪动效果。加上js代码就可以了。