Font SVG resvg: Muat Jenis Huruf yang Dibutuhkan Karya

Untuk merender font SVG secara andal dengan resvg, berikan file font ke renderer dan gunakan nama keluarganya dalam SVG. Untuk binding Node native, @resvg/resvg-js, ini berarti mengonfigurasi fontFiles; tetapkan loadSystemFonts: false ketika Anda ingin menguji tepat font mana yang diterima pekerjaan Anda. Contoh Node proyek mendemonstrasikan konfigurasi tersebut.

PNG dapat terlihat lengkap meskipun memakai jenis huruf yang salah. Periksa bentuk huruf meskipun perintah ekspor berhasil.

Tiga masukan font, satu SVG

Kami membuat lambang gunung kecil dari path dan menempatkan teks yang masih bisa diedit, PINE & FIELD, di sampingnya. SVG meminta keluarga Abel pada bobot regular. Kami merender sumber yang sama tiga kali dengan @resvg/resvg-js 2.6.2, Node 22.19.0, dan macOS arm64. Penemuan font sistem dinonaktifkan dalam setiap kasus.

Pengujian pemuatan font terkontrol

Pengamatan ini menjelaskan contoh dan konfigurasi tersebut. Pengamatan tidak menentukan font pengganti mana yang akan dipilih koleksi font, binding, atau versi lain. Diagnostik yang berguna lebih sederhana: keluarga font yang diminta tetapi tidak tersedia dapat menyebabkan teks hilang atau teks pengganti yang tampak masuk akal.

Muat font lokal dalam resvg-js

Contoh ini memakai paket Node native, bukan paket WebAssembly yang terpisah. Definisi tipe berversi binding mencantumkan fontFiles, fontDirs, dan loadSystemFonts di bawah opsi font.

Dalam folder kerja baru, instal versi yang digunakan di sini:

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

Unduh Abel-Regular.ttf dan OFL.txt yang menyertainya dari direktori Abel Google Fonts. Simpan keduanya dalam subfolder fonts. Abel tersedia dengan SIL Open Font License; sertakan lisensi bersama font ketika mendistribusikan contoh ini.

Simpan sebagai 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>

Lalu simpan render.mjs di samping 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);

Jalankan node render.mjs. URL file membuat path masukan dan keluaran relatif terhadap skrip, sehingga mengubah direktori kerja terminal tidak mengubah font yang dibuka. access() memberi error filesystem langsung jika font hilang atau tidak dapat diakses; fungsi itu tidak memvalidasi isi font.

Untuk mereproduksi kontrol, biarkan SVG tetap sama. Gunakan array fontFiles kosong untuk baris pertama. Untuk baris kedua, unduh Anton-Regular.ttf dari direktori Anton Google Fonts, simpan lisensinya, dan berikan file itu sebagai ganti Abel. Periksa setiap PNG sebelum mengubah hal lain.

Cocokkan nama keluarga, bukan nama file

Abel-Regular.ttf adalah path file. Abel adalah keluarga yang diminta SVG. Menulis font-family="Abel-Regular.ttf" tidak memberi tahu renderer untuk membuka file itu.

Atribut font-family SVG menerima nama keluarga atau keluarga generik, dengan daftar berprioritas ketika Anda memberikan beberapa. Atribut ini juga memiliki padanan CSS: deklarasi CSS font-family yang cocok mendapat prioritas atas atribut presentasi.

Untuk karya Anda sendiri, periksa tiga hal bersama:

• Keluarga: nama yang tercatat di dalam font dan diminta SVG.
• Gaya dan bobot: apakah font yang diberikan cocok dengan tulisan yang Anda maksud.
• Karakter: apakah font memiliki huruf dan simbol dalam label sebenarnya.

readFile yang berhasil hanya membuktikan byte telah dibaca. Kata yang terlihat hanya membuktikan sejumlah tulisan dirender. Keduanya tidak membuktikan bahwa font yang dipilih adalah font dari desain Anda.

Untuk diagnosis lebih luas tentang teks yang masih bisa diedit versus outline, lihat mengapa font SVG berubah setelah ekspor.

Periksa masukan yang sama dalam lingkungan ekspor

