O SVG é útil para resolução independente do dispositivo, mas geralmente pode ser uma dor porque as fontes devem ser incorporadas no arquivo para renderizar corretamente em todos os navegadores. svg-embed-font é uma ferramenta de linha de comando para determinar facilmente quais fontes são usadas em um arquivo SVG e as codificam como ativos base64 dentro dele.
Se seus ativos SVG ficarem ótimos no seu computador e bagunçados em todos os outros, é porque as fontes não estão incorporadas corretamente no arquivo.
svg-embed-font input.svg
No modo padrão, a ferramenta digitalizará o arquivo SVG em busca de todas as declarações da família de fontes e tentará localizar arquivos de fonte correspondentes (qualquer formato de arquivo de font). As correspondências são definidas como uma correspondência de substring insensível a casos para o nome da família Font, ignorando qualquer espaços. Então, se você declarar:
font-family: 'Permanent Marker'
Matches:
permanentmarker.ttf
PermanentMarker-700.otf
Nesse caso, existem duas correspondências possíveis, o que geralmente pode acontecer quando uma fonte vem em vários pesos. Para especificar qual deve ser usado, liste a fonte na linha de comando após o arquivo de entrada. Várias correspondências possíveis devem ser resolvidas listando a correta na linha de comando.
svg-embed-font input.svg permanentmarker.ttf
Um ou mais arquivos de fonte preferidos podem ser listados na linha de comando e usará esses arquivos em vez de qualquer outra correspondência que encontre.
Se você não especificar os arquivos de fonte exatos, ele procurará no diretório atual e em todos os subdiretos para uma correspondência, para que você possa estabelecer seus arquivos em uma hierarquia lógica e isso os encontrará. Se esgotar todos os arquivos possíveis sem encontrar uma correspondência com todas as fontes no arquivo SVG, ele retornará um erro.
O arquivo de font é baseado em Base64 e incluído como um ativo de folha de estilo diretamente no arquivo SVG. Se você abrir o arquivo em um editor de texto, logo antes da tag de fechamento </defs> , verá algo como o seguinte para cada fonte:
<style type="text/css">
<![CDATA[
@font-face {
font-family: 'Permanent Marker';
src: url('data:application/x-font-ttf;base64,AAEAAAAOAIAAAwBgT1MvMmH1Ke...<lots more>');
}
]]>
</style>
Faça o download do lançamento apropriado para o seu sistema operacional na página Releases.
Mit