Então, eu tenho uma cadeia de automação gráfica que tem sido executada em um ambiente Linux sem cabeçalho, usando SVGs gerados / alterados programaticamente e PhantomJS (atualmente 1.9.0) como um mecanismo de renderização final. Eu tenho alguns requisitos de substituição de texto dinâmico e as necessidades de ajuste e dimensionamento de fonte dinâmica resultantes ... Eu tenho usado fontes SVG incorporadas e algum javascript incorporado de baixa qualidade, que funciona bem, exceto por duas coisas:
1) O cliente tem alguns pedidos de fontes com ligaduras (que o formato de fonte SVG não suporta)
2) Estamos escolhendo uma opção de visualização ao vivo e gostaríamos de poder servir o SVG até a página da Web sem renderizar png / jpeg / o que quer que seja no nosso servidor antes. mantenha a carga baixa, faça a CPU do cliente fazer o trabalho pesado, tudo isso.
No interesse desses problemas, eu tenho brincado com as fontes WOFF, já que o suporte para fontes SVG nunca foi MUITO bom, e agora que o Chrome não as suporta mais com a mudança para o mecanismo Blink, se eu quiser o cliente fazer o meu trabalho preciso de algo compatível com o maior número possível de navegadores comuns ...
Então, aqui está o problema: Meu dimensionamento automático falha quando uso uma fonte WOFF (ou OFT ou TTF) e a função @ font-face.
o que eu tenho feito é apenas incorporar a fonte SVG no meu gráfico nos defs e referenciar com o DOM como qualquer outro elemento SVG. Isso faz as coisas que eu espero e preciso quando combinadas com o script java como este:
<script id="multiscaler1" type="text/javascript">
var texta = document.getElementById("text8093");
var textb = document.getElementById("text8100");
var textpatha = document.getElementById("textPath8097");
var textpathb = document.getElementById("textPath8104");
var patha = document.getElementById("path8091");
var pathb = document.getElementById("path8089");
var charcounta = textpatha.getNumberOfChars();
var charcountb = textpathb.getNumberOfChars();
var fontsizea = 10;
var fontsizeb = 10;
var offseta = -13;
var offsetb = -13;
var spacing = 0;
while ( ((textpatha.getComputedTextLength() + (spacing * charcounta)) < patha.getTotalLength()) && (fontsizea < 43) )
{
fontsizea += .5;
offseta += 0.2
textpatha.setAttribute("font-size", fontsizea);
texta.setAttribute("transform", "translate(" + offseta + ",0)");
}
while ( ((textpathb.getComputedTextLength() + (spacing * charcountb)) < pathb.getTotalLength()) && (fontsizeb < 43) )
{
fontsizeb += .5;
offsetb += 0.2
textpathb.setAttribute("font-size", fontsizeb);
textb.setAttribute("transform", "translate(" + offsetb + ",0)");
}
</script>
É uma porcaria, eu sei, mas sou gerente de produção e artista gráfico, não codificador: P e fica assim:
Qual é o que eu quero ... (mas é claro que só funciona em navegadores que suportam fontes SVG ...)
agora, quando adiciono essa pequena beleza aos meus deffs
<style type="text/css">
@font-face {
font-family: Narrow-Bold;
src: url('WOFFFONTS/Narrow-Bold.woff');
}
</style>
e remover os dados da fonte SVG, recebo o seguinte:
Oh céus. Isso não está certo. Eu brinquei com meus valores de espaçamento (que existem para lidar com outra situação em que altero o espaçamento de caracteres para maximizar o tamanho da fonte com base no comprimento da string ...) e posso fazer isso:
também muito errado: /
O que dá aqui? Qualquer ajuda? Francamente, seria ótimo mudar tudo para fontes WOFF (ou @ fontes OTF ou TTF vinculadas à face da fonte, que BTW fazem a mesma coisa), pois eu teria muito menos 20.000 + SVGs de linha sem incorporar fontes por todo o lado o maldito lugar ...
Eu tentei diferentes ferramentas de conversão de fontes e até mesmo um truque que encontrei em alguns resultados de pesquisa do Google em que você cria o WOFF a partir do SVG, não o TTF ou OTF ... mesmos resultados.
??
Abaixo está um exemplo simplificado de um SVG independente que funciona com fonte SVG incorporada usando a fonte Delicious Bold gratuita . Obviamente, isso funcionará apenas em um navegador que suporte fontes SVG. A fonte incorporada foi criada a partir de um novo download do OTF com o FontForge For Windows Release 2015-06-12 . Eu também criei uma versão WOFF da mesma fonteda mesma maneira (todas as configurações padrão, ignorando o aviso sobre "avanço de ems não padrão" na definição TTF) e adicionado um link @ font-face com um nome diferente que apontará para o WOFF quando estiver no mesmo diretório que o SVG. Ao editar o font-face = "xxxxxx" no elemento de caminho de texto / texto do SVG, você pode alternar rapidamente entre a fonte SVG incorporada (que funciona bem) a fonte WOFF vinculada (que é dimensionada incorretamente) e a versão do sistema da fonte família, se instalada (que talvez seja digna de nota, é renderizada ligeiramente diferente da fonte SVG incorporada, mas também é dimensionada corretamente)
Esse comportamento é consistente em todos os navegadores testados (Opera mais recente para Windows 7 64bit, Mozilla mais recente Linux Ubuntu 14, Chrome mais recente Windows 7/8 64bit, Safari 5.1.7 para Windows (suporta fontes SVG) e PhantomJS 1.9.7 Linux CentOS 6.4 final (suporta fontes SVG) Também é consistente em todas as fontes testadas (muitas ...) e mecanismos de conversão de fontes (fonte de esquilo, FontForge, Birdfont ...)
Como o SVG independente é muito grande para colar no corpo, aqui está um link para ele colado em um projeto JSfiddle .
Sim, eu sei que eu poderia resolver isso renderizando com o Apache batik, mas: 1) Batik é slooooooooooooow. Sooooo slooooooooooooooooooooooooow ... OMG é lento. 2) Eu quero ser capaz de descarregar o máximo possível da carga da CPU do meu servidor, a REVERSA exata do que o batik fará 3) Esse não é o ponto, caramba!
Respostas:
Eu trabalho muito com SVGs, como sou web designer. Se quiser manter a forma (estilo da fonte) do meu texto, abro o Adobe Illustrator, escrevo o que quero e 'Criar contornos'. Não é demorado, apenas copie o texto antes de descrevê-lo para manter uma versão editável.
fonte