Perlakukan font sebagai masukan pekerjaan karya. Sertakan file font yang diperlukan dalam deployment atau paket pekerjaan, lalu pastikan path yang teresolusi menunjuk ke file itu di sana. Jenis huruf yang diinstal di laptop desain mudah terlupakan ketika menyusun pekerjaan server.

Mulai dengan penemuan sistem dinonaktifkan dan daftar font eksplisit terkecil yang mencakup label pengujian Anda. Setelah keluaran itu benar, uji kata-kata, tanda baca, bobot, dan bahasa sebenarnya yang dipakai karya. Label Latin regular kami tidak menguji aksara lain atau keluarga font kompleks.

Jika tulisan masih tampak salah, periksa sumber untuk override CSS dan gaya <tspan> bersarang. Jika lambang dan label sama-sama terpotong atau diskalakan secara tak terduga, selidiki batas SVG dan dimensi raster secara terpisah. Panduan langkah ukuran CairoSVG kami membahas perbedaan itu dalam renderer lain; opsinya khusus CairoSVG.

Ketika membagikan laporan bug atau pekerjaan ekspor yang dapat direproduksi, sertakan SVG, versi binding persis, nama file dan versi font, opsi renderer, serta gambar yang diharapkan. Perhatikan izin redistribusi font saat mengemas file.

Simpan sumber yang bisa diedit di samping PNG

Kode di atas menulis PNG. Itu adalah file penyerahan raster; huruf yang terlihat tidak lagi berupa teks SVG yang bisa diedit. Simpan label.svg dan masukan font sebagai sumber untuk perubahan kata-kata berikutnya.

Jika penerima membutuhkan logo vektor dengan tulisan tetap, siapkan salinan penyerahan SVG outline terpisah dalam editor vektor dan periksa di sana. Pertahankan master dengan teks yang masih bisa diedit. Panduan format file logo kami menjelaskan file sumber dan penyerahan mana yang melayani kebutuhan berbeda.

Jika lambang yang diperlukan hanya tersedia dalam PNG atau JPG, vektorisasi logo PerfectVector dapat membantu merekonstruksi karya vektor untuk bagian desain itu. Periksa path hasilnya, hapus tulisan hasil tracing yang tidak diinginkan, dan ketik ulang label dengan font yang diketahui sebelum menjalankan ekspor resvg. Vektorisasi tidak mengidentifikasi font asli atau memulihkan teks yang bisa diedit. Panduan vektorisasi gambar menjelaskan apa yang diubah konversi itu.

FAQ

Mengapa teks hilang ketika saya menonaktifkan font sistem? Dalam pengujian font kosong kami, renderer tidak mendapat font untuk label yang masih berupa teks, sehingga hanya karya path yang muncul. Muat font yang sesuai secara eksplisit dan periksa keluarga, gaya, serta cakupan karakternya.

Bisakah saya memakai nama file font sebagai nama keluarga SVG? Gunakan nama keluarga font dalam SVG. Berikan nama file lokal secara terpisah melalui fontFiles. Mengganti nama file font tidak mengubah nama keluarga internalnya.

Apakah resvg mengubah logo PNG saya menjadi SVG yang bisa diedit? Contoh di sini merender SVG menjadi PNG. Contoh tidak memvektorisasikan logo raster. Rekonstruksikan lambang melalui alur vektorisasi jika diperlukan, lalu tambahkan teks yang bisa diedit dan simpan SVG itu sebagai master.

Sources

1. resvg-js — README Versi 2.6.2 — Penggunaan Node native dan pemuatan font eksplisit.
2. resvg-js — Definisi tipe Versi 2.6.2 — Konfigurasi font dan API gambar hasil render.
3. MDN — SVG font-family — Daftar keluarga dan prioritas CSS.
4. Google Fonts — Abel — Font regular dan lisensi yang digunakan untuk label yang dimaksud.
5. Google Fonts — Anton — Font dan lisensi yang digunakan untuk kontrol substitusi.

Jika lambang raster menghambat pekerjaan karya, vektorisasikan karya logo, periksa tepinya di editor, dan tambahkan label sebagai teks yang masih bisa diedit. Lalu render dengan file font eksplisit dan bandingkan PNG dengan master sebelum menyerahkannya.