github/fonteditor
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix empty ttf template

Browse Source
This commit is contained in:
kekee000
2015-04-14 00:18:15 +08:00
parent 626975a0df
commit 7750a1036c
8 changed files with 589 additions and 430 deletions
Download Patch File Download Diff File Expand all files Collapse all files

292
demo/sync/example-ascii.html Normal file
View File

@@ -0,0 +1,292 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>icon example</title>
<link rel="stylesheet" href="./page.css">
<link rel="stylesheet" href="./icon.css">
</head>
<body>
<div class="main">
<h1>预览字体</h1>
<ul class="icon-list">
<li>
<i class="icon">&#x21;</i>
<div class="code">\21</div>
<div class="name">exclam</div>
</li>
<li>
<i class="icon">&#x22;</i>
<div class="code">\22</div>
<div class="name">quotedbl</div>
</li>
<li>
<i class="icon">&#x23;</i>
<div class="code">\23</div>
<div class="name">numbersign</div>
</li>
<li>
<i class="icon">&#x24;</i>
<div class="code">\24</div>
<div class="name">dollar</div>
</li>
<li>
<i class="icon">&#x25;</i>
<div class="code">\25</div>
<div class="name">percent</div>
</li>
<li>
<i class="icon">&#x26;</i>
<div class="code">\26</div>
<div class="name">ampersand</div>
</li>
<li>
<i class="icon">&#x27;</i>
<div class="code">\27</div>
<div class="name">quotesingle</div>
</li>
<li>
<i class="icon">&#x28;</i>
<div class="code">\28</div>
<div class="name">parenleft</div>
</li>
<li>
<i class="icon">&#x29;</i>
<div class="code">\29</div>
<div class="name">parenright</div>
</li>
<li>
<i class="icon">&#x2a;</i>
<div class="code">\2a</div>
<div class="name">asterisk</div>
</li>
<li>
<i class="icon">&#x2b;</i>
<div class="code">\2b</div>
<div class="name">plus</div>
</li>
<li>
<i class="icon">&#x2c;</i>
<div class="code">\2c</div>
<div class="name">comma</div>
</li>
<li>
<i class="icon">&#x2d;</i>
<div class="code">\2d</div>
<div class="name">hyphen</div>
</li>
<li>
<i class="icon">&#x2e;</i>
<div class="code">\2e</div>
<div class="name">period</div>
</li>
<li>
<i class="icon">&#x2f;</i>
<div class="code">\2f</div>
<div class="name">slash</div>
</li>
<li>
<i class="icon">&#x30;</i>
<div class="code">\30</div>
<div class="name">zero</div>
</li>
<li>
<i class="icon">&#x31;</i>
<div class="code">\31</div>
<div class="name">one</div>
</li>
<li>
<i class="icon">&#x32;</i>
<div class="code">\32</div>
<div class="name">two</div>
</li>
<li>
<i class="icon">&#x33;</i>
<div class="code">\33</div>
<div class="name">three</div>
</li>
<li>
<i class="icon">&#x34;</i>
<div class="code">\34</div>
<div class="name">four</div>
</li>
<li>
<i class="icon">&#x35;</i>
<div class="code">\35</div>
<div class="name">five</div>
</li>
<li>
<i class="icon">&#x36;</i>
<div class="code">\36</div>
<div class="name">six</div>
</li>
<li>
<i class="icon">&#x37;</i>
<div class="code">\37</div>
<div class="name">seven</div>
</li>
<li>
<i class="icon">&#x38;</i>
<div class="code">\38</div>
<div class="name">eight</div>
</li>
<li>
<i class="icon">&#x39;</i>
<div class="code">\39</div>
<div class="name">nine</div>
</li>
<li>
<i class="icon">&#x3a;</i>
<div class="code">\3a</div>
<div class="name">colon</div>
</li>
<li>
<i class="icon">&#x3b;</i>
<div class="code">\3b</div>
<div class="name">semicolon</div>
</li>
<li>
<i class="icon">&#x3c;</i>
<div class="code">\3c</div>
<div class="name">less</div>
</li>
<li>
<i class="icon">&#x3d;</i>
<div class="code">\3d</div>
<div class="name">equal</div>
</li>
<li>
<i class="icon">&#x3e;</i>
<div class="code">\3e</div>
<div class="name">greater</div>
</li>
<li>
<i class="icon">&#x3f;</i>
<div class="code">\3f</div>
<div class="name">question</div>
</li>
<li>
<i class="icon">&#x40;</i>
<div class="code">\40</div>
<div class="name">at</div>
</li>
<li>
<i class="icon">&#x41;</i>
<div class="code">\41</div>
<div class="name">A</div>
</li>
<li>
<i class="icon">&#x42;</i>
<div class="code">\42</div>
<div class="name">B</div>
</li>
<li>
<i class="icon">&#x43;</i>
<div class="code">\43</div>
<div class="name">C</div>
</li>
<li>
<i class="icon">&#x44;</i>
<div class="code">\44</div>
<div class="name">D</div>
</li>
<li>
<i class="icon">&#x45;</i>
<div class="code">\45</div>
<div class="name">E</div>
</li>
<li>
<i class="icon">&#x46;</i>
<div class="code">\46</div>
<div class="name">F</div>
</li>
<li>
<i class="icon">&#x47;</i>
<div class="code">\47</div>
<div class="name">G</div>
</li>
<li>
<i class="icon">&#x48;</i>
<div class="code">\48</div>
<div class="name">H</div>
</li>
<li>
<i class="icon">&#x49;</i>
<div class="code">\49</div>
<div class="name">I</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>
&lt;i class="fonteditor"&gt;&amp;#x33&lt;/i&gt;
</pre>
</div>
</div>
</body>
</html>

