自定义字体与字体图标

自定义字体

四种格式：都需要，用来兼容不同类型的浏览器

• 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- 用 */ }

字体图标

1. 拿到字体文件，放入文件夹
2. 在HTML的引入文件
3. HTML中字体图标一般用i标签
4. 在demo页中找到所需图标的className，加在i标签上，一般由两个类名组成

14组好看又免费的字体图标

web界面设计的免费图标字体

---

2018.1.23
2018.1.29更新