自定义字体与字体图标

自定义字体

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

  • 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的<head>引入文件<link rel="stylesheet" href="css/font.css">
  3. HTML中字体图标一般用i标签
  4. 在demo页中找到所需图标的className，加在i标签上，一般由两个类名组成

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

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

2018.1.23
2018.1.29更新

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • H5 Laya 字体
    一、概念 参考网页字体Serif和Sans-serif的区别及浏览器字体的设置CSS Font知识整理总结 1.F...
    合肥黑阅读 6,407评论 0赞 12
  • font-face
    @font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-fac...
    我是强强阅读 790评论 0赞 0
  • 自定义字体与字蛛使用方法及坑点
    相信很多做前端的都会遇到这一类问题，当前网页需要引入一些特殊字体，过去这些字体通常使用图片代替，不仅增加了requ...
    jskid阅读 9,013评论 1赞 4
  • css3自定义字体
    1.使用情景：有些Blog就使用了许多这样的自定义Web字体，比如说首页的Logo，Tags以及页面中的手写英文体...
    从小文青走向快乐的程序媛阅读 9,103评论 0赞 0
  • 2018-01-21
    又忍不住买了12色墨水。山葡萄、秋樱、红叶、踟蹰、孔雀、竹林、绀碧、冬柿、天色、夕烧、紫式部、松露。滴落在纸上留下...
    oulan阅读 60评论 0赞 0