529
demo/sync/example.html
View File

@@ -8,257 +8,284 @@
</head>
<body>
<div class="main">
<h1>fonteditor example</h1>
<ul class="icon-list">
<li>
<i class="icon icon-uniE001"></i>
<div class="code">\e001</div>
<div class="name">uniE001</div>
</li>
<li>
<i class="icon icon-uniE002"></i>
<div class="code">\e002</div>
<div class="name">uniE002</div>
</li>
<li>
<i class="icon icon-uniE003"></i>
<div class="code">\e003</div>
<div class="name">uniE003</div>
</li>
<li>
<i class="icon icon-uniE004"></i>
<div class="code">\e004</div>
<div class="name">uniE004</div>
</li>
<li>
<i class="icon icon-uniE005"></i>
<div class="code">\e005</div>
<div class="name">uniE005</div>
</li>
<li>
<i class="icon icon-uniE006"></i>
<div class="code">\e006</div>
<div class="name">uniE006</div>
</li>
<li>
<i class="icon icon-uniE007"></i>
<div class="code">\e007</div>
<div class="name">uniE007</div>
</li>
<li>
<i class="icon icon-uniE008"></i>
<div class="code">\e008</div>
<div class="name">uniE008</div>
</li>
<li>
<i class="icon icon-uniE009"></i>
<div class="code">\e009</div>
<div class="name">uniE009</div>
</li>
<li>
<i class="icon icon-uniE00A"></i>
<div class="code">\e00a</div>
<div class="name">uniE00A</div>
</li>
<li>
<i class="icon icon-uniE00B"></i>
<div class="code">\e00b</div>
<div class="name">uniE00B</div>
</li>
<li>
<i class="icon icon-uniE00C"></i>
<div class="code">\e00c</div>
<div class="name">uniE00C</div>
</li>
<li>
<i class="icon icon-uniE00D"></i>
<div class="code">\e00d</div>
<div class="name">uniE00D</div>
</li>
<li>
<i class="icon icon-uniE00E"></i>
<div class="code">\e00e</div>
<div class="name">uniE00E</div>
</li>
<li>
<i class="icon icon-uniE00F"></i>
<div class="code">\e00f</div>
<div class="name">uniE00F</div>
</li>
<li>
<i class="icon icon-uniE010"></i>
<div class="code">\e010</div>
<div class="name">uniE010</div>
</li>
<li>
<i class="icon icon-uniE011"></i>
<div class="code">\e011</div>
<div class="name">uniE011</div>
</li>
<li>
<i class="icon icon-uniE012"></i>
<div class="code">\e012</div>
<div class="name">uniE012</div>
</li>
<li>
<i class="icon icon-uniE013"></i>
<div class="code">\e013</div>
<div class="name">uniE013</div>
</li>
<li>
<i class="icon icon-uniE014"></i>
<div class="code">\e014</div>
<div class="name">uniE014</div>
</li>
<li>
<i class="icon icon-uniE015"></i>
<div class="code">\e015</div>
<div class="name">uniE015</div>
</li>
<li>
<i class="icon icon-uniE016"></i>
<div class="code">\e016</div>
<div class="name">uniE016</div>
</li>
<li>
<i class="icon icon-uniE017"></i>
<div class="code">\e017</div>
<div class="name">uniE017</div>
</li>
<li>
<i class="icon icon-uniE018"></i>
<div class="code">\e018</div>
<div class="name">uniE018</div>
</li>
<li>
<i class="icon icon-uniE019"></i>
<div class="code">\e019</div>
<div class="name">uniE019</div>
</li>
<li>
<i class="icon icon-uniE01A"></i>
<div class="code">\e01a</div>
<div class="name">uniE01A</div>
</li>
<li>
<i class="icon icon-uniE01B"></i>
<div class="code">\e01b</div>
<div class="name">uniE01B</div>
</li>
<li>
<i class="icon icon-uniE01C"></i>
<div class="code">\e01c</div>
<div class="name">uniE01C</div>
</li>
<li>
<i class="icon icon-uniE01D"></i>
<div class="code">\e01d</div>
<div class="name">uniE01D</div>
</li>
<li>
<i class="icon icon-uniE01E"></i>
<div class="code">\e01e</div>
<div class="name">uniE01E</div>
</li>
<li>
<i class="icon icon-uniE01F"></i>
<div class="code">\e01f</div>
<div class="name">uniE01F</div>
</li>
<li>
<i class="icon icon-uniE020"></i>
<div class="code">\e020</div>
<div class="name">uniE020</div>
</li>
<li>
<i class="icon icon-uniE021"></i>
<div class="code">\e021</div>
<div class="name">uniE021</div>
</li>
<li>
<i class="icon icon-uniE022"></i>
<div class="code">\e022</div>
<div class="name">uniE022</div>
</li>
<li>
<i class="icon icon-uniE023"></i>
<div class="code">\e023</div>
<div class="name">uniE023</div>
</li>
<li>
<i class="icon icon-uniE024"></i>
<div class="code">\e024</div>
<div class="name">uniE024</div>
</li>
<li>
<i class="icon icon-uniE025"></i>
<div class="code">\e025</div>
<div class="name">uniE025</div>
</li>
<li>
<i class="icon icon-uniE026"></i>
<div class="code">\e026</div>
<div class="name">uniE026</div>
</li>
<li>
<i class="icon icon-uniE027"></i>
<div class="code">\e027</div>
<div class="name">uniE027</div>
</li>
<li>
<i class="icon icon-uniE028"></i>
<div class="code">\e028</div>
<div class="name">uniE028</div>
</li>
<li>
<i class="icon icon-uniE029"></i>
<div class="code">\e029</div>
<div class="name">uniE029</div>
</li>
</ul>
</div>
<h1>预览字体</h1>
<ul class="icon-list">
<li>
<i class="icon">&#xe001;</i>
<div class="code">\e001</div>
<div class="name">uniE001</div>
</li>
<li>
<i class="icon">&#xe002;</i>
<div class="code">\e002</div>
<div class="name">uniE002</div>
</li>
<li>
<i class="icon">&#xe003;</i>
<div class="code">\e003</div>
<div class="name">uniE003</div>
</li>
<li>
<i class="icon">&#xe004;</i>
<div class="code">\e004</div>
<div class="name">uniE004</div>
</li>
<li>
<i class="icon">&#xe005;</i>
<div class="code">\e005</div>
<div class="name">uniE005</div>
</li>
<li>
<i class="icon">&#xe006;</i>
<div class="code">\e006</div>
<div class="name">uniE006</div>
</li>
<li>
<i class="icon">&#xe007;</i>
<div class="code">\e007</div>
<div class="name">uniE007</div>
</li>
<li>
<i class="icon">&#xe008;</i>
<div class="code">\e008</div>
<div class="name">uniE008</div>
</li>
<li>
<i class="icon">&#xe009;</i>
<div class="code">\e009</div>
<div class="name">uniE009</div>
</li>
<li>
<i class="icon">&#xe00a;</i>
<div class="code">\e00a</div>
<div class="name">uniE00A</div>
</li>
<li>
<i class="icon">&#xe00b;</i>
<div class="code">\e00b</div>
<div class="name">uniE00B</div>
</li>
<li>
<i class="icon">&#xe00c;</i>
<div class="code">\e00c</div>
<div class="name">uniE00C</div>
</li>
<li>
<i class="icon">&#xe00d;</i>
<div class="code">\e00d</div>
<div class="name">uniE00D</div>
</li>
<li>
<i class="icon">&#xe00e;</i>
<div class="code">\e00e</div>
<div class="name">uniE00E</div>
</li>
<li>
<i class="icon">&#xe00f;</i>
<div class="code">\e00f</div>
<div class="name">uniE00F</div>
</li>
<li>
<i class="icon">&#xe010;</i>
<div class="code">\e010</div>
<div class="name">uniE010</div>
</li>
<li>
<i class="icon">&#xe011;</i>
<div class="code">\e011</div>
<div class="name">uniE011</div>
</li>
<li>
<i class="icon">&#xe012;</i>
<div class="code">\e012</div>
<div class="name">uniE012</div>
</li>
<li>
<i class="icon">&#xe013;</i>
<div class="code">\e013</div>
<div class="name">uniE013</div>
</li>
<li>
<i class="icon">&#xe014;</i>
<div class="code">\e014</div>
<div class="name">uniE014</div>
</li>
<li>
<i class="icon">&#xe015;</i>
<div class="code">\e015</div>
<div class="name">uniE015</div>
</li>
<li>
<i class="icon">&#xe016;</i>
<div class="code">\e016</div>
<div class="name">uniE016</div>
</li>
<li>
<i class="icon">&#xe017;</i>
<div class="code">\e017</div>
<div class="name">uniE017</div>
</li>
<li>
<i class="icon">&#xe018;</i>
<div class="code">\e018</div>
<div class="name">uniE018</div>
</li>
<li>
<i class="icon">&#xe019;</i>
<div class="code">\e019</div>
<div class="name">uniE019</div>
</li>
<li>
<i class="icon">&#xe01a;</i>
<div class="code">\e01a</div>
<div class="name">uniE01A</div>
</li>
<li>
<i class="icon">&#xe01b;</i>
<div class="code">\e01b</div>
<div class="name">uniE01B</div>
</li>
<li>
<i class="icon">&#xe01c;</i>
<div class="code">\e01c</div>
<div class="name">uniE01C</div>
</li>
<li>
<i class="icon">&#xe01d;</i>
<div class="code">\e01d</div>
<div class="name">uniE01D</div>
</li>
<li>
<i class="icon">&#xe01e;</i>
<div class="code">\e01e</div>
<div class="name">uniE01E</div>
</li>
<li>
<i class="icon">&#xe01f;</i>
<div class="code">\e01f</div>
<div class="name">uniE01F</div>
</li>
<li>
<i class="icon">&#xe020;</i>
<div class="code">\e020</div>
<div class="name">uniE020</div>
</li>
<li>
<i class="icon">&#xe021;</i>
<div class="code">\e021</div>
<div class="name">uniE021</div>
</li>
<li>
<i class="icon">&#xe022;</i>
<div class="code">\e022</div>
<div class="name">uniE022</div>
</li>
<li>
<i class="icon">&#xe023;</i>
<div class="code">\e023</div>
<div class="name">uniE023</div>
</li>
<li>
<i class="icon">&#xe024;</i>
<div class="code">\e024</div>
<div class="name">uniE024</div>
</li>
<li>
<i class="icon">&#xe025;</i>
<div class="code">\e025</div>
<div class="name">uniE025</div>
</li>
<li>
<i class="icon">&#xe026;</i>
<div class="code">\e026</div>
<div class="name">uniE026</div>
</li>
<li>
<i class="icon">&#xe027;</i>
<div class="code">\e027</div>
<div class="name">uniE027</div>
</li>
<li>
<i class="icon">&#xe028;</i>
<div class="code">\e028</div>
<div class="name">uniE028</div>
</li>
<li>
<i class="icon">&#xe029;</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>
&lt;i class="fonteditor"&gt;&amp;#x33&lt;/i&gt;
</pre>
</div>
</div>
</body>
</html>

