<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>字体设置</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0"> <meta name="apple-moible-web-app-capable" content="yes"> <meta name="apple-moible-web-app-status-bar-style" content="black"> <meta name="author" content="Geovin Du 涂聚文"> <style> @font-face { font-family: 'fontello'; src: url('./fonts/fontello.eot?68514474'); /*IE 9 Compat Modes*/ src: url('./fonts/fontello.eot?68514474#iefix') format('embedded-opentype'), /*IE6-IE8 */ url('./fonts/fontello.woff?68514474') format('woff'), /*Modern Brosers*/ url('./fonts/fontello.ttf?68514474') format('truetype'), /*Safari,Android,iOS */ url('./fonts/fontello.svg?68514474#fontello') format('svg'); /*Legacy iOS */ font-weight: normal; font-style: normal; } .demo-icon { font-family: "fontello"; /*字体名*/ font-style: normal; /*字体样式*/ display: inline-block; /*行内块元素*/ font-size: 42px; /*字体大小*/ margin-right: 5px; /*元素的右外边距*/ } </style> </head> <body> <i class="demo-icon icon-glass"></i> <i class="demo-icon icon-music"></i> <i class="demo-icon icon-search"></i> <i class="demo-icon icon-mail"></i> </body> </html>