purplebamboo / font-carrier Goto Github PK
View Code? Open in Web Editor NEWfont-carrier是一个功能强大的字体操作库,使用它你可以随心所欲的操作字体。让你可以在svg的维度改造字体的展现形状。
Home Page: http://purplebamboo.github.io/font-carrier/
License: MIT License
font-carrier是一个功能强大的字体操作库,使用它你可以随心所欲的操作字体。让你可以在svg的维度改造字体的展现形状。
Home Page: http://purplebamboo.github.io/font-carrier/
License: MIT License
下面的代码运行不正常:
import FontCarrier from 'font-carrier';
const t = FontCarrier.transfer('t.ttf');
const s = '𠀀';
const newFont = t.min(s);
newFont.get(s) === undefined;
出错的原因在函中
function toUnicode(str) {
var uArray = []
var u = str2unicode(str)// 这一行不正确, 因为'𠀀'字符用utf-16时是4bytes,不是通常的2bytes
....
}
It will cause unexpected translate while using ascent:
font-carrier/lib/class/glyph.js
Line 64 in 06e0c19
- path = svgpath(path).scale(1 / scale).translate(0, ascent).round(config.PATH_DECIMAL).toString()
+ path = svgpath(path).scale(1 / scale).translate(0, 0).round(config.PATH_DECIMAL).toString()
生成的字体自动加了个x的字符码,导致x无法显示
请问是我操作错了么??
1、我有一个“的”字的svg文件,里面包含闭合区间,fill-rule="evenodd"(svg文件见附件zip包中的src.svg)。svg图片的效果如下图:
2、我用这个svg制作字体,生成ttf文件(生成的字体文件见附件zip包中的fillrule.ttf);
3、用字体编辑软件打开ttf文件,发现闭合区间的填充规则显示不正确,截图如下:
4、主要代码:
var font = fontCarrier.create();
var zis = [{ name: '的', svg: svg}];
for (let zi of zis) {
font.setSvg(zi.name, fs.readFileSync(zi.svg).toString())
}
font.output({
path: './fillrule',
types: ["ttf"]
})
请问下这是什么原因导致的呢?还是需要设置什么参数来纠正?麻烦帮我看一下,谢谢🙏
我在es6中导入后,运行会提示错误
import fontCarrier from 'font-carrier';
错误提示
(node:15748) V8: D:\code\yly\server\node_modules\ttf2woff2\jssrc\ttf2woff2.js:3 Invalid asm.js: Invalid member of stdlib at wrapSafe (internal/modules/cjs/loader.js:979:16)
at Module._compile (internal/modules/cjs/loader.js:1027:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object.<anonymous> (D:\code\yly\server\node_modules\ttf2woff2\jssrc\index.js:3:27)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object.<anonymous> (D:\code\yly\server\node_modules\ttf2woff2\src\index.js:6:20)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object.<anonymous> (D:\code\yly\server\node_modules\font-carrier\lib\helper\engine.js:13:17)
业务场景: 生成 ttf 字体文件后,希望读取字体文件,生成base64,内嵌到css中
问题:由于这里没有提供回调,不知道 ttf 文件什么时候生成的
你好,我现在正文您的font-carrier 编写对应的类型库, PR 在这里
DefinitelyTyped/DefinitelyTyped#62056
svg中 如果有 fill-opacity 属性,生成的字体会忽略该属性
例如:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7 17v3.67C7 21.4 7.6 22 8.33 22h7.33c.74 0 1.34-.6 1.34-1.33V17H7z"/><path fill-opacity=".3" d="M17 5.33C17 4.6 16.4 4 15.67 4H14V2h-4v2H8.33C7.6 4 7 4.6 7 5.33V17h10V5.33z"/></svg>
我看到生成的 SVG 基于 GLYPHS ,可是 GLYPHS 已经从 标准中消失,也许应该使用 paths 取代。
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/glyph
如题,现在使用彩色SVG生成的都是黑白的,看iconfont已经支持彩色字体了,但是现在在维护啊好不方便,这个能支持彩色的就好了。
https://github.com/fontello/svg2ttf/blob/master/CHANGELOG.md#500--2020-05-20
大神~~权限可以改嘛? 目前我看到是用的运行者默认的文件权限..0644
两个svg文件,只有细微的位置差别,比如一个上三角,一个下三角,其中一个生成的字体文件引入到页面后可以正常使用,但是加入另一个后,生成的字体文件在页面引用时图标失效,且控制台报出Failed to decode downloaded font警告
Some icon fonts unicode is
􏀀 􏀁 ...
font-carrier/lib/helper/helper.js
Line 144 in 4713100
Duplicate after conversion!
􏀀 10f000 1110016 >>> ��
􏀁 10f001 1110017 >>> ��
􏐀 10f400 1111040 >>> ��
Causes font objects to be overwritten!
ucode 超出最大上限的值解析错误,字形对象被覆盖。
fa icon fa-duotone-900
node小白一枚,试着按照说明安装,失败。
然后clone了test,尝试说明中的使用 npm test,也是报错。
我想是不是应该说明得更详细一些呢,基本上很多操作我是靠猜进行的。
谢谢。
如果可以的话,希望可以完善License,包括package信息,license文件等。:)
README.md
信息 Licence: MIT ,非 License 🙈
谢谢~
原始svg
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C12.4971 4 12.9 4.40294 12.9 4.9V11.1H19.1C19.5971 11.1 20 11.5029 20 12C20 12.497 19.5971 12.9 19.1 12.9H12.9V19.1C12.9 19.5971 12.4971 20 12 20C11.5029 20 11.1 19.5971 11.1 19.1V12.9H4.9C4.40294 12.9 4 12.497 4 12C4 11.5029 4.40294 11.1 4.9 11.1H11.1V4.9C11.1 4.40294 11.5029 4 12 4Z" fill="#333333"/> </svg>
压缩过后svg
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 4a.9.9 0 01.9.9v6.2h6.2a.9.9 0 110 1.8h-6.2v6.2a.9.9 0 11-1.8 0v-6.2H4.9a.9.9 0 010-1.8h6.2V4.9A.9.9 0 0112 4z" fill="#333"/></svg>
lib/svg/path.js svgpath方法报错,抛出错误 "SvgPath: param should start with 0..9 or .
(at pos 44)"
实在找不到原因了,过来请教一下,近期用font-carrier写了份处理svg到iconfont程序,发现我的一张图片,怎么转都是这个样子。
我的原始svg代码如下:
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12.2674 1.1665H2.00078C1.61578 1.1665 1.30078 1.4815 1.30078 1.8665V12.1332C1.30078 12.5182 1.61578 12.8332 2.00078 12.8332H12.2674C12.6524 12.8332 12.9674 12.5182 12.9674 12.1332V1.8665C12.9674 1.4815 12.6583 1.1665 12.2674 1.1665ZM12.0341 11.8998H2.23411V2.09984H12.0341V11.8998Z M10.1671 1.1665H4.10039C3.71539 1.1665 3.40039 1.4815 3.40039 1.8665V6.29984C3.40039 6.68484 3.71539 6.99984 4.10039 6.99984H10.1671C10.5521 6.99984 10.8671 6.68484 10.8671 6.29984V1.8665C10.8671 1.4815 10.5579 1.1665 10.1671 1.1665ZM9.93372 6.0665H4.33372V2.09984H9.93372V6.0665Z M8.65026 5.24984C8.39359 5.24984 8.18359 5.03984 8.18359 4.78317V3.38317C8.18359 3.1265 8.39359 2.9165 8.65026 2.9165C8.90693 2.9165 9.11693 3.1265 9.11693 3.38317V4.78317C9.11693 5.03984 8.91276 5.24984 8.65026 5.24984Z" fill="#00AAE8"/> </svg>
是不是需要在进行转化前对svg有个什么要求,求解?
目前font-carrier能否用于生产?
ttf里有文字的ASCII以及glyph,能不能根据glyph反转成具体的文字啊?
比如 OpenType.js
你好,本地制作的icon,或者Min之后输出的字体在IE6-8下报错,用IE11模拟的IE8下报“CSS3111: @font-face 遇到了未知错误。”
使用虚拟机下的原生IE8,测试也未使用上精简后的字体。
利用输出的TTF重新去fontsquirrel.com转换EOT之后,IE6-8下测试通过。
PS 使用iconfont网站制作的字体并没出现问题。
const fontCarrier = require('font-carrier')
//创建空白字体对象
const font = fontCarrier.create()
//从其他字体解析
const transFont = fontCarrier.transfer('./font/font147/wx.ttf')
font.output({
path:'./dist/'
})
按照这种情况导出,生成的文件,是.ttf, .svg, .eot, .woff,是否预留参数设置文件名
error: Uncaught TypeError: Cannot read properties of undefined (reading 'en')
at _parseTtfFont (file:///Users/zwy/Library/Caches/deno/npm/registry.npmjs.org/font-carrier/0.3.1/lib/helper/engine.js:121:37)
at Object.parse (file:///Users/zwy/Library/Caches/deno/npm/registry.npmjs.org/font-carrier/0.3.1/lib/helper/engine.js:236:12)
at Object.FontCarrier.transfer (file:///Users/zwy/Library/Caches/deno/npm/registry.npmjs.org/font-carrier/0.3.1/lib/index.js:35:33)
当使用 fontCarrier.transfer("fonts-file"); 的时候,有的字体会显示;
font-carrier 在处理polygon之后,导致icon中带有polygon的部分显示不出来。
1.为什么新浪微博登录缓存可以这么持久?我授权失败之后,不能再次授权么?
2.我找不到一个明显的地方,能够让我上传我已有的svg字体,我想在我现有的字体上去追加图标。
thanks
或者说操作完字体,执行回调之类
源字体文件20M左右,报错如下:
<--- Last few GCs ---> [815:0x102801c00] 128210 ms: Mark-sweep 1454.4 (1563.7) -> 1452.7 (1531.2) MB, 883.3 / 0.0 ms (+ 0.0 ms in 0 steps since start of marking, biggest step 0.0 ms, walltime since start of marking 883 ms) last resort [815:0x102801c00] 129086 ms: Mark-sweep 1452.7 (1531.2) -> 1452.7 (1531.2) MB, 876.2 / 0.0 ms last resort <--- JS stacktrace ---> ==== JS stack trace ========================================= Security context: 0x8dc5cf1cef1 2: getContours(aka getContours) [/Users/*******/workspeace/mypro/node_modules/font-carrier/node_modules/opentype.js/src/tables/glyf.js:187] [bytecode=0x2949c8f7c8f1 offset=26](this=0x8dc5cf02241 ,points=0x8a5b8cea2a1 ) 4: getPath(aka getPath) [/Users/*******/workspeace/mypro/node_modules/font-carrier/node_modules/opentype.js/src/tables/glyf.js:207] [bytecode=... FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory 1: node::Abort() [/usr/local/bin/node] 2: node::FatalException(v8::Isolate*, v8::Local, v8::Local) [/usr/local/bin/node] 3: v8::internal::V8::FatalProcessOutOfMemory(char const*, bool) [/usr/local/bin/node] 4: v8::internal::Factory::NewCodeRaw(int, bool) [/usr/local/bin/node] 5: v8::internal::Factory::NewCode(v8::internal::CodeDesc const&, unsigned int, v8::internal::Handle, bool, bool, int,bool) [/usr/local/bin/node] 6: v8::internal::CodeGenerator::MakeCodeEpilogue(v8::internal::MacroAssembler*, v8::internal::EhFrameWriter*, v8::internal::CompilationInfo*, v8::internal::Handle) [/usr/local/bin/node] 7: v8::internal::compiler::CodeGenerator::FinalizeCode() [/usr/local/bin/node] 8: v8::internal::compiler::PipelineImpl::FinalizeCode() [/usr/local/bin/node] 9: v8::internal::compiler::PipelineCompilationJob::FinalizeJobImpl() [/usr/local/bin/node] 10: v8::internal::Compiler::FinalizeCompilationJob(v8::internal::CompilationJob*) [/usr/local/bin/node] 11: v8::internal::OptimizingCompileDispatcher::InstallOptimizedFunctions() [/usr/local/bin/node] 12: v8::internal::StackGuard::HandleInterrupts() [/usr/local/bin/node] 13: v8::internal::Runtime_StackGuard(int, v8::internal::Object**, v8::internal::Isolate*) [/usr/local/bin/node] 14: 0x30f7f8e040dd 15: 0x30f7f8f05065
有什么解决办法么?
fs.existsSync is not a function
SVG 图标代码
<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M93.1 201.4h187.1v202.1H93.1z" fill="#2E97FF"></path><path d="M295.2 171.4H78.1c-8.3 0-15 6.7-15 15v651.3c0 8.3 6.7 15 15 15h121.8c0.4 0 0.8 0 1.3-0.1 0.2 0 0.5-0.1 0.7-0.1 0.2 0 0.5-0.1 0.7-0.1 0.2 0 0.5-0.1 0.7-0.2 0.2-0.1 0.5-0.1 0.7-0.2 0.2-0.1 0.4-0.2 0.6-0.2 0.2-0.1 0.5-0.2 0.7-0.3l0.6-0.3c0.3-0.1 0.5-0.2 0.8-0.4 0.2-0.1 0.3-0.2 0.5-0.3 0.3-0.1 0.5-0.3 0.8-0.4 0.2-0.1 0.4-0.3 0.6-0.5 0.2-0.1 0.4-0.3 0.6-0.4 0.4-0.3 0.8-0.6 1.1-1l95.6-95.5c2.3-2.3 3.8-5.3 4.2-8.4 0-0.2 0-0.3 0.1-0.5 0-0.2 0-0.4 0.1-0.6v-0.9-555.9c-0.1-8.3-6.8-15-15.1-15z m-80.6 630V757H259l-44.4 44.4zM93.1 403.5V201.4h187.1v525.7h-80.6c-8.3 0-15 6.7-15 15v80.6H93.1V403.5z" fill=""></path><path d="M419 202.6h187.1v202.1H419z" fill="#2E97FF"></path><path d="M621.2 172.6H404c-8.3 0-15 6.7-15 15v651.3c0 8.3 6.7 15 15 15h121.8c0.4 0 0.9 0 1.3-0.1 0.2 0 0.5-0.1 0.7-0.1 0.3 0 0.5-0.1 0.8-0.1 0.2 0 0.5-0.1 0.7-0.2 0.2-0.1 0.5-0.1 0.7-0.2 0.2-0.1 0.4-0.1 0.6-0.2 0.3-0.1 0.5-0.2 0.8-0.3 0.2-0.1 0.4-0.2 0.5-0.2 0.3-0.1 0.5-0.2 0.8-0.4 0.2-0.1 0.3-0.2 0.5-0.3 0.3-0.1 0.5-0.3 0.8-0.5 0.2-0.1 0.4-0.3 0.6-0.5 0.2-0.1 0.4-0.3 0.5-0.4 0.4-0.3 0.8-0.6 1.1-1l95.6-95.5c2.3-2.3 3.8-5.3 4.2-8.4 0-0.2 0.1-0.3 0.1-0.5s0-0.4 0.1-0.6v-0.9-555.9c0-8.2-6.8-15-15-15z m-80.6 630.1v-44.4H585l-44.4 44.4zM419 404.8V202.6h187.1v525.7h-80.6c-8.3 0-15 6.7-15 15v80.6H419V404.8z" fill=""></path><path d="M743.4 202.6h187.1v202.1H743.4z" fill="#2E97FF"></path><path d="M960.5 744.5v-0.9-556c0-8.3-6.7-15-15-15H728.4c-8.3 0-15 6.7-15 15v651.3c0 8.3 6.7 15 15 15h121.8c0.4 0 0.9 0 1.3-0.1 0.2 0 0.5-0.1 0.7-0.1 0.3 0 0.5-0.1 0.8-0.1 0.2 0 0.5-0.1 0.7-0.2 0.2-0.1 0.5-0.1 0.7-0.2 0.2-0.1 0.4-0.1 0.6-0.2 0.3-0.1 0.5-0.2 0.8-0.3 0.2-0.1 0.4-0.2 0.5-0.2 0.3-0.1 0.5-0.2 0.8-0.4 0.2-0.1 0.3-0.2 0.5-0.3 0.3-0.1 0.5-0.3 0.8-0.5 0.2-0.1 0.4-0.3 0.6-0.5 0.2-0.1 0.4-0.3 0.5-0.4 0.4-0.3 0.8-0.6 1.1-1l95.6-95.5c2.3-2.3 3.8-5.3 4.2-8.4 0-0.2 0.1-0.3 0.1-0.5v-0.5zM865 802.7v-44.4h44.4L865 802.7zM743.4 404.8V202.6h187.1v525.7H850c-8.3 0-15 6.7-15 15v80.6h-91.5V404.8z" fill=""></path></svg>
生成字体
.iconfont {
font-family: "iconfont";
font-size: 16px;
font-style: normal;
}
.icon-other:before {
content: "\6c7e0";
}
<span class="iconfont icon-other"> aaa</span>
rt
有没有办法一样的配置每次都生成一样的字体文件内容?
WOFF font is error!
`var fontCarrier = require('font-carrier')
var transFont = fontCarrier.transfer('./PingFang-SC-Regular.ttf')
var font = fontCarrier.create()
var gs = transFont.getGlyph('我是谁?')
font.setGlyph(gs)
font.output({
path: './ttf'
})
console.log(font)`
我想把 "我是谁?"这四个字符的unicode编码修改掉,然后在导出字体,我在web HTML用我自定义编码, 谢谢您.去回复
本地引用 font-carrier 转换 svg icon 时,发现只要是路径用到 arcs 属性来处理圆弧的 icon 转换,都会出现生成的 svg 文件错乱的情况。这个缺陷在 svgpath 为已知问题,并已经修复,看到 font-carrier 引用该依赖包是锁死了版本,想问下 font-carrier 会跟进吗?
编辑器贴不了 svg 文件,下面是对应 svg code:
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<title>tips</title>
<path id="path-1" d="M8,15a7,7,0,1,1,7-7A7,7,0,0,1,8,15Zm0-1.5A5.5,5.5,0,1,0,2.5,8,5.5,5.5,0,0,0,8,13.5ZM7.25,4h1.5V9H7.25Zm0,6h1.5v2H7.25Z"/>
</svg>
svgpath 相关讨论 issue:fontello/svgpath#23
font-carrier 依赖版本:
我照猫画虎写了个配置来生成字体,大致如下:
const fontCarrier = require('font-carrier');
const fs = require('fs');
const glob = require('glob');
// 创建空白字体对象
const font = fontCarrier.create();
font.set({
id: 'icons',
horizAdvX: 256,
vertAdvY: 256,
});
font.setFontface({
fontFamily: 'icons',
unitsPerEm: '256',
ascent: '224',
descent: '32',
});
glob('src/icons/**/*.svg', (err, files) => {
if (err) {
console.error(err);
return;
}
let code = 0xf100;
files.forEach((file) => {
console.log('读取文件:', file);
let name = file.split('/');
name = name[name.length - 1].split('.')[0];
code += 1;
// 也可以使用setGlyph可以设置更多信息
font.setGlyph(`&#x${code.toString(16)};`, {
glyphName: name,
horizAdvX: 256, // 设置这个字形的画布大小
vertAdvY: 256,
svg: fs.readFileSync(file).toString(),
});
});
// 默认会导出svg,ttf,eot,woff四种字体,
// 可以不传path,这样会默认返回一个包含四个字体buffer的对象
font.output({
types: ['woff', 'svg', 'ttf'],
path: 'src/fonts/icons',
});
});
我看了生成出来的svg字体,问题如下:
1 font标签的id 和 horiz-adv-x 及vert-adv-y 并没有按照设定的有改变。
2 glyph和标签和 horiz-adv-x 及vert-adv-y 也没有变化。
两个问题导致生成的字体无法正常显示。
这个库生成的svg viewbox总是有问题,导致图形显示不完整,需要手工调
package.json 配置的 xmldom 的依赖是 ^0.1.19
,xmldom 升级到了 0.1.20,font-carrier 会报错,报错信息如下:
[error] 2016-01-11 23:36:48.034 [21247] nodejs.Exception: TypeError: node.serializeToString is not a function at XMLSerializer.serializeToString (*/node_modules/font-carrier/node_modules/xmldom/dom.js:906:7)
解析tahoma.ttf 报错:
"0x3b55a: ClassDef format must be 1 or 2."
tahoma.zip
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.