1. 程式人生 > 實用技巧 >css: Web Open Font Format

css: Web Open Font Format

<!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>