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

add preview

Browse Source
This commit is contained in:
mkwiser
2014-10-16 00:41:13 +08:00
parent 2b227c06b1
commit de6b0ca062
10 changed files with 348 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
css/common/reset.less Normal file
View File

@@ -0,0 +1,91 @@
* {
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:#000
}
fieldset,
img {
border:0
}
button,
input,
select,
textarea {
font-size:100%
}
table {
border-collapse:collapse;
border-spacing:0
}

52
css/preview.less Normal file
View File

@@ -0,0 +1,52 @@
@import './common/reset';
.main {
padding:30px 100px;
h1 {
font-size:36px;
color:#333;
text-align:left;
margin-bottom:30px;
border-bottom:1px solid #eee
}
}
.helps {
margin-top:40px;
pre {
padding:20px;
margin:10px 0;
border:solid 1px #e7e1cd;
background-color:#fffdef;
overflow:auto
}
}
.icon_lists {
overflow: hidden;
li {
float:left;
width:100px;
height:150px;
text-align:center
}
.icon {
font-size:42px;
line-height:100px;
margin:10px 0;
color:#333;
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
}
.icon:hover {
font-size:100px
}
}

1
dep/utpl.min.js vendored Normal file
View File

@@ -0,0 +1 @@
!function(){var e=this,t={},n=Array.prototype,r=n.slice,o=n.forEach,a=Object.keys,i=function(){},c=i.each=i.forEach=function(e,n,r){if(null!=e)if(o&&e.forEach===o)e.forEach(n,r);else if(e.length===+e.length){for(var a=0,c=e.length;c>a;a++)if(n.call(r,e[a],a,e)===t)return}else for(var l=i.keys(e),a=0,c=l.length;c>a;a++)if(n.call(r,e[l[a]],l[a],e)===t)return};i.keys=a||function(e){if(e!==Object(e))throw new TypeError("Invalid object");var t=[];for(var n in e)i.has(e,n)&&t.push(n);return t},i.defaults=function(e){return c(r.call(arguments,1),function(t){if(t)for(var n in t)void 0===e[n]&&(e[n]=t[n])}),e};var l={escape:{"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#x27;"}},u={escape:new RegExp("["+i.keys(l.escape).join("")+"]","g")};i.each(["escape"],function(e){i[e]=function(t){return null==t?"":(""+t).replace(u[e],function(t){return l[e][t]})}}),i.templateSettings={evaluate:/\{%([\s\S]+?)%\}/g,interpolate:/\{%=([\s\S]+?)%\}/g,escape:/\{%-([\s\S]+?)%\}/g,innerFn:!0};var f=/(.)^/,p={"'":"'","\\":"\\","\r":"r","\n":"n"," ":"t","\u2028":"u2028","\u2029":"u2029"},s=/\\|'|\r|\n|\t|\u2028|\u2029/g;i.template=function(e,t,n){var r;n=i.defaults({},n,i.templateSettings);var o=new RegExp([(n.escape||f).source,(n.interpolate||f).source,(n.evaluate||f).source].join("|")+"|$","g"),a=0,c="\n__p+='";e.replace(o,function(t,n,r,o,i){return c+=e.slice(a,i).replace(s,function(e){return"\\"+p[e]}),n&&(c+="'\n+((__t=("+n+"))==null?'':escape(__t))+'"),r&&(c+="'\n+((__t=("+r+"))==null?'':__t)+'"),o&&(c+="';"+o+"\n__p+='"),a=i+t.length,t}),c+="';",n.variable||(c="with(obj||{}){"+c+"}"),c="var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,'');};\n"+c+"return __p;\n";try{r=new Function(n.variable||"obj","_",c)}catch(l){throw l.source=c,l}if(t)return r(t,i);var u=function(e){return r.call(this,e,i)},g="function each(obj, iterator, bind) {var f = Array.prototype.forEach;if(f) {f.call(obj, iterator, bind);}else {for (var i = 0, l = obj.length; i < l; i++) {if (i in obj) {iterator.call(bind, obj[i], i, obj);}}}}",_="function escape(source) {return String(source).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\"/g, '&quot;').replace(/'/g, '&#39;');}",h=n.innerFn===!1?"":g+_;return u.source="function("+(n.variable||"obj")+"){"+h+c+"}",u},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=i),exports.utpl=i):e.utpl=i,"function"==typeof define&&define.amd&&define(function(){return i})}.call(this);

4
edp-build-config.js
View File

