453 lines
10 KiB
HTML
453 lines
10 KiB
HTML
<!DOCTYPE html>
|
||
<!-- saved from url=(0038)http://127.0.0.1/fonteditor/empty.html -->
|
||
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||
<meta charset="UTF-8">
|
||
<title>fonteditor</title>
|
||
<script>
|
||
var _hmt = _hmt || [];
|
||
/baidu.com$/.test(location.hostname) && (function() {
|
||
var hm = document.createElement("script");
|
||
hm.src = "//hm.baidu.com/hm.js?65ce30cdeda584c416e39648915689f7";
|
||
var s = document.getElementsByTagName("script")[0];
|
||
s.parentNode.insertBefore(hm, s);
|
||
})();
|
||
</script>
|
||
<style id="style-1-cropbar-clipper">/* Copyright 2014 Evernote Corporation. All rights reserved. */
|
||
.en-markup-crop-options {
|
||
top: 18px !important;
|
||
left: 50% !important;
|
||
margin-left: -100px !important;
|
||
width: 200px !important;
|
||
border: 2px rgba(255,255,255,.38) solid !important;
|
||
border-radius: 4px !important;
|
||
}
|
||
|
||
.en-markup-crop-options div div:first-of-type {
|
||
margin-left: 0px !important;
|
||
}
|
||
</style></head>
|
||
<body><style>* {
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
}
|
||
blockquote,
|
||
body,
|
||
button,
|
||
dd,
|
||
dl,
|
||
dt,
|
||
fieldset,
|
||
form,
|
||
h1,
|
||
h2,
|
||
h3,
|
||
h4,
|
||
h5,
|
||
h6,
|
||
hr,
|
||
input,
|
||
legend,
|
||
li,
|
||
ol,
|
||
p,
|
||
pre,
|
||
td,
|
||
textarea,
|
||
th,
|
||
ul {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
body,
|
||
button,
|
||
input,
|
||
select,
|
||
textarea {
|
||
font: 12px/1.5 tahoma, arial, sans-serif;
|
||
}
|
||
h1,
|
||
h2,
|
||
h3,
|
||
h4,
|
||
h5,
|
||
h6 {
|
||
font-size: 100%;
|
||
}
|
||
address,
|
||
cite,
|
||
dfn,
|
||
em,
|
||
var {
|
||
font-style: normal;
|
||
}
|
||
code,
|
||
kbd,
|
||
pre,
|
||
samp {
|
||
font-family: courier new, courier, monospace;
|
||
}
|
||
small {
|
||
font-size: 12px;
|
||
}
|
||
ol,
|
||
ul {
|
||
list-style: none;
|
||
}
|
||
a {
|
||
text-decoration: none;
|
||
}
|
||
a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
legend {
|
||
color: #000000;
|
||
}
|
||
fieldset,
|
||
img {
|
||
border: 0;
|
||
}
|
||
button,
|
||
input,
|
||
select,
|
||
textarea {
|
||
font-size: 100%;
|
||
}
|
||
table {
|
||
border-collapse: collapse;
|
||
border-spacing: 0;
|
||
}
|
||
.main {
|
||
padding: 30px 100px;
|
||
}
|
||
.main h1 {
|
||
font-size: 36px;
|
||
color: #333;
|
||
text-align: left;
|
||
margin-bottom: 30px;
|
||
border-bottom: 1px solid #eeeeee;
|
||
}
|
||
.helps {
|
||
margin-top: 40px;
|
||
}
|
||
.helps pre {
|
||
padding: 20px;
|
||
margin: 10px 0;
|
||
border: solid 1px #e7e1cd;
|
||
background-color: #fffdef;
|
||
overflow: auto;
|
||
}
|
||
.icon-list {
|
||
overflow: hidden;
|
||
}
|
||
.icon-list li {
|
||
float: left;
|
||
width: 100px;
|
||
height: 150px;
|
||
text-align: center;
|
||
}
|
||
.icon-list .icon {
|
||
font-size: 42px;
|
||
line-height: 100px;
|
||
margin: 10px 0;
|
||
color: #333;
|
||
font-style: normal;
|
||
-webkit-transition: font-size 0.25s ease-out 0s;
|
||
-moz-transition: font-size 0.25s ease-out 0s;
|
||
transition: font-size 0.25s ease-out 0s;
|
||
}
|
||
.icon-list .icon:hover {
|
||
font-size: 100px;
|
||
}
|
||
.icon-list .code {
|
||
color: green;
|
||
font-weight: bold;
|
||
}
|
||
</style>
|
||
<style>
|
||
@font-face {
|
||
font-family: 'fonteditor';
|
||
src: url('../test/fonteditor.eot'); /* IE9*/
|
||
src: url('../test/fonteditor.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||
}
|
||
.icon {
|
||
font-family: 'fonteditor';
|
||
}
|
||
</style>
|
||
<div class="main">
|
||
<h1>预览ttf格式字体</h1>
|
||
<ul class="icon-list">
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e001</div>
|
||
<div class="name">uniE001</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e002</div>
|
||
<div class="name">uniE002</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e003</div>
|
||
<div class="name">uniE003</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e004</div>
|
||
<div class="name">uniE004</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e005</div>
|
||
<div class="name">uniE005</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e006</div>
|
||
<div class="name">uniE006</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e007</div>
|
||
<div class="name">uniE007</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e008</div>
|
||
<div class="name">uniE008</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e009</div>
|
||
<div class="name">uniE009</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e00a</div>
|
||
<div class="name">uniE00A</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e00b</div>
|
||
<div class="name">uniE00B</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e00c</div>
|
||
<div class="name">uniE00C</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e00d</div>
|
||
<div class="name">uniE00D</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e00e</div>
|
||
<div class="name">uniE00E</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e00f</div>
|
||
<div class="name">uniE00F</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e010</div>
|
||
<div class="name">uniE010</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e011</div>
|
||
<div class="name">uniE011</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e012</div>
|
||
<div class="name">uniE012</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e013</div>
|
||
<div class="name">uniE013</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e014</div>
|
||
<div class="name">uniE014</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e015</div>
|
||
<div class="name">uniE015</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e016</div>
|
||
<div class="name">uniE016</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e017</div>
|
||
<div class="name">uniE017</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e018</div>
|
||
<div class="name">uniE018</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e019</div>
|
||
<div class="name">uniE019</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e01a</div>
|
||
<div class="name">uniE01A</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e01b</div>
|
||
<div class="name">uniE01B</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e01c</div>
|
||
<div class="name">uniE01C</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e01d</div>
|
||
<div class="name">uniE01D</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e01e</div>
|
||
<div class="name">uniE01E</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e01f</div>
|
||
<div class="name">uniE01F</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e020</div>
|
||
<div class="name">uniE020</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e021</div>
|
||
<div class="name">uniE021</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e022</div>
|
||
<div class="name">uniE022</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e023</div>
|
||
<div class="name">uniE023</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e024</div>
|
||
<div class="name">uniE024</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e025</div>
|
||
<div class="name">uniE025</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e026</div>
|
||
<div class="name">uniE026</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e027</div>
|
||
<div class="name">uniE027</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e028</div>
|
||
<div class="name">uniE028</div>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="icon"></i>
|
||
<div class="code">\e029</div>
|
||
<div class="name">uniE029</div>
|
||
</li>
|
||
|
||
</ul>
|
||
<div class="helps">第一步：使用font-face声明字体
|
||
<pre>@font-face {
|
||
font-family: 'fonteditor';
|
||
src: url('fonteditor.eot'); /* IE9*/
|
||
src: url('fonteditor.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||
url('fonteditor.woff') format('woff'), /* chrome、firefox */
|
||
url('fonteditor.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
|
||
url('fonteditor.svg#uxfonteditor') format('svg'); /* iOS 4.1- */
|
||
}
|
||
</pre>
|
||
第二步：定义使用fonteditor的样式
|
||
<pre>.fonteditor {
|
||
font-family:"fonteditor" !important;
|
||
font-size:16px;font-style:normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
-webkit-text-stroke-width: 0.2px;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
</pre>
|
||
第三步：挑选相应图标并获取字体编码，应用于页面
|
||
<pre> <i class="fonteditor">&#x33</i>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<div id="window-resizer-tooltip"><a href="http://127.0.0.1/fonteditor/empty.html#" title="Edit settings"></a><span class="tooltipTitle">Window size: </span><span class="tooltipWidth" id="winWidth"></span> x <span class="tooltipHeight" id="winHeight"></span><br><span class="tooltipTitle">Viewport size: </span><span class="tooltipWidth" id="vpWidth"></span> x <span class="tooltipHeight" id="vpHeight"></span></div></body></html>
|