SVG ist nützlich für die Geräte-unabhängige Auflösung, kann jedoch oft Schmerzen sein, da Schriftarten in die Datei eingebettet werden müssen, um über alle Browser ordnungsgemäß zu rendern. svg-embed-font ist ein Befehlszeilen-Tool, mit dem Sie einfach ermitteln können, welche Schriftarten in einer SVG-Datei verwendet werden, und sie als Base64-Vermögenswerte darin codieren.
Wenn Ihre SVG -Assets auf Ihrem Computer großartig aussehen und alle anderen durcheinander bringen, liegt dies daran, dass die Schriftarten in der Datei nicht ordnungsgemäß eingebettet sind.
svg-embed-font input.svg
Im Standardmodus scannt das Tool die SVG-Datei für alle Schriftfamilienerklärungen und versucht dann, übereinstimmende Schriftdateien (jedes Schriftart-Dateiformat) zu finden. Übereinstimmungen werden als Fall-unempfindliches Substring-Match für den Schriftfamilienamen definiert, der irgendwelche Räume ignoriert. Also, wenn Sie deklarieren:
font-family: 'Permanent Marker'
Matches:
permanentmarker.ttf
PermanentMarker-700.otf
In diesem Fall gibt es zwei mögliche Übereinstimmungen, die häufig auftreten können, wenn eine Schrift in mehreren Gewichten erhältlich ist. Um anzugeben, welche verwendet werden sollte, listen Sie die Schriftart in der Befehlszeile nach der Eingabedatei auf. Mehrere mögliche Übereinstimmungen müssen gelöst werden, indem die richtige in der Befehlszeile aufgeführt ist.
svg-embed-font input.svg permanentmarker.ttf
Eine oder mehrere bevorzugte Schriftdateien können in der Befehlszeile aufgeführt werden und verwendet diese Dateien anstelle einer anderen, die es findet.
Wenn Sie die genauen Schriftartdateien nicht angeben, werden im aktuellen Verzeichnis und alle Unterverzeichnisse für eine Übereinstimmung angezeigt, sodass Sie Ihre Dateien in einer logischen Hierarchie ablegen können und sie finden. Wenn es alle möglichen Dateien erschöpft, ohne eine Übereinstimmung mit jeder Schriftart in der SVG -Datei zu finden, wird ein Fehler zurückgegeben.
Die Schriftart ist Base64 codiert und als Stylesheet -Asset direkt in die SVG -Datei aufgenommen. Wenn Sie die Datei in einem Texteditor öffnen, sehen Sie kurz vor dem Schließen </defs> Tag so etwas wie das folgende für jede Schriftart:
<style type="text/css">
<![CDATA[
@font-face {
font-family: 'Permanent Marker';
src: url('data:application/x-font-ttf;base64,AAEAAAAOAIAAAwBgT1MvMmH1Ke...<lots more>');
}
]]>
</style>
Laden Sie die für Ihr Betriebssystem geeignete Version auf der Seite "Releases" herunter.
MIT