CSS中如何添加特效字体

html-css032

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

1、新建一个html文件,命名为test.html。

2、在test.html文件内,使用font标签创建三行文字,分别用不同的方法给font字体设置颜色。

3、在test.html文件内,直接在font标签上,通过color属性来设置字体的颜色。例如,设置font字体的颜色为红色。

4、在test.html文件内,设置font标签的class属性为myclass,主要用于下面通过该class来设置css样式。

5、在test.html文件内,设置font标签的id属性为myid,主要用于下面通过该id来设置css样式。

6、在css标签中,设置类名为myclass的样式,例如,设置color属性为蓝色(blue);设置id为myid的样式,例如,设置color属性为粉红色(pink)。

7、在浏览器打开test.html文件,查看实现的效果。

-webkit-font-smoothing: subpixel-antialiased

抗锯齿渲染平滑处理效果

经过测试发现,浏览器的内置基础属性中一般已经包含了字体抗锯齿。不过但是为了保险起见,你一定要加样式的话,那就手动加上一个吧

另外:

-webkit-font-smoothing主要有一下三个属性:

none: 无抗锯齿

subpixel-antialiased (default): 次像素平滑 常见于Mac OS和MacType For Windows

antialiased: 灰度平滑 常用于Android和iOS等移动设备的