html怎么css设置的文本特效

html-css09

html怎么css设置的文本特效,第1张

文本虚拟化效果可以通过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}

特殊字体一般不是说不能添加,而是考虑到用户电脑上预装的字体有限,所以局限在宋体和微软雅黑两种字体,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 | <length>none | [<shadow>, ] * <shadow>或none | <color>[, <color>]*

也就是:

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: 30pxfont: bold 55px/100% "微软雅黑", "Lucida Grande", "Lucida Sans", Helvetica, Arial, Sanscolor: #ffftext-transform: uppercase}