在线字体编辑器
License: MIT License
Use Fonteditor to edit, transform, preview fonts.
Support ttf, woff, woff2, otf, svg font, eot import and edit online.
npm install && npm run dev
index.tpl， using index.tpl to generate index.html and index-en.html.npm run build
npm run test
npm run demo
比如下面这个“王”字，我知道它的unicode号为46f0,但其实我不知道它真实汉字，因为显示是svg图形绘制的
仅有空格字符有这个问题！
拖动了rightSideBearing之后，点击保存，再次进来发现并没有改动。
希望这个项目不要黄了。我可以给你些完善它。让大家喜欢它。
如图 http://wx2.sinaimg.cn/mw690/0060lm7Tly1fwsdljtcqpj30gm0epq39.jpg
导出的时候加了一个循环 循环导出10份, 总会有一半 字是倒立的
怎么不能一次导入多个图片字体，好麻烦，一个一个导入
有些图标不是正方形的，导出的 svg，默认 viewBox="0 0 1024 1024" ，从而图像不能垂直居中。如图：
<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg id="" width="256" height="256" style="width:256px;height:256px;" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" enable-background="new 0 0 1024 1024" xml:space="preserve"><path fill="#000" d="M133.14783 587.273635C70.857811 505.243875 36.571429 405.174323 36.571429 300 36.571429 37.428052 249.42805-175.428571 512-175.428571 603.847768-175.428571 691.922096-149.301069 767.687329-100.884502 784.706856-90.008444 789.68712-67.394608 778.811063-50.375084 767.935009-33.355557 745.321172-28.375292 728.301645-39.25135 664.212052-80.206782 589.785231-102.285714 512-102.285714 289.823735-102.285714 109.714286 77.823737 109.714286 300 109.714286 389.059332 138.688625 473.624951 191.399397 543.039795 203.614234 559.125521 200.476259 582.067661 184.390533 594.282498 168.304807 606.497336 145.362668 603.35936 133.14783 587.273635L133.14783 587.273635ZM903.508846 30.200949C957.854175 108.9239 987.428571 202.297223 987.428571 300 987.428571 562.57195 774.571948 775.428571 512 775.428571 432.815605 775.428571 356.349919 756.020428 288.005857 719.453202 270.196913 709.924596 263.484372 687.763132 273.012979 669.954188 282.541586 652.145244 304.703049 645.432704 322.511993 654.961311 380.30517 685.883325 444.928556 702.285714 512 702.285714 734.176263 702.285714 914.285714 522.176265 914.285714 300 914.285714 217.261407 889.294073 138.356919 843.315884 71.75435 831.841229 55.132522 836.013839 32.355822 852.635666 20.881167 869.25749 9.406512 892.034191 13.579121 903.508846 30.200949L903.508846 30.200949ZM804.571429 592.571429m-219.428571 0a6 6 0 1 0 438.857143 0 6 6 0 1 0-438.857143 0ZM219.428571 7.428571m-219.428571 0a6 6 0 1 0 438.857143 0 6 6 0 1 0-438.857143 0Z"/></svg>
现在只能一个一个复制，网页版切换项目卡死，效率太低了。
现在急需的一个功能就是，列出自己需要的字体列表，一键生成新的字体包
生成的 ttf 字体，很多安卓版本浏览器，部分字符不显示（如红米）
能否支持批量导出svg功能
问下，这个字体编辑器可以私有化部署到自己的服务器上不呢
I don't know if this is an issue, but I've just created a project here, and I'm loving it - How does it save the files even if you close the tab? Wouldn't it be safer to add a sign up option?
npm WARN enoent SKIPPING OPTIONAL DEPENDENCY: ENOENT: no such file or directory, rename 'E:\WebSite
PHP\www\iconfont\fonteditor-master\node_modules\fsevents\node_modules\inherits' -> 'E:\WebSite\PHP\w
ww\iconfont\fonteditor-master\node_modules\fsevents\node_modules.inherits.DELETE'
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents\node_modules\ini):
npm WARN enoent SKIPPING OPTIONAL DEPENDENCY: ENOENT: no such file or directory, rename 'E:\WebSite
PHP\www\iconfont\fonteditor-master\node_modules\fsevents\node_modules\ini' -> 'E:\WebSite\PHP\www\ic
onfont\fonteditor-master\node_modules\fsevents\node_modules.ini.DELETE'...
...
ERROR in ./src/fonteditor/template/export/icon-css.tpl 5:0
Module parse failed: Unexpected character '@' (5:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to
process this file. See https://webpack.js.org/concepts#loaders
| */
|
@font-face {
| font-family: "{%=fontFamily%}";
| src: url("{%=fontFamily%}.eot"); /* IE9 */
@ ./src/fonteditor/template/export-render.js 43:55-87
@ ./src/fonteditor/widget/exporter.js
@ ./src/fonteditor/index.js
...
ERROR in Template execution failed: ReferenceError: lang is not defined
ERROR in ReferenceError: lang is not defined
现在工程里面有一款字体整体基线偏高，在文本控件自动计算的时候无法居中到文本控件**，视觉效果偏低。是否支持批量设置文字偏移或者是其他属性能够解决此问题
中文 英文 符号 便于构建代码字体
Safari 下，下载的 zip 文件是一个不带后缀，名为 Unknown 的文件。
给文件加上 zip 后缀是可用的，生成的内容没问题。
Hello.
Thank you for creating a great font editor.
I'm making this easier to use as an editor.
So that you can edit fonts on your smartphone.
Almost all of these features go without modification, except for screen pixel control.
you can see at http://www.fontmoa.com/editor/v1/simple-cn.html
Thank you again.
3. 百度移动图标出现弹窗报错：
加载文件错误!
添加woff文件进去的时候出现「e.inflate is not a function」错误
<path d="M392.328,109.985h-88.269c-47.478,0-72.679,25.992-84.285,56.416l-61.787,159.737c-24.527,3.136-67.89,31.954-67.89,86.509
v146.685c0,0,0,56.647,57.711,56.518c27.269,0,11.794,0,11.794,0v39.907c0,79.939,94.069,79.028,94.069,0V615.85h425.053v39.907
c0,79.028,94.068,79.939,94.068,0V615.85c0,0,9.842,0.604,22.688,0c46.818,1.186,46.818-51.185,46.818-51.185V412.646
c0.02-54.556-43.346-83.374-67.854-86.51l0,0L712.678,166.4c-11.643-30.423-36.811-56.416-84.359-56.416h-87.254 M268.451,198.788
c5.822-17.671,14.537-30.415,34.932-30.64H629.07c20.285,0.225,29.035,12.968,34.857,30.64l46.535,123.574h-488.53L268.451,198.788
L268.451,198.788z M241.409,492.831c-29.448,0-53.336-24.65-53.336-55.035c0-30.416,23.888-55.074,53.336-55.074
c29.447,0,53.28,24.659,53.28,55.074C294.689,468.18,270.856,492.831,241.409,492.831L241.409,492.831z M691.025,492.831
c-29.43,0-53.314-24.65-53.314-55.035c0-30.416,23.887-55.074,53.314-55.074c29.467,0,53.316,24.659,53.316,55.074
C744.344,468.18,720.49,492.831,691.025,492.831L691.025,492.831z"/>
解析错误
生成ttf时，字号（如五号字）较小时，笔画虚的非常严重，有些字都无法辨认了。其它格式没有试过
现在只能一个一个的导出，字体多的时候比较费劲
是否考虑提供一个设置：
代码点重复时无视
或者
代码点重复时覆盖？
而不是保留两种字体，导致代码点重复，无法导出。（中文+日文字体，几千个码位重复，手动删不太可能啊，自动删只能删第一页……）
请问有没有人能收费支持二次开发的。联系我465343026
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1489730101562" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1062" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M947.2 256a76.8 76.8 0 1 0 76.8 76.8A76.8 76.8 0 0 0 947.2 460.8z" p-id="1063"></path></svg>
解析错误
精确编辑能力为0……
目前 主流字体 已经趋向 OTF 格式
需要添加 'CFF ' 表的处理
实测，一两个字是可以下载的，但是导入一个1.75M的字体文件，然后编辑了下，就百分百下载失败了
求解决啊！真的很好用！
可以说下编译环境吗，谢谢
一些otf字体解析出错~~~
如图：
字体名称：SourceHanSansCN
格式：otf
mac air :
chrome 不管woff 还是zip 都无法下载, safari 会将字符扔到url里 但是不自动保存为文件,一闪就没了
windows8:
chrome崩溃
clone到本地后，npm install后运行npm run dev，
控制台报错如下：
WARNING in ./node_modules/fonteditor-core/woff2/woff2.js 8:1381-1403
Critical dependency: the request of a dependency is an expression
@ ./node_modules/fonteditor-core/woff2/index.js
@ ./node_modules/fonteditor-core/src/main.js
@ ./src/fonteditor/widget/exporter.js
@ ./src/fonteditor/index.js
WARNING in ./node_modules/fonteditor-core/woff2/woff2.js 8:1426-1450
Critical dependency: the request of a dependency is an expression
@ ./node_modules/fonteditor-core/woff2/index.js
@ ./node_modules/fonteditor-core/src/main.js
@ ./src/fonteditor/widget/exporter.js
@ ./src/fonteditor/index.js
ERROR in ./src/fonteditor/template/export/icon-css.tpl 5:0
Module parse failed: Unexpected character '@' (5:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| */
|
> @font-face {
| font-family: "{%=fontFamily%}";
| src: url("{%=fontFamily%}.eot"); /* IE9 */
@ ./src/fonteditor/template/export-render.js 43:55-87
@ ./src/fonteditor/widget/exporter.js
@ ./src/fonteditor/index.js
ERROR in ./src/fonteditor/template/export/icon-example.tpl 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <!DOCTYPE html>
| <html lang="en">
| <head>
@ ./src/fonteditor/template/export-render.js 21:63-99
@ ./src/fonteditor/widget/exporter.js
@ ./src/fonteditor/index.js
ERROR in ./src/fonteditor/template/export/symbol-example.tpl 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <!DOCTYPE html>
| <html lang="en">
| <head>
@ ./src/fonteditor/template/export-render.js 32:67-105
@ ./src/fonteditor/widget/exporter.js
@ ./src/fonteditor/index.js
ERROR in ./src/fonteditor/template/dialog/setting-metrics.tpl 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <div class="form-inline column-3">
| <div class="form-group">
| <div class="input-group input-group-sm">
@ ./src/fonteditor/dialog/setting-metrics.js 22:18-67
@ ./src/fonteditor/dialog/support.js
@ ./src/fonteditor/widget/GLYFEditor.js
@ ./src/fonteditor/index.js
ERROR in ./src/fonteditor/template/dialog/setting-editor.tpl 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <div class="form-inline column-3">
| <div class="form-group">
| <div class="input-group input-group-sm">
@ ./src/fonteditor/dialog/setting-editor.js 17:15-63
@ ./src/fonteditor/dialog/support.js
@ ./src/fonteditor/widget/GLYFEditor.js
@ ./src/fonteditor/index.js
ERROR in ./src/fonteditor/template/dialog/setting-ie.tpl 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <div class="form-inline">
| <div class="form-group">
| <div class="input-group input-group-sm">
@ ./src/fonteditor/dialog/setting-ie.js 9:0-52 18:15-18
@ ./src/fonteditor/dialog/support.js
@ ./src/fonteditor/widget/GLYFEditor.js
@ ./src/fonteditor/index.js
ERROR in ./src/fonteditor/template/dialog/setting-adjust-pos.tpl 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <div class="form-inline">
| <div class="input-group input-group-sm">
| <span class="input-group-addon">${lang.left_side_bearing}</span>
@ ./src/fonteditor/dialog/setting-adjust-pos.js 13:15-67
@ ./src/fonteditor/dialog/support.js
@ ./src/fonteditor/widget/GLYFEditor.js
@ ./src/fonteditor/index.js
ERROR in ./src/fonteditor/template/dialog/setting-adjust-glyf.tpl 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <div class="form-inline">
| <div class="input-group input-group-sm">
| <span class="input-group-addon">${lang.flip}</span>
@ ./src/fonteditor/dialog/setting-adjust-glyf.js 14:15-68
@ ./src/fonteditor/dialog/support.js
@ ./src/fonteditor/widget/GLYFEditor.js
@ ./src/fonteditor/index.js
ERROR in ./src/fonteditor/template/dialog/setting-glyf.tpl 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <div class="form-inline">
| <div class="input-group input-group-sm">
| <span class="input-group-addon">unicode</span>
@ ./src/fonteditor/dialog/setting-glyf.js 16:15-61
@ ./src/fonteditor/dialog/support.js
@ ./src/fonteditor/widget/GLYFEditor.js
@ ./src/fonteditor/index.js
ERROR in ./src/fonteditor/template/dialog/glyf-download.tpl 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <div class="glyf-download-dialog">
| <div class="form-inline">
| <span class="form-title">${lang.dialog_glyf_name}: <em id="glyf-download-name"></em></span>
@ ./src/fonteditor/dialog/glyf-download.js 50:15-62
@ ./src/fonteditor/dialog/support.js
@ ./src/fonteditor/widget/GLYFEditor.js
@ ./src/fonteditor/index.js
ERROR in ./src/fonteditor/template/dialog/setting-name.tpl 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <div class="input-group input-group-sm">
| <span class="input-group-addon">${lang.fontFamily}</span>
| <input data-field="fontFamily" type="text" class="form-control">
@ ./src/fonteditor/dialog/setting-name.js 14:15-61
@ ./src/fonteditor/dialog/support.js
@ ./src/fonteditor/widget/GLYFEditor.js
@ ./src/fonteditor/index.js
ERROR in ./src/fonteditor/template/dialog/setting-import-pic.tpl 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <div id="import-pic-dialog">
| <div class="form-group">
| <div class="input-group btn-right">
@ ./src/fonteditor/dialog/setting-import-pic.js 340:15-67
@ ./src/fonteditor/dialog/support.js
@ ./src/fonteditor/widget/GLYFEditor.js
@ ./src/fonteditor/index.js
ERROR in ./src/fonteditor/template/export/preview-ttf.tpl 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <style>{%=previewCss%}</style>
| <style>
| @font-face {
@ ./src/fonteditor/template/preview-render.js 26:32-67
@ ./src/fonteditor/widget/previewer.js
@ ./src/fonteditor/index.js
ERROR in ./src/fonteditor/template/dialog/setting-sync.tpl 2:0
Module parse failed: Unexpected token (2:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
> <div class="form-group">
| <button id="setting-sync-cancel" type="button" class="btn btn-flat btn-sm btn-right">${lang.cancelsync}</button>
| <div class="input-group input-group-sm">
@ ./src/fonteditor/dialog/setting-sync.js 14:15-61
@ ./src/fonteditor/dialog/support.js
@ ./src/fonteditor/widget/GLYFEditor.js
@ ./src/fonteditor/index.js
ERROR in Template execution failed: ReferenceError: lang is not defined
ERROR in ReferenceError: lang is not defined
- index.tpl:100
C:/Users/Jerry/Desktop/editor/fonteditor/index.tpl:100:10
- index.tpl:197 ./node_modules/html-webpack-plugin/lib/loader.js!./index.tpl?zh-cn.module.exports
C:/Users/Jerry/Desktop/editor/fonteditor/index.tpl:197:3
- index.js:284
[fonteditor]/[html-webpack-plugin]/index.js:284:18
- task_queues.js:97 processTicksAndRejections
internal/process/task_queues.js:97:5
ERROR in Template execution failed: ReferenceError: lang is not defined
ERROR in ReferenceError: lang is not defined
- index.tpl:100
C:/Users/Jerry/Desktop/editor/fonteditor/index.tpl:100:10
- index.tpl:197 ./node_modules/html-webpack-plugin/lib/loader.js!./index.tpl?en-us.module.exports
C:/Users/Jerry/Desktop/editor/fonteditor/index.tpl:197:3
- index.js:284
[fonteditor]/[html-webpack-plugin]/index.js:284:18
- task_queues.js:97 processTicksAndRejections
internal/process/task_queues.js:97:5
浏览器报错如下：
Html Webpack Plugin:
ReferenceError: lang is not defined
- index.tpl:100
C:/Users/Jerry/Desktop/editor/fonteditor/index.tpl:100:10
- index.tpl:197 ./node_modules/html-webpack-plugin/lib/loader.js!./index.tpl?zh-cn.module.exports
C:/Users/Jerry/Desktop/editor/fonteditor/index.tpl:197:3
- index.js:284
[fonteditor]/[html-webpack-plugin]/index.js:284:18
- task_queues.js:97 processTicksAndRejections
internal/process/task_queues.js:97:5
I really want to get control about SVG_FONT_ID-var in
Line 20 in babc9d9
React
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
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
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.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.