creating-fonts.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>OpenType writing</title> 6 <script type="text/javascript" src="../dist/opentype.js"></script> 7 <style> 8 body { 9 font: 13px Helvetica, arial, freesans, sans-serif; 10 line-height: 1.4; 11 color: #333; 12 margin: 0 0 50px 0; 13 padding: 0; 14 } 15 16 .container { 17 width: 940px; 18 margin-left: auto; 19 margin-right: auto; 20 } 21 22 #glyphs { 23 clear: both; 24 } 25 26 .wrapper { 27 float: left; 28 margin: 5px; 29 border: 1px solid #ccc; 30 } 31 32 .wrapper span { 33 text-align: center; 34 background: #ddd; 35 display: block; 36 } 37 </style> 38 </head> 39 <body> 40 <div class="container"> 41 <h1 id="fontFamilyName"></h1> 42 43 <p>This font is generated dynamically in the browser.</p> 44 <button onclick="font.download()">Download Font</button> 45 46 <div id="glyphs"></div> 47 </div> 48 49 <script> 50 function hexDump(bytes) { 51 var hexString = bytes.map(function(v) { 52 var h = v.toString(16); 53 return h.length === 1 ? '0' + h : h; 54 }); 55 return hexString.join(' ').toUpperCase(); 56 } 57 58 // Create a canvas and adds it to the document. 59 // Returns the 2d drawing context. 60 function createGlyphCanvas(glyph, size) { 61 var canvasId, html, glyphsDiv, wrap, canvas, ctx; 62 canvasId = 'c' + glyph.index; 63 html = '<div class="wrapper" style="width:' + size + 'px"><canvas id="' + canvasId + '" width="' + size + '" height="' + size + '"></canvas><span>' + glyph.index + '</span></div>'; 64 glyphsDiv = document.getElementById('glyphs'); 65 wrap = document.createElement('div'); 66 wrap.innerHTML = html; 67 glyphsDiv.appendChild(wrap); 68 canvas = document.getElementById(canvasId); 69 ctx = canvas.getContext('2d'); 70 return ctx; 71 } 72 73 var notdefPath = new opentype.Path(); 74 notdefPath.moveTo(100, 0); 75 notdefPath.lineTo(100, 700); 76 notdefPath.lineTo(600, 700); 77 notdefPath.lineTo(600, 0); 78 notdefPath.moveTo(200, 100); 79 notdefPath.lineTo(500, 100); 80 notdefPath.lineTo(500, 600); 81 notdefPath.lineTo(200, 600); 82 var notdefGlyph = new opentype.Glyph({ 83 name: '.notdef', 84 unicode: 0, 85 advanceWidth: 650, 86 path: notdefPath 87 }); 88 89 var aPath = new opentype.Path(); 90 aPath.moveTo(100, 0); 91 aPath.lineTo(100, 700); 92 aPath.lineTo(600, 700); 93 aPath.lineTo(600, 0); 94 aPath.lineTo(500, 0); 95 aPath.lineTo(500, 300); 96 aPath.lineTo(200, 300); 97 aPath.lineTo(200, 0); 98 aPath.moveTo(200, 400); 99 aPath.lineTo(500, 400); 100 aPath.lineTo(500, 600); 101 aPath.lineTo(200, 600); 102 var aGlyph = new opentype.Glyph({ 103 name: 'A', 104 unicode: 65, 105 advanceWidth: 650, 106 path: aPath 107 }); 108 109 var bPath = new opentype.Path(); 110 bPath.moveTo(100, 0); 111 bPath.lineTo(100, 700); 112 bPath.lineTo(500, 700); 113 bPath.lineTo(500, 400); 114 bPath.lineTo(600, 400); 115 bPath.lineTo(600, 0); 116 bPath.moveTo(200, 400); 117 bPath.lineTo(400, 400); 118 bPath.lineTo(400, 600); 119 bPath.lineTo(200, 600); 120 bPath.moveTo(200, 100); 121 bPath.lineTo(500, 100); 122 bPath.lineTo(500, 300); 123 bPath.lineTo(200, 300); 124 var bGlyph = new opentype.Glyph({ 125 name: 'B', 126 unicode: 66, 127 advanceWidth: 650, 128 path: bPath 129 }); 130 131 var glyphs = [notdefGlyph, aGlyph, bGlyph]; 132 var font = new opentype.Font({familyName: 'OpenTypeSans', styleName: 'Medium', unitsPerEm: 1000, ascender: 800, descender: -200, glyphs: glyphs}); 133 console.log(font.toTables()); 134 var buffer = font.toArrayBuffer(); 135 var font2 = opentype.parse(buffer); 136 137 document.getElementById('fontFamilyName').innerHTML = font2.names.fontFamily.en; 138 139 for (var i = 0; i < font2.glyphs.length; i++) { 140 var glyph = font2.glyphs.get(i); 141 var ctx = createGlyphCanvas(glyph, 150); 142 var x = 50; 143 var y = 120; 144 var fontSize = 72; 145 glyph.draw(ctx, x, y, fontSize); 146 glyph.drawPoints(ctx, x, y, fontSize); 147 glyph.drawMetrics(ctx, x, y, fontSize); 148 } 149 150 </script> 151 </body> 152 </html>