github/fonteditor
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
fonteditor/demo/eot.html
mkwiser 4c302114c4 add ttf2eot eot2ttf 
replace ajaxBinaryFile.js to ajaxFile.js
2014-10-25 03:03:31 +08:00

493 lines
14 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>eot preview</title>
</head>
<body>
<link rel="stylesheet" href="../css/preview.css">
<style>
@font-face {
font-family: 'iconfont';
src: url('../test/iconfont.eot'); /* IE9*/
src: url('../test/iconfont.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
}
.icon {
font-family: 'iconfont';
}
</style>
<div class="main">
<h1>fonteditor图标</h1>
<ul class="icon-list">
<li>
<i class="icon">x</i>
<div class="code">\78</div>
<div class="name">x</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e600</div>
<div class="name">uniE600</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e601</div>
<div class="name">uniE601</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e602</div>
<div class="name">uniE602</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e603</div>
<div class="name">uniE603</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e604</div>
<div class="name">uniE604</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e605</div>
<div class="name">uniE605</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e606</div>
<div class="name">uniE606</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e607</div>
<div class="name">uniE607</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e608</div>
<div class="name">uniE608</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e609</div>
<div class="name">uniE609</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e60a</div>
<div class="name">uniE60A</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e60b</div>
<div class="name">uniE60B</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e60c</div>
<div class="name">uniE60C</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e60d</div>
<div class="name">uniE60D</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e60e</div>
<div class="name">uniE60E</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e60f</div>
<div class="name">uniE60F</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e610</div>
<div class="name">uniE610</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e611</div>
<div class="name">uniE611</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e612</div>
<div class="name">uniE612</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e613</div>
<div class="name">uniE613</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e614</div>
<div class="name">uniE614</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e615</div>
<div class="name">uniE615</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e616</div>
<div class="name">uniE616</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e617</div>
<div class="name">uniE617</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e618</div>
<div class="name">uniE618</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e619</div>
<div class="name">uniE619</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e61a</div>
<div class="name">uniE61A</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e61b</div>
<div class="name">uniE61B</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e61c</div>
<div class="name">uniE61C</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e61d</div>
<div class="name">uniE61D</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e61e</div>
<div class="name">uniE61E</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e61f</div>
<div class="name">uniE61F</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e620</div>
<div class="name">uniE620</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e621</div>
<div class="name">uniE621</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e622</div>
<div class="name">uniE622</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e623</div>
<div class="name">uniE623</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e624</div>
<div class="name">uniE624</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e625</div>
<div class="name">uniE625</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e626</div>
<div class="name">uniE626</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e627</div>
<div class="name">uniE627</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e628</div>
<div class="name">uniE628</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e629</div>
<div class="name">uniE629</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e62a</div>
<div class="name">uniE62A</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e62b</div>
<div class="name">uniE62B</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e62c</div>
<div class="name">uniE62C</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e62d</div>
<div class="name">uniE62D</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e62e</div>
<div class="name">uniE62E</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e62f</div>
<div class="name">uniE62F</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e630</div>
<div class="name">uniE630</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e631</div>
<div class="name">uniE631</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e632</div>
<div class="name">uniE632</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e633</div>
<div class="name">uniE633</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e634</div>
<div class="name">uniE634</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e635</div>
<div class="name">uniE635</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e636</div>
<div class="name">uniE636</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e637</div>
<div class="name">uniE637</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e638</div>
<div class="name">uniE638</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e639</div>
<div class="name">uniE639</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e63a</div>
<div class="name">uniE63A</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e63b</div>
<div class="name">uniE63B</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e63c</div>
<div class="name">uniE63C</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e63d</div>
<div class="name">uniE63D</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e63e</div>
<div class="name">uniE63E</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e63f</div>
<div class="name">uniE63F</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e640</div>
<div class="name">uniE640</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e641</div>
<div class="name">uniE641</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e642</div>
<div class="name">uniE642</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e643</div>
<div class="name">uniE643</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e644</div>
<div class="name">uniE644</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e645</div>
<div class="name">uniE645</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e646</div>
<div class="name">uniE646</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e647</div>
<div class="name">uniE647</div>
</li>
<li>
<i class="icon"></i>
<div class="code">\e648</div>
<div class="name">uniE648</div>
</li>
</ul>
<div class="helps">第一步：使用font-face声明字体
<pre>@font-face {
font-family: 'iconfont';
src: url('iconfont.eot'); /* IE9*/
src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff') format('woff'), /* chrome、firefox */
url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('iconfont.svg#uxiconfont') format('svg'); /* iOS 4.1- */
}
</pre>
第二步：定义使用iconfont的样式
<pre>.iconfont {
font-family:"iconfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
</pre>
第三步：挑选相应图标并获取字体编码，应用于页面
<pre>&lt;i class="iconfont"&gt;&amp;#x33&lt;/i&gt;
</pre>
</div>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink