CSS中如何添加特效字体

html-css037

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}

首先我们创建一个html文件，写出html文件的一些基础代码

然后我们在网页中新建一个div，并新建一个

无序列表并创建4个然后使用浏览器直接打开html文件，查看效果，可以看到我们创建的标签自带有一定的格式，

接下来我们使用下面的代码去除标签的格式，其中：list-style:none表示去除标签的格式width:160px表示设置标签的宽height:240px表示设置标签的高background:#666666表示设置标签的背景色float:left表示设置标签浮动显示，并且为左浮动margin-right:20px表示设置标签右外边距

刷新浏览器中html文件查看效果，

这里我们开始添加动画：

给

标签添加：

transition:transform 0.1s

transform表示变换的属性，0.1上表示表换所需要的时间另外给标签添加鼠标滑动属性

li:hover{cursor:pointertransform:translate(0,-10px)}

cursor:pointer表示鼠标滑过显示为小手形状

transform:translate(0,-10px)translate表示移动，第一个参数为水平移动值，第二个参数为垂直移动值，

进入浏览器直接查看效果，如下图实现了鼠标滑过块，块上移的动画特效，如下图：