フォント
demo.woff2
出力
@font-face { src: url(data:font/woff2;base64,...) }デザインツール
Base64フォントエンコーダー - @font-face 生成
font file をブラウザ内で Base64 化し、そのまま埋め込める @font-face snippet を生成します。demo、email template、一時的に font を inline した single-file page などに便利で、file はローカルのままです。
FontBase64CSS
このツールをお気に入りに
お気に入りの保存方法がまだ選ばれていません。
クイック操作
このツールの URL をコピーするか、対応端末ではシステムの共有シートを開けます。
设计配色
Base64フォントエンコーダー
font file をブラウザ内で Base64 化し、そのまま埋め込める @font-face snippet を生成します。demo、email template、一時的に font を inline した single-file page などに便利で、file はローカルのままです。
拖放字体文件至此处
支持 TTF / OTF / WOFF / WOFF2
请先上传字体文件
@font-face Data URI
实时预览
利用シーン
- single-file の demo page を作る
- font asset を一時的に inline する
- encoded font の payload size を確認する
使い方
- font file を選ぶ
- font family name を入力する
- 生成された @font-face CSS をコピーする
入出力サンプル
FAQ
production 用途にも向いていますか？
大きな inline font は CSS をかなり肥大化させます。production では通常、個別の font file と caching を使う方が適切です。
font はアップロードされますか？
いいえ。読み込みと Base64 encoding はブラウザ内でローカル実行されます。
ツール
関連ツール
近い用途の翻訳済みツールへ続けて進めます。
Base64 エンコード・デコード
Base64 エンコーダー・デコーダー
標準形式と URL-safe 形式に対応した Base64 のエンコード・デコードをブラウザ上で実行できます。方向の自動判定やファイルから Base64 への変換にも対応し、API のデバッグやローカルでのデータ準備に便利です。
ベース64 エンコード 開発者
CSSからTailwindへ変換
CSSからTailwindへ変換 - 宣言マッピング
CSS 宣言を貼り付けると、可能な範囲で Tailwind utility class へ変換します。一般的な layout、spacing、color ルールは標準 class に変換し、対応しない値は arbitrary-value 構文へフォールバックします。
CSS Tailwind 変換