您的位置:首页 > Web前端 > CSS

css 使用@font-face 嵌入自定义字体或字体图标方法笔记

guoguicheng1314 2016-11-19 15:47 120 查看
通常css使用font-family指定客户端显示字体的样式,本笔记目的在于解决客户端未安装指定字体,导致无法完成设计效果要求。与此同时现在大部分图标使用字体格式,因为它有矢量,体积小等等优点讲解如何使用字体图标

下面是详细的方法步骤:

1、制作或下载字体文件

由于浏览器对@font-face的兼容问题,这里涉及到一个字体format的问题,因为不同的浏览器对字体格式支持是不一致的,所以需要转换出多种字体格式文件以便兼容尽可能多的浏览器

2、使用第三方平台转换字体文件为font-face所支持的格式

TureTpe(.ttf)格式:

OpenType(.otf)格式:

Web Open Font Format(.woff)格式:

Embedded Open Type(.eot)格式:

SVG(.svg)格式:

步骤为先上传图片字体文件,然后选择要转换的几种格式下载

3、引入字体文件

@font-face {
font-family: "FamilyName";
src: url("path.eot");
src: url("path/to/*.eot?#iefix") format("embedded-opentype"),
url("path/to/*.woff") format("woff"),
url("path/to/*.ttf") format("truetype"),
url("path/to/*.svg#FamilyName") format("svg");
font-weight: normal;
font-style: normal;
}


FamilyName 会在刚刚下载的文件中的css文件中有,你可以直接使用下载文件不用再定义样式,我这里是为说明原理所以不使用下载的css

4、使用字体文件

a、字体:

直接style="font-family:FamilyName" 或直接class 内定义使用到指定元素上

b、图标:

定义通用图标样式

[class*="foundicon-"] {
display: inline;
width: auto;
height: auto;
line-height: inherit;
vertical-align: baseline;
background-image: none;
background-position: 0 0;
background-repeat: repeat;
}

[class*="foundicon-"]:before {
font-family: "FamilyName";
font-weight: normal;
font-style: normal;
text-decoration: inherit;
}
[class*="general foundicon-"]:before {
font-family: "FamilyName";
}


定义图标:

.foundicon-thumb-up:before {
content: "\f000";
}

.foundicon-thumb-down:before {
content: "\f001";
}
…………

使用:

<i class="general foundicon-thumb-up"></i>


参考博客:
http://blog.csdn.net/chelen_jak/article/details/19125507
标签: