fix svg font import
This commit is contained in:
921
demo/eot.html
921
demo/eot.html
@@ -1,493 +1,452 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- 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>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声明字体
|
||||
<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: '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- */
|
||||
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>
|
||||
第二步:定义使用iconfont的样式
|
||||
<pre>.iconfont {
|
||||
font-family:"iconfont" !important;
|
||||
第二步:定义使用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="iconfont">&#x33</i>
|
||||
第三步:挑选相应图标并获取字体编码,应用于页面
|
||||
<pre> <i class="fonteditor">&#x33</i>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</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>
|
||||
|
||||
@@ -15,7 +15,7 @@ define(
|
||||
var string = require('common/string');
|
||||
var lang = require('common/lang');
|
||||
var glyfAdjust = require('ttf/util/glyfAdjust');
|
||||
|
||||
var emptyttf = require('ttf/data/empty');
|
||||
|
||||
/**
|
||||
* 读取在线字体
|
||||
@@ -83,13 +83,10 @@ define(
|
||||
if (program.ttfManager.isChanged() && !window.confirm('是否放弃保存当前编辑的项目?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
$.getJSON('./font/empty.json', function (imported) {
|
||||
program.ttfManager.set(imported);
|
||||
program.data.projectId = null;
|
||||
// 建立项目 提示保存
|
||||
actions.save();
|
||||
});
|
||||
program.ttfManager.set(lang.clone(emptyttf));
|
||||
program.data.projectId = null;
|
||||
// 建立项目 提示保存
|
||||
actions.save();
|
||||
},
|
||||
|
||||
'open': function () {
|
||||
|
||||
167
src/ttf/data/empty.js
Normal file
167
src/ttf/data/empty.js
Normal file
@@ -0,0 +1,167 @@
|
||||
/**
|
||||
* @file 空的ttf格式json对象
|
||||
* @author mengke01(kekee000@gmail.com)
|
||||
*/
|
||||
define(
|
||||
function(require) {
|
||||
return {
|
||||
"version": 1,
|
||||
"numTables": 12,
|
||||
"searchRenge": 128,
|
||||
"entrySelector": 3,
|
||||
"rengeShift": 64,
|
||||
"head": {
|
||||
"version": 1,
|
||||
"fontRevision": 1,
|
||||
"checkSumAdjustment": 369537602,
|
||||
"magickNumber": 1594834165,
|
||||
"flags": 11,
|
||||
"unitsPerEm": 1024,
|
||||
"created": "2014-12-06T22:05:19.000Z",
|
||||
"modified": "2014-12-06T22:20:03.000Z",
|
||||
"xMin": 34,
|
||||
"yMin": 0,
|
||||
"xMax": 306,
|
||||
"yMax": 682,
|
||||
"macStyle": 0,
|
||||
"lowestRecPPEM": 8,
|
||||
"fontDirectionHint": 2,
|
||||
"indexToLocFormat": 0,
|
||||
"glyphDataFormat": 0
|
||||
},
|
||||
"glyf": [{
|
||||
"contours": [
|
||||
[{
|
||||
"x": 34,
|
||||
"y": 0,
|
||||
"onCurve": true
|
||||
}, {
|
||||
"x": 34,
|
||||
"y": 682,
|
||||
"onCurve": true
|
||||
}, {
|
||||
"x": 306,
|
||||
"y": 682,
|
||||
"onCurve": true
|
||||
}, {
|
||||
"x": 306,
|
||||
"y": 0,
|
||||
"onCurve": true
|
||||
}],
|
||||
[{
|
||||
"x": 68,
|
||||
"y": 34,
|
||||
"onCurve": true
|
||||
}, {
|
||||
"x": 272,
|
||||
"y": 34,
|
||||
"onCurve": true
|
||||
}, {
|
||||
"x": 272,
|
||||
"y": 648,
|
||||
"onCurve": true
|
||||
}, {
|
||||
"x": 68,
|
||||
"y": 648,
|
||||
"onCurve": true
|
||||
}]
|
||||
],
|
||||
"xMin": 34,
|
||||
"yMin": 0,
|
||||
"xMax": 306,
|
||||
"yMax": 682,
|
||||
"advanceWidth": 374,
|
||||
"leftSideBearing": 34,
|
||||
"name": ".notdef"
|
||||
}],
|
||||
"cmap": {},
|
||||
"name": {
|
||||
"fontFamily": "fonteditor",
|
||||
"fontSubFamily": "Medium",
|
||||
"uniqueSubFamily": "FontEditor 1.0 : fonteditor : 6-10-2014",
|
||||
"fullName": "fonteditor",
|
||||
"version": "Version 1.0 ; FontEditor (v0.0.1) -l 8 -r 50 -G 200 -x 14 -w \"G\" -f -s",
|
||||
"postScriptName": "fonteditor"
|
||||
},
|
||||
"hhea": {
|
||||
"version": 1,
|
||||
"ascent": 812,
|
||||
"descent": -212,
|
||||
"lineGap": 92,
|
||||
"advanceWidthMax": 374,
|
||||
"minLeftSideBearing": 34,
|
||||
"minRightSideBearing": 68,
|
||||
"xMaxExtent": 306,
|
||||
"caretSlopeRise": 1,
|
||||
"caretSlopeRun": 0,
|
||||
"caretOffset": 0,
|
||||
"reserved0": 0,
|
||||
"reserved1": 0,
|
||||
"reserved2": 0,
|
||||
"reserved3": 0,
|
||||
"metricDataFormat": 0,
|
||||
"numOfLongHorMetrics": 1
|
||||
},
|
||||
"post": {
|
||||
"italicAngle": 0,
|
||||
"postoints": 65411,
|
||||
"underlinePosition": 50,
|
||||
"underlineThickness": 0,
|
||||
"isFixedPitch": 0,
|
||||
"minMemType42": 0,
|
||||
"maxMemType42": 0,
|
||||
"minMemType1": 0,
|
||||
"maxMemType1": 1,
|
||||
"format": 2
|
||||
},
|
||||
"OS/2": {
|
||||
"version": 4,
|
||||
"xAvgCharWidth": 1031,
|
||||
"usWeightClass": 400,
|
||||
"usWidthClass": 5,
|
||||
"fsType": 0,
|
||||
"ySubscriptXSize": 665,
|
||||
"ySubscriptYSize": 716,
|
||||
"ySubscriptXOffset": 0,
|
||||
"ySubscriptYOffset": 143,
|
||||
"ySuperscriptXSize": 665,
|
||||
"ySuperscriptYSize": 716,
|
||||
"ySuperscriptXOffset": 0,
|
||||
"ySuperscriptYOffset": 491,
|
||||
"yStrikeoutSize": 51,
|
||||
"yStrikeoutPosition": 265,
|
||||
"sFamilyClass": 0,
|
||||
"bFamilyType": 2,
|
||||
"bSerifStyle": 0,
|
||||
"bWeight": 6,
|
||||
"bProportion": 3,
|
||||
"bContrast": 0,
|
||||
"bStrokeVariation": 0,
|
||||
"bArmStyle": 0,
|
||||
"bLetterform": 0,
|
||||
"bMidline": 0,
|
||||
"bXHeight": 0,
|
||||
"ulUnicodeRange1": 1,
|
||||
"ulUnicodeRange2": 268435456,
|
||||
"ulUnicodeRange3": 0,
|
||||
"ulUnicodeRange4": 0,
|
||||
"achVendID": "PfEd",
|
||||
"fsSelection": 192,
|
||||
"usFirstCharIndex": 0,
|
||||
"usLastCharIndex": 0,
|
||||
"sTypoAscender": 812,
|
||||
"sTypoDescender": -212,
|
||||
"sTypoLineGap": 92,
|
||||
"usWinAscent": 812,
|
||||
"usWinDescent": 212,
|
||||
"ulCodePageRange1": 1,
|
||||
"ulCodePageRange2": 0,
|
||||
"sxHeight": 792,
|
||||
"sCapHeight": 0,
|
||||
"usDefaultChar": 0,
|
||||
"usBreakChar": 32,
|
||||
"usMaxContext": 1
|
||||
}
|
||||
};
|
||||
}
|
||||
);
|
||||
@@ -10,6 +10,7 @@
|
||||
define(
|
||||
function (require) {
|
||||
var string = require('common/string');
|
||||
var lang = require('common/lang');
|
||||
var DOMParser = require('common/DOMParser');
|
||||
var path2contours = require('./svg/path2contours');
|
||||
var svgnode2contours = require('./svg/svgnode2contours');
|
||||
@@ -17,6 +18,7 @@ define(
|
||||
var computeBoundingBox = require('graphics/computeBoundingBox');
|
||||
var glyfAdjust = require('./util/glyfAdjust');
|
||||
var error = require('./error');
|
||||
var emptyttf = require('./data/empty');
|
||||
|
||||
/**
|
||||
* 加载xml字符串
|
||||
@@ -39,7 +41,19 @@ define(
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取空的ttfObject
|
||||
* 获取空的ttf格式对象
|
||||
*
|
||||
* @return {Object} ttfObject对象
|
||||
*/
|
||||
function getEmptyTTFObject() {
|
||||
var ttf = lang.clone(emptyttf);
|
||||
ttf.head.unitsPerEm = 0; // 去除unitsPerEm以便于重新计算
|
||||
ttf.from = 'svgfont';
|
||||
return ttf;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取空的对象,用来作为ttf的容器
|
||||
*
|
||||
* @return {Object} ttfObject对象
|
||||
*/
|
||||
@@ -226,7 +240,12 @@ define(
|
||||
missing.contours = path2contours(d);
|
||||
}
|
||||
|
||||
ttf.glyf.push(missing);
|
||||
// 去除默认的空字形
|
||||
if (ttf.glyf[0] && ttf.glyf[0].name === '.notdef') {
|
||||
ttf.glyf.splice(0, 1);
|
||||
}
|
||||
|
||||
ttf.glyf.unshift(missing);
|
||||
}
|
||||
|
||||
var glyfNodes = xmlDoc.getElementsByTagName('glyph');
|
||||
@@ -331,19 +350,20 @@ define(
|
||||
*/
|
||||
function parseXML(xmlDoc, options) {
|
||||
|
||||
var ttf = getEmptyObject();
|
||||
|
||||
if (!xmlDoc.getElementsByTagName('svg').length) {
|
||||
error.raise(10106);
|
||||
}
|
||||
|
||||
parseFont(xmlDoc, ttf);
|
||||
var ttf;
|
||||
|
||||
// 如果是svg字体格式,则解析glyf,否则解析path
|
||||
if (ttf.from === 'svgfont') {
|
||||
if (xmlDoc.getElementsByTagName('font')[0]) {
|
||||
ttf = getEmptyTTFObject();
|
||||
parseFont(xmlDoc, ttf);
|
||||
parseGlyf(xmlDoc, ttf);
|
||||
}
|
||||
else {
|
||||
ttf = getEmptyObject();
|
||||
parsePath(xmlDoc, ttf);
|
||||
}
|
||||
|
||||
|
||||
BIN
test/fonteditor.eot
Normal file
BIN
test/fonteditor.eot
Normal file
Binary file not shown.
Reference in New Issue
Block a user