ttf文件 python 打开_[译]JS解析TTF字体文件

把字体拖到下边的方框，获取其中的奥妙！点此获取示例ttf字体文件。

TTF文件拖到这里

在这篇文章，我们计划操作如下：

将字体文件拖入网页，并读取之

尽管ttf文件是为C语言读取设计的，但我们仍试图解析之

读取文件的字形数目，并定位各个字形轮廓的位置

解析每个字形轮廓

最后，把这些字形轮廓呈现到网页上

本文由原始文档从零开始解析ttf文件，并获取字形轮廓坐标。如果需要完整解析ttf文件，并获取字体文件的各个属性，以下第三方库可能是更优选择：

—–译者注

用Javascript读取文件

这… 好像很危险。 不过，放心吧，只有把文件拖动到网页上，才能用javascript读取它。通过处理dragover(拖入方框)和drop(释放鼠标)事件，我们可以读取拖进方框的文件。

在页面接听到drop事件的时候，可以获取该文件的引用(指针)，进而读取该文件。这个操作无需与服务器进行交互。 我们还得处理dragover事件，不然它将不能工作。

var dropTarget = document.getElementById("dropTarget");

dropTarget.ondragover = function(e) {

e.preventDefault();

};

dropTarget.ondrop = function(e) {

e.preventDefault();

if (!e.dataTransfer || !e.dataTransfer.files) {

alert("没有读取到文件");

return;

}

var reader = new FileReader();

reader.readAsArrayBuffer(e.dataTransfer.files[0]);

reader.onload = function(e) {

ShowTtfFile(reader.result);

};

};

HTML5文件对象不太方便后续的操作。要想获取文件的原始数据，只能用FileReader异步读取它。我们可以读取为base64编码的字符串或ArrayBuffer。在这里，我们读取ttf文件为ArrayBuffer类型。

解析C结构体

TrueType文件设计的时候，计算机内存还很小。它的设计思路是，先把硬盘上的字体文件拷贝到运行内存，然后在适当的位置读取。字体文件中甚至直接存入了C结构体。要读取TrueType文件，只要把它加载到内存就可以了。我们将做类似的事情。不过，首先需要一些功能函数，以便在文件适当的位置查找并读取各种数据类型。 这个类可以实现以上目的。

function BinaryReader(arrayBuffer)

{

assert(arrayBuffer instanceof ArrayBuffer);

this.pos = 0;

this.data = new Uint8Array(arrayBuffer);

}

BinaryReader.prototype = {

seek: function(pos) {

assert(pos >=0 && pos <= this.data.length);

var oldPos = this.pos;

this.pos = pos;

return oldPos;

},

tell: function() {

return this.pos;

},

getUint8: function() {//读取单字节无符号整型

assert(this.pos < this.data.length);

return this.data[this.pos++];

},

getUint16: function() {//读取双字节无符号整型

return ((this.getUint8() << 8) | this.getUint8()) >>> 0;

},

getUint32: function() {//读取四字节无符号整型

return this.getInt32() >>> 0;

},

getInt16: function() {//读取双字节有符号整型

var result = this.getUint16();

if (result & 0x8000) {

result -= (1 << 16);

}

return result;

},

getInt32: function() {//读取四字节有符号整型

return ((this.getUint8() << 24) |

(