purplebamboo / font-carrier

font-carrier是一个功能强大的字体操作库,使用它你可以随心所欲的操作字体。让你可以在svg的维度改造字体的展现形状。
http://purplebamboo.github.io/font-carrier/
MIT License
1.61k stars 194 forks source link

如何设置添加的svg的基础位置? #40

Closed StringKe closed 4 years ago

StringKe commented 4 years ago

添加svg的时候似乎无法设置位置,并且我在尝试使用 \uFFFD来创建字符,并没有正确生成

image

添加的svg为

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 1000 1000">
    <rect width="1000" height="1000" fill="#000"/>
</svg>
StringKe commented 4 years ago

尝试以下代码创建时候 字体默认的 xy似乎 不是偏移线产生的

const fontCarrier = require('font-carrier')
const fs = require('fs');

const font = fontCarrier.transfer('./font.ttf')
let writeSvgString = '<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 1000 1000"><rect y="REPLACEY" width="1000" height="1000" fill="#000"/></svg>'

const blockUnicode = "&#x0021;";
const blockUnicodeString = String.fromCharCode(0x0021);

const t = font.getGlyph("!");
console.log(t.options.vertAdvY, t);

writeSvgString = writeSvgString.replace("1000", t.options.vertAdvY);

console.log(font.getFontface().options)
const y = font.getFontface().options.descent;

console.log(y);

writeSvgString = writeSvgString.replace("REPLACEY", Math.abs(y));

console.log(blockUnicode, blockUnicodeString, writeSvgString);

font.setGlyph(blockUnicode, {
    unicode: blockUnicode,
    glyphName: "fullBlock",
    svg: writeSvgString,
    horizAdvX: parseInt(t.options.vertAdvY),
    vertAdvY: t.options.vertAdvY
})

font.output({
    path: './test/font',
    types: ['ttf']
});