Phông chữ SVG trong resvg: Nạp phông chữ cần cho hình của bạn

Để kết xuất phông chữ SVG đáng tin cậy bằng resvg, hãy cung cấp các tệp phông cho trình kết xuất và dùng tên họ phông trong SVG. Với thư viện kết nối Node native @resvg/resvg-js, bạn cấu hình fontFiles; đặt loadSystemFonts: false khi muốn thử chính xác những phông mà tác vụ nhận được. Ví dụ Node của dự án minh họa cấu hình đó.

PNG có thể trông đầy đủ nhưng dùng sai kiểu chữ. Hãy kiểm tra hình dáng chữ ngay cả khi lệnh xuất thành công.

Ba đầu vào phông chữ, một SVG

Chúng tôi tạo biểu tượng núi nhỏ từ các đường dẫn và đặt văn bản còn chỉnh sửa được PINE & FIELD bên cạnh. SVG yêu cầu họ phông Abel với độ đậm thường. Chúng tôi kết xuất cùng nguồn ba lần bằng @resvg/resvg-js 2.6.2, Node 22.19.0 và macOS arm64. Tính năng tìm phông hệ thống được tắt trong mọi trường hợp.

Phép thử nạp phông có kiểm soát

Những quan sát này mô tả mẫu thử và cấu hình này. Chúng không xác định phông dự phòng mà bộ phông, thư viện kết nối hay phiên bản khác sẽ chọn. Điểm chẩn đoán hữu ích đơn giản hơn: thiếu họ phông yêu cầu có thể làm mất chữ hoặc tạo chữ thay thế trông có vẻ hợp lý.

Nạp phông cục bộ trong resvg-js

Ví dụ này dùng gói Node native, không dùng gói WebAssembly riêng. Định nghĩa kiểu theo phiên bản của thư viện liệt kê fontFiles, fontDirs và loadSystemFonts trong tùy chọn font.

Trong thư mục làm việc mới, cài phiên bản dùng ở đây:

npm install --save-exact @resvg/resvg-js@2.6.2

Tải Abel-Regular.ttf và OFL.txt đi kèm từ thư mục Abel của Google Fonts. Giữ cả hai trong thư mục con fonts. Abel được cung cấp theo SIL Open Font License; hãy giữ giấy phép cùng phông khi phân phối ví dụ này.

Lưu đoạn này thành label.svg:

<svg xmlns="http://www.w3.org/2000/svg"
     width="880" height="240" viewBox="0 0 880 240">
  <rect width="880" height="240" fill="#f6f2e8"/>
  <path d="M46 155 L96 57 L147 155 Z" fill="#176b5b"/>
  <path d="M75 155 L112 88 L166 155 Z" fill="#81ab78"/>
  <text x="195" y="151" font-family="Abel"
        font-size="82" font-weight="400" fill="#152e29">
    PINE &amp; FIELD
  </text>
</svg>

Sau đó lưu render.mjs cạnh SVG:

import { access, readFile, writeFile } from 'node:fs/promises';
import { fileURLToPath } from 'node:url';
import { Resvg } from '@resvg/resvg-js';
 
const fontFile = fileURLToPath(
  new URL('./fonts/Abel-Regular.ttf', import.meta.url)
);
await access(fontFile);
 
const svg = await readFile(new URL('./label.svg', import.meta.url));
const renderer = new Resvg(svg, {
  font: {
    loadSystemFonts: false,
    fontFiles: [fontFile],
  },
});
 
const png = renderer.render().asPng();
await writeFile(new URL('./label.png', import.meta.url), png);

Chạy node render.mjs. Các URL tệp làm đường dẫn đầu vào và đầu ra tương đối với đoạn mã, nên đổi thư mục làm việc của terminal không thay đổi phông được mở. access() trả lỗi hệ thống tệp trực tiếp nếu phông thiếu hoặc không truy cập được; nó không xác minh nội dung của phông.

Để tái lập các mẫu đối chứng, giữ nguyên SVG. Dùng mảng fontFiles rỗng cho hàng thứ nhất. Với hàng thứ hai, tải Anton-Regular.ttf từ thư mục Anton của Google Fonts, giữ giấy phép và cung cấp tệp đó thay Abel. Kiểm tra từng PNG trước khi thay đổi bất cứ thứ gì khác.

Khớp tên họ phông, không phải tên tệp

Abel-Regular.ttf là đường dẫn tệp. Abel là họ phông mà SVG yêu cầu. Viết font-family="Abel-Regular.ttf" không yêu cầu trình kết xuất mở tệp đó.

Thuộc tính font-family của SVG nhận tên họ phông hoặc họ phông tổng quát, với danh sách ưu tiên khi bạn cung cấp nhiều tên. Nó cũng có thuộc tính CSS tương ứng: khai báo CSS font-family khớp sẽ được ưu tiên hơn thuộc tính trình bày.

Với hình của bạn, hãy kiểm tra ba yếu tố cùng nhau:

• Họ phông: tên ghi bên trong phông và được SVG yêu cầu.
• Kiểu và độ đậm: mặt chữ được cung cấp có khớp chữ bạn muốn không.
• Ký tự: phông có chứa các chữ và ký hiệu trong nhãn thực tế không.

