Tôi Đã Xây Dựng Trình Tạo Font Unicode Miễn Phí Với Chi Phí Server Bằng 0 — Đây Là Cách Tôi Làm

Bạn đã bao giờ muốn tạo những dòng văn bản nghệ thuật cho tiểu sử trên Instagram, tài khoản Twitter hay tên người dùng TikTok chưa? Có rất nhiều trang web tạo phông chữ (font generator) ngoài kia, nhưng hầu hết chúng đều gặp những vấn đề sau:

• 📵 Yêu cầu đăng ký tài khoản
• 💰 Tính phí cho các tính năng cơ bản
• 🐢 Chạy chậm trên các gói hosting miễn phí
• 📱 Không hoạt động tốt trên thiết bị di động

Vì vậy, tôi đã xây dựng Font Generator Free — một trình tạo phông chữ Unicode hoàn toàn miễn phí, không cần đăng ký, hoạt động trơn tru trên mọi thiết bị. Trong bài viết này, tôi sẽ giới thiệu về bộ công nghệ (tech stack), các thách thức chính và cách bạn có thể xây dựng một công cụ tương tự.

Vấn đề

Tôi muốn tạo văn bản phong cách cho các hồ sơ mạng xã hội của mình. Hầu hết các công cụ tôi tìm thấy đều có một trong các vấn đề sau:

• Số lượng phong cách phông chữ hạn chế (khoảng 5-10 kiểu)
• Bắt buộc phải tạo tài khoản
• Có hình mờ (watermark) khi xuất file
• Hoạt động chậm hoặc bị lỗi
• Không hỗ trợ chuyển đổi hàng loạt

Tôi tự hỏi: Việc này khó đến mức nào? Tại sao tôi không tự xây dựng một cái nhỉ?

Giải pháp

Giao diện Font Generator

Giao diện chuyển đổi hàng loạt

Các tính năng chính

• Hơn 30 kiểu Font: In đậm, in nghiêng, kiểu bong bóng (Bubble), Gothic, viết tay (Cursive), Zalgo và nhiều hơn nữa.
• Hai chế độ: Chuyển đổi văn bản đơn lẻ hoặc chuyển đổi hàng loạt.
• Định dạng xuất đa dạng: TXT, HTML, ZIP, PNG, PDF.
• Tính năng Pro: Lưu trữ kết hợp không giới hạn, đồng bộ đám mây, lịch sử.
• Chi phí bằng 0: Hoàn toàn miễn phí để vận hành.

Bộ công nghệ (Tech Stack)

Đây là những gì khiến mọi thứ trở nên khả thi mà không cần trả tiền cho máy chủ:

Frontend

• HTML + JavaScript thuần (không có độ trễ của framework)
• Tailwind CSS qua CDN (tạo mẫu nhanh)
• JSZip để tạo file ZIP phía client
• html-to-image để xuất ảnh PNG

Backend

• Cloudflare Workers — Các hàm Edge Serverless
• Cloudflare D1 — Cơ sở dữ liệu SQLite (100MB miễn phí)
• Cloudflare Pages — Hosting trang tĩnh (miễn phí)

Tổng chi phí hàng tháng: 0 USD ☁️

Cách thức hoạt động

1. Ánh xạ Font Unicode

Cốt lõi của một trình tạo font là ánh xạ ký tự Unicode. Mỗi "font" thực chất là một khối Unicode khác nhau:

Thông thường:    ABCDEFGHIJKLMNOPQRSTUVWXYZ
In đậm:         𝐀𝐁𝐂𝐃𝐄𝐅𝐆𝐇𝐈𝐉𝐊𝐋𝐌𝐍𝐎𝐏𝐐𝐑𝐒𝐓𝐔𝐕𝐖𝐗𝐘𝐙
Bong bóng:      ⒶⒷⒸⒹⒺⒻⒼⒽⒾⒿⓀⓁⓂⓃⓄⓅⓆⓇⓈⓉⓊⓋⓌⓍⓎⓏ
Gothic:         𝔄𝔅𝔇𝔈𝔉𝔊𝔋𝔌𝔎𝔏𝔐𝔑𝔒𝔓𝔔𝔕𝔖𝔗𝔘𝔙𝔚𝔛𝔜𝔷

Đây là phiên bản đơn giản hóa cách tôi ánh xạ các ký tự:

const boldMap = {
  'A': '𝐀', 'B': '𝐁', 'C': '𝐂', // ... tất cả A-Z, a-z, 0-9
};

function convertToBold(text) {
  return text.split('').map(char => boldMap[char] || char).join('');
}

2. Chế độ hàng loạt với xử lý phía Client

Để chuyển đổi hàng loạt, tôi xử lý mọi thứ ngay trên trình duyệt:

function batchConvert(texts, fonts) {
  const results = [];

  for (const text of texts) {
    for (const font of fonts) {
      results.push({
        source: text,
        font: font.name,
        output: font.convert(text)
      });
    }
  }

  return results;
}

Việc này giúp backend trở nên đơn giản — nó chỉ cần xử lý xác thực người dùng và lưu trữ các kết hợp font.

3. API Cloudflare Workers

Backend là một Worker đơn giản xử lý xác thực người dùng và lưu trữ dữ liệu:

