From 2a74b1977a76b7952931e29ea7d9f6e2be182ebb Mon Sep 17 00:00:00 2001
From: kekee000 <kekee000@gmail.com>
Date: Fri, 17 Apr 2015 17:34:55 +0800
Subject: [PATCH] =?UTF-8?q?ttf=20=E5=8E=8B=E7=BC=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 demo/js/ttfmin.js | 121 ++++++++++++++++++++++++++++++++++++++++++++++
 demo/ttfmin.html  |  69 ++++++++++++++++++++++++++
 2 files changed, 190 insertions(+)
 create mode 100644 demo/js/ttfmin.js
 create mode 100644 demo/ttfmin.html

diff --git a/demo/js/ttfmin.js b/demo/js/ttfmin.js
new file mode 100644
index 0000000..3fba38a
--- /dev/null
+++ b/demo/js/ttfmin.js
@@ -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;
+    }
+);
diff --git a/demo/ttfmin.html b/demo/ttfmin.html
new file mode 100644
index 0000000..aecf891
--- /dev/null
+++ b/demo/ttfmin.html
@@ -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>