resvg SVG yazı tipleri: Doğru yazı tipini yükleyin

SVG yazı tiplerini resvg ile güvenilir biçimde işlemek için yazı tipi dosyalarını görüntü oluşturma motoruna verin ve SVG'de bunların aile adlarını kullanın. Node için yerel makine koduyla çalışan @resvg/resvg-js bağlayıcısında bu, fontFiles ayarını yapılandırmak anlamına gelir; işleminize tam olarak hangi yazı tiplerinin sağlandığını test etmek istediğinizde loadSystemFonts: false ayarlayın. Projenin Node örneği bu yapılandırmayı gösterir.

Bir PNG, yanlış yazı tipini kullanırken de eksiksiz görünebilir. Dışa aktarma komutu başarılı olsa bile harf biçimlerini kontrol edin.

Üç yazı tipi girdisi, tek SVG

Yollardan küçük bir dağ amblemi oluşturduk ve yanına düzenlenebilir PINE & FIELD metnini yerleştirdik. SVG, normal kalınlıkta Abel ailesini istiyor. Aynı kaynağı @resvg/resvg-js 2.6.2, Node 22.19.0 ve macOS arm64 ile üç kez işledik. Her durumda sistem yazı tiplerini bulma özelliği devre dışıydı.

Kontrollü yazı tipi yükleme testi

Bu gözlemler, bu test örneğini ve yapılandırmayı anlatır. Başka bir yazı tipi koleksiyonunun, bağlayıcının veya sürümün hangi yedek yazı tipini seçeceğini belirlemez. Tanı koyarken yararlanabileceğiniz bulgu daha basittir: istenen aile eksikse metin görünmeyebilir veya makul görünen başka bir yazı tipiyle değiştirilebilir.

resvg-js içinde yerel bir yazı tipi yükleyin

Bu örnek, ayrı WebAssembly paketini değil, yerel makine koduyla çalışan Node paketini kullanır. Bağlayıcının sürüme ait tür tanımları, font seçeneği altında fontFiles, fontDirs ve loadSystemFonts ayarlarını listeler.

Yeni bir çalışma klasöründe, burada kullanılan sürümü yükleyin:

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

Google Fonts Abel dizininden Abel-Regular.ttf ve beraberindeki OFL.txt dosyasını indirin. İkisini de bir fonts alt klasöründe saklayın. Abel, SIL Open Font License kapsamında sağlanır; bu örneği dağıtırken lisansı yazı tipiyle birlikte tutun.

Bunu label.svg olarak kaydedin:

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

Ardından SVG'nin yanına render.mjs dosyasını kaydedin:

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);

node render.mjs komutunu çalıştırın. Dosya URL'leri, girdi ve çıktı yollarını betiğe göre göreli hâle getirir; böylece terminalinizin çalışma dizinini değiştirmek, açılan yazı tipini değiştirmez. Yazı tipi yoksa veya erişilemiyorsa access() doğrudan bir dosya sistemi hatası verir; yazı tipinin içeriğini doğrulamaz.

Kontrol örneklerini yeniden üretmek için SVG'yi değiştirmeyin. İlk satır için boş bir fontFiles dizisi kullanın. İkinci satır için Google Fonts Anton dizininden Anton-Regular.ttf dosyasını indirin, lisansını saklayın ve Abel yerine bu dosyayı verin. Başka bir şeyi değiştirmeden önce her PNG'yi inceleyin.

Dosya adını değil, aile adını eşleştirin

Abel-Regular.ttf bir dosya yoludur. Abel, SVG'nin istediği ailedir. font-family="Abel-Regular.ttf" yazmak, görüntü oluşturma motoruna o dosyayı açmasını söylemez.

SVG'nin font-family özniteliği, aile adlarını veya genel aileleri kabul eder; birden fazlasını verdiğinizde öncelik sırasına göre bir liste kullanır. Ayrıca CSS karşılığı da vardır: eşleşen bir CSS font-family bildirimi, sunum özniteliğine göre önceliklidir.

Kendi grafiğiniz için şu üç noktayı birlikte kontrol edin:

• Aile: yazı tipinin içinde kayıtlı olan ve SVG'nin istediği ad.
• Stil ve kalınlık: sağlanan yazı tipi varyantının amaçladığınız yazıyla eşleşip eşleşmediği.
• Karakterler: yazı tipinin gerçek etiketteki harfleri ve simgeleri içerip içermediği.

Başarılı bir readFile, yalnızca baytların okunduğunu kanıtlar. Görünen bir sözcük, yalnızca bir yazının işlendiğini kanıtlar. Hiçbiri seçilen yazı tipi varyantının tasarımınızdakiyle aynı olduğunu kanıtlamaz.

Düzenlenebilir metin ile vektör yollarına dönüştürülmüş yazı arasındaki farkı daha kapsamlı incelemek için SVG yazı tiplerinin dışa aktarmadan sonra neden değiştiğine bakın.

Aynı girdileri dışa aktarma ortamınızda kontrol edin

Yazı tipini grafik işinin bir girdisi olarak ele alın. Gerekli yazı tipi dosyasını dağıtımınıza veya iş paketinize dahil edin, ardından çözümlenen yolun o ortamda dosyayı gösterdiğini doğrulayın. Sunucuda çalışacak bir işi hazırlarken tasarım dizüstü bilgisayarınızda yüklü olan bir yazı tipini gözden kaçırmak kolaydır.

