Utilizando fontes carregadas com @font-face no canvas

Nesta publicação irei falar sobre a regra css @font-face, a qual permite que o servidor envie um arquivo de fonte a ser renderizado na página do cliente, sem que ela precise estar instalada no computador dele. Em outras palavras, com a regra @font-face podemos utilizar seguramente diversas fontes, sem ficarmos restritos às chamadas “web safe fonts”, que nada mais são do que fontes que estão por padrão instaladas em diversos sistemas operacionais, seja ele windows, linux, etc.

Um dos primeiros problemas que a regra @font-face enfrentou foi por questões de licenciamento, pois as fundições tipográficas (type foundries) – que são empresas que produzem e comercializam fontes – não dispunham de um licenciamento específico para utilização na web. Para quem não sabe, fontes são registradas tal como qualquer outro software (e sim, fontes são software). Atualmente estas fundições/lojas virtuais dispõem de sessões específicas para web fonts com fontes que possuem o devido licenciamento. Para quem quer boas alternativas gratuitas e livres para uso comercial, recomendo o fontsquirrel.

Vamos ao código para carregar a sua fonte no seu arquivo css.


@font-face
{
font-family: 'minhafonte';
src: url('minhafonte.eot');
src: url('minhafonte.eot?#iefix') format('embedded-opentype'),
     url('minhafonte.woff') format('woff'),
     url('minhafonte.ttf') format('truetype'),
     url('minhafonte.svg#minhafonte') format('svg');
font-weight: normal;
font-style: normal;
}

Como nada na web é simples e funciona de forma padronizada, é necessário a inclusão não de uma fonte, mas uma série de arquivos da fonte em diversos formatos para que ela funcione nos mais variados dispositivos e navegadores que dispomos. Cada um dos formatos é compatível com um browser e dispositivo, para entender melhor sobre estes formatos e sobre @font-face, especificamente, recomendo este artigo do Smashing MagazineFelizmente, se você realizar o download da fonte no fontsquirrel, ele fornecerá todos estes arquivos, além de uma folha de estilos com a regra @font-face já definida. A partir disto você pode copiar o trecho necessário para sua folha de estilos (certificar-se de que as url’s das fontes estejam corretas), ou importar a folha de estilo da fonte.

Definida a regra @font-face, com o atributo font-family é possível referenciar a fonte carregada com o valor definido, no caso do exemplo ‘minhafonte’. Poderíamos utilizá-la no restante do arquivo css, como para definir uma fonte padrão para a tag <body>, da seguinte forma:


body
{
font-family: minhafonte, Arial, Georgia;
}

E assim todo o texto dentro de sua tag <body> será renderizado utilizando o recurso, o arquivo de fonte fornecido pelo servidor. Agora iremos falar sobre o carregamento desta fonte dentro da tag <canvas>.

Para escrever no canvas, através do contexto, você irá dispor do método fillText, que aceita 4 parâmetros: texto, posição x,  posição y, largura máxima. Para especificar a fonte a ser utilizada, é preciso definir a propriedade font do contexto, que aceita uma série de propriedades, dentre elas font-family.

Por exemplo, para renderizarmos um texto ‘Hello World’ na posição (0,0) de um canvas com id ‘myCanvas’, com a fonte Arial em tamanho 12px, faríamos da seguinte forma:


var canvas = document.getElementById('myCanvas');
var contexto = canvas.getContext('2d');

contexto.font = "12px Arial";
contexto.fillText('Hello World', 0, 0);

Seu texto será renderizado a partir da posição (0,0) de seu canvas em Arial tamanho12px. E para utilizar uma fonte definida com a regra @font-face, é só alterar o nome da fonte para ‘minhafonte’? Exatamente. Mas há um pequeno problema, quando carregamos o nosso JavaScript não temos certeza se a folha de estilos e o arquivo da fonte foi carregado, resultando muitas vezes em erros e na renderização da fonte padrão do site.

Para garantir que a folha de estilos esteja carregada, encontrei esta solução, utilizando o evento onreadystatechange, que é chamado sempre que o atributo readyState de um documento é modificado. O atributo readyState do document retorna o estado de carregamento do atual documento. Este atributo possuí 4 estados: [uninitialized, loading, interactive, complete].

Para garantir que nossa folha de estilos e fonte estejam carregadas, basta realizar a verificação do atributo readyState, atribuindo o evento onreadystatechange no document. E assim o nosso código para carregar e utilizar no canvas de forma mais segura as fontes definidas com a regra @font-face ficaria da seguinte foram:


document.onreadystatechange = function (){
    if (document.readyState == "complete")
    {
    var canvas = document.getElementById('myCanvas');
    var contexto = canvas.getContext('2d');

    contexto.font = "12px minhafonte";
    contexto.fillText('Hello World', 0, 0);
    }
}

Testei este método nas últimas versões do Chrome e do Firefox, faltando ainda verificar seu funcionamento no IE (Isto em 17/07/2013, data de escrita do texto).

Deixe um comentário sobre a publicação