171
demo/sync/icon.css
View File

@@ -11,8 +11,7 @@
url("fonteditor.svg#uxfonteditor") format("svg"); /* iOS 4.1- */
}
[class^="icon-"],
[class*=" icon-"]:after {
.icon {
font-family: "fonteditor";
speak: none;
font-style: normal;
@@ -23,171 +22,3 @@
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-uniE001:before {
content: "\e001";
}
.icon-uniE002:before {
content: "\e002";
}
.icon-uniE003:before {
content: "\e003";
}
.icon-uniE004:before {
content: "\e004";
}
.icon-uniE005:before {
content: "\e005";
}
.icon-uniE006:before {
content: "\e006";
}
.icon-uniE007:before {
content: "\e007";
}
.icon-uniE008:before {
content: "\e008";
}
.icon-uniE009:before {
content: "\e009";
}
.icon-uniE00A:before {
content: "\e00a";
}
.icon-uniE00B:before {
content: "\e00b";
}
.icon-uniE00C:before {
content: "\e00c";
}
.icon-uniE00D:before {
content: "\e00d";
}
.icon-uniE00E:before {
content: "\e00e";
}
.icon-uniE00F:before {
content: "\e00f";
}
.icon-uniE010:before {
content: "\e010";
}
.icon-uniE011:before {
content: "\e011";
}
.icon-uniE012:before {
content: "\e012";
}
.icon-uniE013:before {
content: "\e013";
}
.icon-uniE014:before {
content: "\e014";
}
.icon-uniE015:before {
content: "\e015";
}
.icon-uniE016:before {
content: "\e016";
}
.icon-uniE017:before {
content: "\e017";
}
.icon-uniE018:before {
content: "\e018";
}
.icon-uniE019:before {
content: "\e019";
}
.icon-uniE01A:before {
content: "\e01a";
}
.icon-uniE01B:before {
content: "\e01b";
}
.icon-uniE01C:before {
content: "\e01c";
}
.icon-uniE01D:before {
content: "\e01d";
}
.icon-uniE01E:before {
content: "\e01e";
}
.icon-uniE01F:before {
content: "\e01f";
}
.icon-uniE020:before {
content: "\e020";
}
.icon-uniE021:before {
content: "\e021";
}
.icon-uniE022:before {
content: "\e022";
}
.icon-uniE023:before {
content: "\e023";
}
.icon-uniE024:before {
content: "\e024";
}
.icon-uniE025:before {
content: "\e025";
}
.icon-uniE026:before {
content: "\e026";
}
.icon-uniE027:before {
content: "\e027";
}
.icon-uniE028:before {
content: "\e028";
}
.icon-uniE029:before {
content: "\e029";
}

1
demo/sync/page.css
View File

@@ -111,6 +111,7 @@ table {
}
.icon-list {
overflow: hidden;
*zoom: 1;
}
.icon-list li {
float: left;