@@ -9,11 +9,11 @@ exports.getProcessors = function () {
return [
new LessCompiler( {
files: ['css/ttf.less']
files: ['css/ttf.less', 'css/preview.less']
}),
new CssCompressor({
files: ['css/ttf.less'],
files: ['css/ttf.less', 'css/preview.less'],
compressOptions: {
keepBreaks: false
}

9
empty.html Normal file
View File

@@ -0,0 +1,9 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fonteditor</title>
</head>
<body>
</body>
</html>

2
src/fonteditor/ttf/main.js
View File

@@ -88,6 +88,8 @@ define(
program.loader = require('../widget/loader');
program.exporter = require('../widget/exporter');
// 预览器
program.previewer = require('../widget/previewer');
controller.init(program);

12
src/fonteditor/widget/actions.js
View File

@@ -201,7 +201,17 @@ define(
dlg.show($.extend({}, ttf['OS/2'], ttf.hhea, ttf.post));
}
}
},
// 预览
'preview': function(e) {
var ttf = program.ttfManager.get();
if (ttf) {
var format = e.target.getAttribute('data-format');
program.previewer.load(ttf, format);
}
},
};
return actions;

117
src/fonteditor/widget/previewer.js Normal file
View File

@@ -0,0 +1,117 @@
/**
* @file previewer.js
* @author mengke01
* @date
* @description
* 预览组件
*/
define(
function(require) {
var TTFWriter = require('ttf/ttfwriter');
var ttf2woff = require('ttf/ttf2woff');
var ttf2svg = require('ttf/ttf2svg');
var ttf2base64 = require('ttf/ttf2base64');
var woff2base64 = require('ttf/woff2base64');
var svg2base64 = require('ttf/svg2base64');
var utpl = require('utpl');
var previewTplRender = null; // 模板渲染函数
/**
* unicode2html编码
*
* @param {number} u unicode码
* @return {string} html编码
*/
function unicode2html(u) {
return '&amp;#x' + u.toString(16) + ';';
}
/**
* 生成预览模板
*
* @param {Object} ttf ttfObject
* @param {string} fontFormat 字体类型
* @return {string} html字符串
*/
function generatePreviewHTML(ttf, fontFormat) {
fontFormat = !fontFormat || fontFormat == 'ttf' ? 'truetype' : fontFormat;
var fontData = '';
var fontFamily = ttf.name.fontFamily || 'fonteditor';
var glyfList = [];
if (fontFormat == 'woff') {
var buffer = new TTFWriter().write(ttf);
fontData = woff2base64(ttf2woff(buffer));
}
else if (fontFormat == 'svg') {
fontData = svg2base64(ttf2svg(ttf));
}
else {
var buffer = new TTFWriter().write(ttf);
fontData = ttf2base64(buffer);
}
// 过滤不显示的字形
var filtered = ttf.glyf.filter(function(g) {
return g.name != '.notdef' && g.name != '.null' && g.name != 'nonmarkingreturn'
&& g.unicode && g.unicode.length;
});
filtered.forEach(function(g) {
glyfList.push({
code: '&#x' + g.unicode[0].toString(16) + ';',
codeName: g.unicode.map(unicode2html).join(',')
});
});
return previewTplRender({
fontData: fontData,
fontFormat: fontFormat,
fontFamily: fontFamily,
glyfList: glyfList
});
}
var previewer = {
/**
* 初始化
*/
init: function() {
if (!previewTplRender) {
$.get('./template/preview-ttf.html', function(text) {
previewTplRender = utpl.template(text);
});
}
},
/**
* 加载预览按钮
*
* @param {Object} ttf ttfObject
* @param {string} fontFormat 字体类型
*/
load: function(ttf, fontFormat) {
var html = generatePreviewHTML(ttf, fontFormat);
var win = window.open('./empty.html');
win.onload = function() {
win.document.body.innerHTML = html;
win.focus();
win = null;
html = null;
};
}
};
previewer.init();
return previewer;
}
);

47
template/preview-ttf.html Normal file
View File

@@ -0,0 +1,47 @@
<link rel="stylesheet" href="./css/preview.css">
<style>
@font-face {
font-family: '{%=fontFamily%}';
src: url({%=fontData%}) format('{%=fontFormat%}');
}
.icon {
font-family: '{%=fontFamily%}';
}
</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>
<div class="helps">第一步：使用font-face声明字体
<pre>
@font-face {
font-family: '{%=fontFamily%}';
src: url('{%=fontFamily%}.eot'); /* IE9*/
src: url('{%=fontFamily%}.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('{%=fontFamily%}.woff') format('woff'), /* chrome、firefox */
url('{%=fontFamily%}.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('{%=fontFamily%}.svg#ux{%=fontFamily%}') format('svg'); /* iOS 4.1- */
}
</pre>
第二步：定义使用{%=fontFamily%}的样式
<pre>
.{%=fontFamily%} {
font-family:"{%=fontFamily%}" !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="{%=fontFamily%}"&gt;&amp;#x33&lt;/i&gt;
</pre>
</div>
</div>

17
ttf.html
View File

@@ -47,6 +47,20 @@
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-success btn-sm dropdown-toggle" data-toggle="dropdown">
预览
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a data-format="ttf" data-action="preview">ttf字体</a></li>
<li><a data-format="woff" data-action="preview">woff字体</a></li>
<li><a data-format="svg" data-action="preview">svg字体</a></li>
</ul>
</div>
</section>
<section class="sidebar">
@@ -90,7 +104,8 @@
baseUrl: './src',
paths: {
deflate: '../dep/pako_deflate.min',
inflate: '../dep/pako_inflate.min'
inflate: '../dep/pako_inflate.min',
utpl: '../dep/utpl.min'
}
});
define('jquery', $);