ttf 压缩

This commit is contained in:
kekee000 2015-04-17 17:34:55 +08:00
parent 5c6b85af66
commit 2a74b1977a
2 changed files with 190 additions and 0 deletions

121
demo/js/ttfmin.js Normal file
View File

@ -0,0 +1,121 @@
/**
* @file ttf字体缩减示例
* @author mengke01(kekee000@gmail.com)
*/
define(
function(require) {
var ttfreader = require('ttf/ttfreader');
var ttfwriter = require('ttf/ttfwriter');
var ttf2base64 = require('ttf/ttf2base64');
var TTF = require('ttf/ttf');
var ajaxFile = require('common/ajaxFile');
var lang = require('common/lang');
var string = require('common/string');
var curttfData = null;
function onUpFileChange(e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var ttfReader = new ttfreader({
hinting: true
});
curttfData = ttfReader.read(e.target.result);
ttfmin();
}
reader.onerror = function(e) {
console.error(e);
};
reader.readAsArrayBuffer(file);
}
function setFont(data, dom) {
var tpl = '@font-face {'
+ 'font-family: \'${family}\';'
+ 'src: url(${data}) format(\'truetype\');}';
$(dom).get(0).innerHTML = string.format(tpl, data);
}
function ttfmin() {
if (!curttfData) {
return;
}
var text = $('#text').val();
var ttf = new TTF(lang.clone(curttfData));
var indexList = ttf.findGlyf({
unicode: text.split('').map(function (u) {
return u.charCodeAt(0);
})
});
if (indexList.length) {
var glyfList = ttf.getGlyf(indexList);
glyfList.unshift(ttf.getGlyfByIndex(0));
ttf.get().glyf = glyfList;
}
else {
ttf.get().glyf = [ttf.getGlyfByIndex(0)];
}
var family = 'font-with-hitting';
ttf.get().name.fontFamily = family;
var writer = new ttfwriter({
hinting: true
});
var buffer = writer.write(ttf.get());
setFont({
family: family,
data: ttf2base64(buffer)
}, '#' + family);
var family = 'font-without-hitting';
ttf.get().name.fontFamily = family;
var writer = new ttfwriter({
hinting: false
});
var buffer = writer.write(ttf.get());
setFont({
family: family,
data: ttf2base64(buffer)
}, '#' + family);
$('.ttf-text').html(text);
}
var entry = {
/**
* 初始化
*/
init: function() {
document.getElementById('upload-file').addEventListener('change', onUpFileChange);
document.getElementById('text').addEventListener('change', ttfmin);
document.getElementById('font-size').addEventListener('change', function (e) {
$('.ttf-text').css({
fontSize: e.target.value + 'px'
});
});
}
};
entry.init();
return entry;
}
);

69
demo/ttfmin.html Normal file
View File

@ -0,0 +1,69 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ttf字体缩减</title>
<script src="../dep/esl.js"></script>
<script src="../dep/jquery.min.js"></script>
<style id="font-with-hitting" type="text/css"></style>
<style id="font-without-hitting" type="text/css"></style>
<style type="text/css">
body {
font-size: 13px;
}
div {
padding: 10px;
}
.ttf-text {
font-size: 14px;
}
.ttf-min-with-hitting {
font-family: 'font-with-hitting';
}
.ttf-min-without-hitting {
font-family: 'font-without-hitting';
}
</style>
</head>
<body>
<div>
字体文件:
<input id="upload-file" type="file">
</div>
<div>
相关文字:
<input id="text" type="text" value="ABCDEFGHIJKLMNOPQRSTUVWXYZ" style="width: 400px;line-height: 30px;">
字号:<input id="font-size" type="range" value="12" min="8" max="100" step="1">
</div>
<div>
带hinting的字体<span class="ttf-text ttf-min-with-hitting"></span>
</div>
<div>
不带hinting的字体<span class="ttf-text ttf-min-without-hitting"></span>
</div>
<script>
require.config({
baseUrl: '../src',
paths: {
demo: '../demo/js',
}
});
define('jquery', $);
</script>
<script>
require(['demo/ttfmin']);
</script>
</body>
</html>