Sistem yazı tiplerini bulma özelliği kapalıyken, test etiketinizi kapsayan yazı tiplerini açıkça belirttiğiniz, mümkün olan en küçük listeyle başlayın. Bu çıktı doğru olduğunda grafiğinizdeki gerçek sözcükleri, noktalama işaretlerini, kalınlıkları ve dilleri test edin. Normal kalınlıktaki Latin etiketimiz, diğer yazı sistemlerini veya karmaşık yazı tipi ailelerini test etmez.

Yazı hâlâ yanlış görünüyorsa, kaynakta CSS geçersiz kılmalarını ve iç içe <tspan> stillerini inceleyin. Amblem ve etiketin ikisi de beklenmedik şekilde kırpılıyor veya ölçekleniyorsa, SVG sınırlarını ve raster boyutlarını ayrı ayrı araştırın. CairoSVG boyutlandırma adımlarımız, başka bir görüntü oluşturma motorunda bu ayrımı ele alır; oradaki seçenekler CairoSVG'ye özgüdür.

Bir hata bildirimi veya yeniden üretilebilir dışa aktarma işi paylaşırken SVG'yi, bağlayıcının tam sürümünü, yazı tipi dosya adlarını ve sürümlerini, görüntü oluşturma motorunun seçeneklerini ve beklenen bir görseli dahil edin. Dosyaları paketlerken yazı tipini yeniden dağıtma izinlerini göz önünde bulundurun.

Düzenlenebilir kaynağı PNG'nin yanında saklayın

Yukarıdaki kod bir PNG yazar. Bu, raster bir teslim dosyasıdır; görünen harfleri artık düzenlenebilir SVG metni değildir. Gelecekteki metin değişiklikleri için label.svg dosyasını ve yazı tipi girdilerini kaynak olarak saklayın.

Alıcının yazısı sabitlenmiş bir vektör logoya ihtiyacı varsa, vektör düzenleyicinizde metni vektör yollarına dönüştürülmüş ayrı bir SVG teslim kopyası hazırlayın ve orada inceleyin. Düzenlenebilir metin içeren ana dosyayı koruyun. Logo dosya biçimleri rehberimiz, farklı işler için hangi kaynak ve teslim dosyalarının kullanıldığını açıklar.

İhtiyacınız olan amblem yalnızca bir PNG veya JPG içinde mevcutsa, PerfectVector logo vektörleştirme aracı tasarımın bu kısmı için vektör grafiği geri kazanmanıza yardımcı olabilir. Ortaya çıkan yolları inceleyin, vektörleştirilmiş istenmeyen yazıları kaldırın ve resvg dışa aktarımını çalıştırmadan önce etiketi bilinen bir yazı tipiyle yeniden yazın. Vektörleştirme, özgün yazı tipini belirlemez veya düzenlenebilir metni geri getirmez. Görsel vektörleştirme rehberi, bu dönüşümün neleri değiştirdiğini açıklar.

Sık sorulan sorular

Sistem yazı tiplerini devre dışı bıraktığımda metin neden kayboluyor? Boş yazı tipi testimizde, düzenlenebilir etiket için görüntü oluşturma motoruna hiçbir yazı tipi varyantı sağlanmadığından yalnızca yollardan oluşan grafik göründü. Uygun bir yazı tipini açıkça yükleyin; ailesini, stilini ve karakter kapsamını kontrol edin.

Yazı tipi dosya adını SVG aile adı olarak kullanabilir miyim? SVG'de yazı tipinin aile adını kullanın. Yerel dosya adını fontFiles üzerinden ayrıca iletin. Yazı tipi dosyasını yeniden adlandırmak, içindeki aile adını değiştirmez.

resvg, PNG logomu düzenlenebilir SVG'ye dönüştürür mü? Buradaki örnek SVG'yi PNG olarak işler. Raster bir logoyu vektörleştirmez. Gerekiyorsa amblemi bir vektörleştirme iş akışıyla geri kazanın, ardından düzenlenebilir metin ekleyip o SVG'yi ana dosyanız olarak saklayın.

Kaynaklar

1. resvg-js — Version 2.6.2 README — Yerel makine koduyla çalışan Node paketinin kullanımı ve yazı tiplerinin açıkça yüklenmesi.
2. resvg-js — Version 2.6.2 type definitions — Yazı tipi yapılandırması ve işlenmiş görsel API'si.
3. MDN — SVG font-family — Aile listeleri ve CSS önceliği.
4. Google Fonts — Abel — İstenen etiket için kullanılan normal yazı tipi varyantı ve lisansı.
5. Google Fonts — Anton — Yazı tipi değişimi kontrol örneğinde kullanılan yazı tipi ve lisansı.

Raster bir amblem grafik çalışmasını geciktiriyorsa, logo grafiğini vektörleştirin, kenarlarını düzenleyicinizde kontrol edin ve etiketi düzenlenebilir metin olarak ekleyin. Ardından açıkça verilen bir yazı tipi dosyasıyla işleyin ve teslim etmeden önce PNG'yi ana dosyanızla karşılaştırın.