modify previewer

css/preview.less

@@ -25,7 +25,7 @@
     }
 }
 
-.icon_lists {
+.icon-list {
     overflow: hidden;
 
     li {
@@ -43,10 +43,16 @@
         font-style: normal;
         -webkit-transition:font-size .25s ease-out 0s;
         -moz-transition:font-size .25s ease-out 0s;
-        transition:font-size .25s ease-out 0s
+        transition:font-size .25s ease-out 0s;
     }
 
     .icon:hover {
         font-size:100px
     }
-}
+
+    .code {
+        color: green;
+        font-weight: bold;
+    }
+    
+}

src/fonteditor/widget/previewer.js

@@ -16,18 +16,16 @@ define(
         var ttf2base64 = require('ttf/ttf2base64');
         var woff2base64 = require('ttf/woff2base64');
         var svg2base64 = require('ttf/svg2base64');
+        var unicode2xml = require('ttf/util/unicode2xml');
         var utpl = require('utpl');
 
         var previewTplRender = null; // 模板渲染函数
 
-        /**
-         * unicode2html编码
-         * 
-         * @param {number} u unicode码
-         * @return {string} html编码
-         */
-        function unicode2html(u) {
-            return '&#x' + u.toString(16) + ';';
+        // 列出unicode
+        function listUnicode(unicode) {
+            return unicode.map(function(u) {
+                return '\\' + u.toString(16);
+            }).join(',');
         }
 
         /**
@@ -64,8 +62,9 @@ define(
 
             filtered.forEach(function(g) {
                 glyfList.push({
-                    code: '&#x' + g.unicode[0].toString(16) + ';',
-                    codeName: g.unicode.map(unicode2html).join(',')
+                    code: unicode2xml(g.unicode[0]),
+                    codeName: listUnicode(g.unicode),
+                    name: g.name
                 });
             });
 

src/ttf/ttf2svg.js

@@ -14,8 +14,8 @@ define(
         var string = require('common/string');
         var TTFReader = require('./ttfreader');
         var contours2svg = require('./util/contours2svg');
+        var unicode2xml = require('./util/unicode2xml');
         var error = require('./error');
-
         // svg font id
         var SVG_FONT_ID = 'fonteditor';
 
@@ -38,24 +38,6 @@ define(
         // glyph 模板
         var GLYPH_TPL = '<glyph glyph-name="${name}" unicode="${unicode}" d="${d}" />';
 
-        /**
-         * unicode 转xml编码格式
-         * 
-         * @param {Array} unicode unicode字符集
-         * @return {string} xml编码格式
-         */
-        function unicode2xml(unicode) {
-            if (typeof(unicode) == 'number') {
-                unicode = [unicode];
-            }
-            return unicode.map(function(u) {
-                if (u < 0x20) {
-                    return '';
-                }
-                return u >= 0x20 && u <= 255 ? string.encodeHTML(String.fromCharCode(u).toLowerCase()) : '&#x' + u.toString(16) + ';';
-            }).join('');
-        }
-
         /**
          * ttf数据结构转svg
          * 

src/ttf/util/unicode2xml.js

@@ -0,0 +1,34 @@
+/**
+ * @file unicode2xml.js
+ * @author mengke01
+ * @date 
+ * @description
+ * unicode 转xml字符
+ */
+
+define(
+    function(require) {
+        
+        var string = require('common/string');
+
+        /**
+         * unicode 转xml编码格式
+         * 
+         * @param {Array} unicodeList unicode字符列表
+         * @return {string} xml编码格式
+         */
+        function unicode2xml(unicodeList) {
+            if (typeof(unicodeList) == 'number') {
+                unicodeList = [unicodeList];
+            }
+            return unicodeList.map(function(u) {
+                if (u < 0x20) {
+                    return '';
+                }
+                return u >= 0x20 && u <= 255 ? string.encodeHTML(String.fromCharCode(u).toLowerCase()) : '&#x' + u.toString(16) + ';';
+            }).join('');
+        }
+
+        return unicode2xml;
+    }
+);

template/preview-ttf.html

@@ -10,13 +10,14 @@
     </style>
     <div class="main">
         <h1>fonteditor图标</h1>
-        <ul class="icon_lists">
-        {%glyfList.forEach(function(glyf) {%}
-        <li>
-        <i class="icon">{%=glyf.code%}</i>
-            <div class="code">{%=glyf.codeName%}</div>
-        </li>
-        {%});%}
+        <ul class="icon-list">
+            {%glyfList.forEach(function(glyf) {%}
+            <li>
+            <i class="icon">{%=glyf.code%}</i>
+                <div class="code">{%=glyf.codeName%}</div>
+                <div class="name">{%=glyf.name%}</div>
+            </li>
+            {%});%}
         </ul>
         <div class="helps">第一步：使用font-face声明字体
 <pre>

ttf.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>TTF文件管理</title>
+    <title>FontEditor字体编辑器</title>
     <link rel="stylesheet" type="text/css" href="./dep/bootstrap/css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="./css/ttf.css">
 </head>