export default {
  async fetch(request, env) {
    const url = new URL(request.url);

    if (url.pathname === '/api/combo/save') {
      // Lưu kết hợp font của người dùng vào D1
      const { google_sub, name, fonts } = await request.json();
      await env.DB.prepare(
        `INSERT INTO font_combos (google_sub, name, fonts) VALUES (?, ?, ?)`
      ).bind(google_sub, name, JSON.stringify(fonts)).run();

      return new Response(JSON.stringify({ success: true }));
    }
  }
};

4. Tích hợp PayPal

Đối với gói đăng ký Pro, tôi đã tích hợp PayPal. Phần quan trọng nhất là xác minh chữ ký webhook để ngăn chặn các thanh toán giả mạo:

async function verifyWebhookSignature(request, env) {
  // Trích xuất các header từ PayPal
  const transmissionId = request.headers.get('PAYPAL-TRANSMISSION-ID');
  const certUrl = request.headers.get('PAYPAL-CERT-URL');
  const signature = request.headers.get('PAYPAL-TRANSMISSION-SIG');

  // Xác minh chứng chỉ đến từ PayPal
  if (!certUrl.endsWith('.paypal.com')) {
    return { valid: false };
  }

  // Tải chứng chỉ và xác minh chữ ký RSA
  // ... logic xác minh chữ ký

  return { valid: true };
}

Thách thức & Giải pháp

Thách thức 1: Phạm vi Unicode

Một số khối Unicode không liên tục! Ví dụ: Mathematical Bold Italic:

// Sai: Giả định phạm vi liên tục
const start = 0x1D400;
const boldItalic = {};
for (let i = 0; i < 26; i++) {
  boldItalic[base[i]] = String.fromCodePoint(start + i); // ❌ Mã sai!
}

Giải pháp: Kiểm tra thủ công mã ký tự của từng ký tự. Tôi đã phải sửa một số font đang sử dụng các phạm vi không chính xác.

Thách thức 2: Ký tự kết hợp

Các font như "Dot" sử dụng các ký tự kết hợp (ví dụ: i + combining dot):

// Sai: Array.from tách ký tự kết hợp
Array.from('ȧḃċḋ'); // ['a', '̇', 'b', '̇', ...] ❌

// Đúng: Xây dựng thủ công
const dotMap = {};
for (const char of 'abcdefghijklmnopqrstuvwxyz') {
  dotMap[char] = char + '\u0307'; // Thêm dấu chấm kết hợp
}

Thách thức 3: Logic gia hạn hàng tháng

Khi người dùng gia hạn gói đăng ký hàng tháng, tôi cần gia hạn từ ngày hết hạn hiện tại của họ (không đặt lại về 30 ngày):

async function calculateExpiry(env, googleId, planType, now) {
  if (planType === 'lifetime') return null; // Không bao giờ hết hạn

  const user = await env.DB.prepare(
    'SELECT subscription_expires_at FROM users WHERE google_id = ?'
  ).bind(googleId).first();

  if (user?.subscription_expires_at > now) {
    // Gia hạn từ ngày hết hạn hiện tại (không mất ngày còn lại)
    return user.subscription_expires_at + 30 * 24 * 3600;
  }

  // Bắt đầu mới
  return now + 30 * 24 * 3600;
}

Triển khai (Deployment)

Quá trình triển khai vô cùng đơn giản:

1. Cloudflare Pages — Kết nối với GitHub, tự động triển khai khi có code mới.
2. Cloudflare Workers — Lệnh wrangler deploy đẩy API lên.
3. Cloudflare D1 — Tạo cơ sở dữ liệu với một lệnh duy nhất.

# Triển khai worker
CLOUDFLARE_API_TOKEN=xxx npx wrangler deploy

# Tạo database
npx wrangler d1 create font-generator-db

Kết quả

Sau khi ra mắt:

• 📈 Khoảng 500 lượt truy cập mỗi ngày trong tuần đầu tiên
• 🔒 0 sự cố bảo mật
• 💰 Chi phí hosting bằng 0
• 😊 Người dùng yêu thích sự đơn giản

Tiếp theo là gì?

Một số cải tiến tiềm năng:

• Thêm nhiều khối Unicode hơn (Emoji, ký hiệu).
• Hỗ trợ đa ngôn ngữ.
• Cài đặt font do người dùng tạo.
• Tính năng chia sẻ mạng xã hội.

Kết luận

Bạn không cần những máy chủ đắt tiền để xây dựng các công cụ web hữu ích. Các nền tảng biên hiện đại như Cloudflare Workers có thể xử lý một lượng truy cập khá lớn miễn phí. Chìa khóa là:

1. Giữ phần Frontend tĩnh và xử lý ở phía client.
2. Sử dụng các hàm edge cho logic API.
3. Chọn cơ sở dữ liệu phù hợp với trường hợp sử dụng của bạn.

Nếu bạn đang xây dựng một cái gì đó tương tự, tôi rất muốn nghe về nó. Hãy thoải mái đặt câu hỏi trong phần bình luận!

Liên kết:

• 🌐 Trang web: https://fontgeneratorfree.online
• 💻 GitHub: https://github.com/hebiwu007/font-generator-free