FontDrawer
FontDrawer 是一個基於 HTML5 Canvas 的字型繪製工具，允許使用者自由繪製字型並生成 OTF 字型檔案。支援多語言界面切換，提供自動化功能以簡化手寫字型的生成過程。
功能特性
- 自由繪製字型：使用 Canvas 在網頁上自由繪製字型
- 字型生成：支援生成 OTF 格式的字型檔案
- 多語言支援：內建簡體中文、繁體中文、日文三種語言，可即時切換
- 縮放字框：可調整字型的大小和比例
- 筆壓模擬：即使設備不支援筆壓，也能模擬筆壓效果
- 多種筆刷：提供多種筆刷樣式選擇
- 本地儲存：所有數據儲存在瀏覽器本地，保護隱私
使用方式
- 打開
pages/index.html 在瀏覽器中使用
- 首次使用時設定字型基本資訊（字體名稱、格線樣式等）
- 選擇要書寫的字表範圍
- 在畫布上書寫字符
- 完成後可下載 OTF 字型檔案
語言切換
點擊導航欄中的 🌐 圖標可以切換界面語言（簡體中文、繁體中文、日文）。
版本紀錄
請見版本紀錄。
技術細節
- 主要技術：
- HTML5 Canvas
- JavaScript (ES6+)
- IndexedDB 用於儲存字型資料
- potrace.js (GPL 2.0授權) 用於將繪製的圖像轉換為 SVG
- opentype.js (MIT授權) 用於生成 OTF 字型檔案
- 檔案結構：
pages/fontdrawer.js：主要的字型繪製和生成邏輯pages/index.html：主界面（支援多語言切換）pages/i18n.js：多語言翻譯配置pages/i18n-ui.js：多語言 UI 更新邏輯glist/：用於產生字表的工具
注意事項
- 字型權利：
- 使用者生成的字型檔案的所有權屬於使用者，可自由公開或商業使用。歡迎考慮贊助支持 :)
- 技術限制：
- 生成的字型檔案可能不完全符合 CID 格式，部分 Adobe 應用可能無法正確識別為 CJK 字型
- 建議：
- 定期備份未完成的字型檔案，以防資料遺失
- 建議使用系統瀏覽器而非 App 內建瀏覽器以獲得最佳體驗
- 原始碼開源授權：
- 本專案程式碼開源授權，但由於引用之專案授權條款不同，請自行評估引用時須遵守之各授權規範。並請勿侵害以下商標等權益：
- 網站名稱的「字嗨」為在台灣正式註冊的商標
- 產出之字型檔，VendorID所填入的「ZIHI」值，為本人於微軟註冊的字型廠商代碼
贊助支持
若您覺得此工具能幫助到您，歡迎贊助支持開發者的持續開發工作！
貢獻者
简体中文说明
FontDrawer 是一个基于 HTML5 Canvas 的字体绘制工具，允许用户自由绘制字体并生成 OTF 字体文件。支持多语言界面切换，提供自动化功能以简化手写字体的生成过程。
功能特性
- 自由绘制字体：使用 Canvas 在网页上自由绘制字体
- 字体生成：支持生成 OTF 格式的字体文件
- 多语言支持：内建简体中文、繁体中文、日文三种语言，可即时切换
- 缩放字框：可调整字体的大小和比例
- 笔压模拟：即使设备不支持笔压，也能模拟笔压效果
- 多种笔刷：提供多种笔刷样式选择
- 本地储存：所有数据储存在浏览器本地，保护隐私
使用方式
- 打开
pages/index.html 在浏览器中使用
- 首次使用时设定字体基本信息（字体名称、格线样式等）
- 选择要书写的字表范围
- 在画布上书写字符
- 完成后可下载 OTF 字体文件
语言切换
点击导航栏中的 🌐 图标可以切换界面语言（简体中文、繁体中文、日文）。
版本记录
请见版本记录。
技术细节
- 主要技术：
- HTML5 Canvas
- JavaScript (ES6+)
- IndexedDB 用于储存字体数据
- potrace.js (GPL 2.0授权) 用于将绘制的图像转换为 SVG
- opentype.js (MIT授权) 用于生成 OTF 字体文件
- 文件结构：
pages/fontdrawer.js：主要的字体绘制和生成逻辑pages/index.html：主界面（支持多语言切换）pages/i18n.js：多语言翻译配置pages/i18n-ui.js：多语言 UI 更新逻辑glist/：用于生成字表的工具
注意事项
- 字体权利：
- 用户生成的字体文件的所有权属于用户，可自由公开或商业使用。欢迎考虑赞助支持 :)
- 技术限制：
- 生成的字体文件可能不完全符合 CID 格式，部分 Adobe 应用可能无法正确识别为 CJK 字体
- 建议：
- 定期备份未完成的字体文件，以防数据遗失
- 建议使用系统浏览器而非 App 内建浏览器以获得最佳体验
- 开源授权：
- 本项目代码开源授权，但由于引用项目授权条款不同，请自行评估引用时须遵守之各授权规范。并请勿侵害以下商标等权益：
- 网站名称的「字嗨」为在台湾正式注册的商标
- 生成的字体文件，VendorID所填入的「ZIHI」值，为开发者于微软注册的字体厂商代码
赞助支持
如果您觉得此工具能帮助到您，欢迎赞助支持开发者的持续开发工作！
贡献者
日本語版説明
FontDrawer は、HTML5 Canvas を使用したフォント作成ツールで、ユーザーが自由にフォントを描画し、OTF フォーマットのフォントファイルを生成することができます。多言語インターフェース切替に対応し、手書きフォントの生成プロセスを簡素化するための自動化機能を備えています。
特徴
- 自由なフォント描画：Canvas 上で自由にフォントを描画
- フォント生成：OTF フォーマットのフォントファイルを生成可能
- 多言語対応：簡体字中国語、繁体字中国語、日本語の3言語に対応、即時切替可能
- 文字枠の拡大縮小：フォントサイズや比率を調整可能
- 筆圧の模擬：筆圧対応していないデバイスでも筆圧描画を模擬
- 複数のブラシ：様々なブラシスタイルを選択可能
- ローカルストレージ：すべてのデータはブラウザにローカル保存され、プライバシーを保護
使用方法
- ブラウザで
pages/index.html を開く
- 初回使用時にフォントの基本情報を設定（フォント名、グリッドスタイルなど）
- 書きたい文字表の範囲を選択
- キャンバス上で文字を描画
- 完成後、OTF フォントファイルをダウンロード
言語切替
ナビゲーションバーの 🌐 アイコンをクリックすると、インターフェース言語を切り替えられます（簡体字中国語、繁体字中国語、日本語）。
更新履歴
詳しくは更新履歴ページをご覧ください。
技術詳細
- 主な技術：
- HTML5 Canvas
- JavaScript (ES6+)
- IndexedDB を使用してフォントデータを保存
- potrace.js (GPL 2.0ライセンス) を使用して描画した画像を SVG に変換
- opentype.js (MITライセンス) を使用して OTF フォントファイルを生成
- ファイル構成：
pages/fontdrawer.js：フォント描画と生成の主要なロジックpages/index.html：メインインターフェース（多言語切替対応）pages/i18n.js：多言語翻訳設定pages/i18n-ui.js：多言語 UI 更新ロジックglist/：文字表を生成するためのツール
注意事項
- フォントの権利：
- ユーザーが生成したフォントファイルのすべての権利はユーザーに帰属します。公開や商用利用も自由に行えます。もし気に入っていただけたら、寄付をお願いします :)
- 技術的制限：
- 生成されたフォントファイルは CID フォーマットに完全には準拠していないため、一部の Adobe アプリケーションでは CJK フォントとして正しく認識されない可能性があります
- 推奨事項：
- 未完成のフォントファイルは定期的にバックアップを行うことを推奨します
- 最適な体験のため、アプリ内ブラウザではなくシステムブラウザの使用を推奨します
- オープンソースライセンス：
- 本プロジェクトのコードはオープンソースライセンスで公開されていますが、引用されたプロジェクトのライセンス条項が異なるため、引用時には各ライセンス規約を遵守してください。また、以下の商標権などを侵害しないようご注意ください：
- ウェブサイト名「字嗨」は台湾で正式に登録された商標です
- 生成されたフォントファイルの VendorID に入力される「ZIHI」値は、Microsoft に登録された開発者のフォントベンダーコードです
寄付
もしこのツールが役に立ったと思われたら、ぜひ開発者の継続的な開発作業を支援する寄付をお願いします！
貢献者