自定义字体与字体图标
2018-01-23 本文已影响0人
英俊又可爱XD
自定义字体
四种格式：都需要，用来兼容不同类型的浏览器
- eot，svg，ttf，woff
- 移动端用 *.ttf 就可以了
导入
@font-face {
font-family: 'iconfont';
src: url('*.eot'); /* IE9*/
src: url('*.eot?#iefix') format('embedded-opentype'), /* 给IE6-IE8用 */
url('*.woff') format('woff'), /* 给chrome、firefox用 */
url('*.ttf') format('truetype'), /* 给chrome、firefox、opera、Safari, Android, iOS 4.2+ 用*/
url('*.svg#iconfont') format('svg'); /*给 iOS 4.1- 用 */ }
字体图标
- 拿到字体文件，放入文件夹
- 在HTML的<head>引入文件<link rel="stylesheet" href="css/font.css">
- HTML中字体图标一般用i标签
- 在demo页中找到所需图标的className，加在i标签上，一般由两个类名组成
14组好看又免费的字体图标
2018.1.23
2018.1.29更新
