CSS中如何添加特效字体

html-css024

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

思路应该是一个从0%到100%的动画展开的效果，大概需要写0%，50%，100%三个样式。 弹窗的css代码大概是:position: fixedz-index: 2000left: 0top: 0这样弹窗的左上角原点在页面最左上角，如果要调整位置要用CSS变换特效(transform)的平移translate函数达到目的: translate(x, y)（长度值或者百分比）：在水平方向、垂直方向平移元素。    translateX(value)：水平方向平移。    translateY(value)：垂直方向平移。    scale(x, y)、scaleX(value)、scaleY(value)：在水平方向、垂直方向或者两个方向上缩放元素。    rotate()、rotateX()、rotateY()、rotateZ()：rotate支持3D效果，可在x、y、z轴上旋转元素。    skew()、skewX()、skewY()：在水平方向、垂直方向或者两个方向倾斜一定的角度。  另外弹窗展开的动画要用到css3的动画属性:    animation-delay：设置动画开始前的延迟时间。    animation-direction：设置动画循环播放的时候是否方向播放，包含normal和alternate两个值。    animation-duration：设置动画播放持续的时间。    animation-interacion-count：设置动画的播放次数，可以为具体数据或者无限循环关键字infinite。    animation-name：指定动画名称。    animation-play-state：允许动画暂停和重新播放，包含running、paused。    animation-timing-function：指定如何计算中间动画值，