readFile thành công chỉ chứng minh đã đọc được dữ liệu. Một từ nhìn thấy chỉ chứng minh có chữ được kết xuất. Cả hai đều không chứng minh mặt chữ được chọn là mặt chữ của thiết kế.

Để chẩn đoán rộng hơn về văn bản còn chỉnh sửa được và chữ chuyển thành đường bao, xem vì sao phông SVG thay đổi sau khi xuất.

Kiểm tra cùng đầu vào trong môi trường xuất của bạn

Hãy coi phông là đầu vào của tác vụ xử lý hình. Đưa tệp phông cần thiết vào gói triển khai hoặc gói tác vụ, rồi xác nhận đường dẫn sau khi phân giải trỏ đến nó ở đó. Kiểu chữ được cài trên laptop thiết kế rất dễ bị bỏ sót khi chuẩn bị tác vụ máy chủ.

Bắt đầu bằng tắt tìm phông hệ thống và dùng danh sách phông được chỉ định cụ thể nhỏ nhất đủ cho nhãn thử. Khi đầu ra đó đã đúng, thử các từ, dấu câu, độ đậm và ngôn ngữ thực tế mà hình dùng. Nhãn Latin với độ đậm thường của chúng tôi không kiểm tra các hệ chữ khác hoặc họ phông phức tạp.

Nếu chữ vẫn sai, kiểm tra nguồn để tìm CSS ghi đè và kiểu lồng trong <tspan>. Nếu cả biểu tượng lẫn nhãn đều bị cắt hoặc co giãn bất ngờ, hãy kiểm tra riêng giới hạn SVG và kích thước raster. Hướng dẫn kích thước CairoSVG của chúng tôi trình bày khác biệt đó trong trình kết xuất khác; tùy chọn của bài dành riêng cho CairoSVG.

Khi chia sẻ báo cáo lỗi hoặc tác vụ xuất có thể tái lập, hãy kèm SVG, phiên bản thư viện kết nối chính xác, tên và phiên bản tệp phông, tùy chọn trình kết xuất và ảnh kết quả mong muốn. Lưu ý quyền phân phối lại phông khi đóng gói các tệp.

Giữ nguồn có thể chỉnh sửa bên cạnh PNG

Mã trên ghi ra PNG. Đây là tệp bàn giao raster; các chữ nhìn thấy không còn là văn bản SVG có thể chỉnh sửa. Giữ label.svg và các phông đầu vào làm nguồn cho những lần đổi nội dung chữ sau này.

Nếu người nhận cần logo vector với chữ cố định, chuẩn bị một bản SVG bàn giao riêng có chữ chuyển thành đường bao trong trình chỉnh sửa vector rồi kiểm tra ở đó. Giữ bản gốc có văn bản còn chỉnh sửa được. Hướng dẫn định dạng tệp logo của chúng tôi giải thích vai trò khác nhau của tệp nguồn và tệp bàn giao.

Nếu biểu tượng bạn cần chỉ tồn tại trong PNG hoặc JPG, công cụ vector hóa logo của PerfectVector có thể giúp khôi phục hình vector cho phần đó. Kiểm tra các đường dẫn tạo ra, xóa chữ bị đồ lại ngoài ý muốn và gõ lại nhãn bằng phông đã biết trước khi xuất bằng resvg. Vector hóa không nhận diện phông gốc hay khôi phục văn bản còn chỉnh sửa được. Hướng dẫn vector hóa ảnh giải thích những gì chuyển đổi đó thay đổi.

Câu hỏi thường gặp

Vì sao chữ biến mất khi tôi tắt phông hệ thống? Trong phép thử không có phông, trình kết xuất không được cung cấp mặt chữ cho nhãn còn chỉnh sửa được, nên chỉ hình đường dẫn xuất hiện. Hãy chỉ định và nạp phông phù hợp và kiểm tra họ phông, kiểu cùng phạm vi ký tự.

Tôi có thể dùng tên tệp phông làm tên họ phông SVG không? Dùng tên họ phông trong SVG. Truyền riêng tên tệp cục bộ qua fontFiles. Đổi tên tệp phông không thay đổi tên họ phông bên trong.

resvg có chuyển logo PNG thành SVG chỉnh sửa được không? Ví dụ ở đây kết xuất SVG thành PNG. Nó không vector hóa logo raster. Khôi phục biểu tượng bằng quy trình vector hóa nếu cần, rồi thêm văn bản có thể chỉnh sửa và giữ SVG đó làm bản gốc.

Nguồn tham khảo

1. resvg-js — README phiên bản 2.6.2 — Cách dùng Node native và nạp phông được chỉ định cụ thể.
2. resvg-js — Định nghĩa kiểu phiên bản 2.6.2 — Cấu hình phông và API ảnh được kết xuất.
3. MDN — font-family của SVG — Danh sách họ phông và độ ưu tiên CSS.
4. Google Fonts — Abel — Mặt chữ thường và giấy phép dùng cho nhãn mong muốn.
5. Google Fonts — Anton — Phông và giấy phép dùng cho mẫu đối chứng thay phông.

Nếu biểu tượng raster đang cản trở việc chuẩn bị hình, hãy vector hóa hình logo, kiểm tra mép trong trình chỉnh sửa và thêm nhãn dưới dạng văn bản còn chỉnh sửa được. Sau đó kết xuất với tệp phông được chỉ định cụ thể và so sánh PNG với bản gốc trước khi bàn giao.