ttf 压缩
This commit is contained in:
parent
5c6b85af66
commit
2a74b1977a
121
demo/js/ttfmin.js
Normal file
121
demo/js/ttfmin.js
Normal 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
69
demo/ttfmin.html
Normal 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>
|
Loading…
x
Reference in New Issue
Block a user