Geralmente, você deve usar fontes padrão para o conteúdo principal da página web HTML5 e CSS3, assim que ter um conjunto limitado de fontes não é um problema tão grande. Às vezes, porém, você quer usar fontes em suas manchetes. Você pode usar um editor gráfico, como o GIMP, para criar imagens baseadas em texto e, em seguida, incorporá-las em suas páginas.

Aqui está o processo para a utilização de uma fonte especial:

1. Planeje sua página.

   Quando você usa gráficos, você perde um pouco de flexibilidade. Você precisa saber exatamente o que as manchetes deve ser. Você também precisa saber o título irá mostrar em que nível. Ao invés de confiar no navegador para exibir suas manchetes, você está criando gráficos em sua ferramenta gráfica e colocá-los diretamente na página.

2. Criar suas imagens.

   Pode o recurso maravilhoso Logos no GIMP (escolher Xtns &# 10153- Script-fu &# 10153- logos) para criar o seu texto.

3. Especificar tamanhos de fonte diretamente.

   Na imagem, faz sentido para especificar tamanhos de fonte em pixels, porque aqui você está realmente falando de um número específico de pixels. Você está criando “text virtual” em seu editor gráfico, assim que o texto o tamanho que você quer que seja na página acabado.

4. Usar qualquer fonte que você deseja.

   Você não tem que se preocupar se o usuário tem a fonte porque você não está enviando a apenas uma imagem composta com a da fonte,.

5. Criar uma imagem separada para cada manchete.

   Video: Icon Fonts com HTML e CSS - Screencast

   Esse exercício tem duas imagens - um cabeçalho de nível 1 e nível 2. Porque você está criando imagens diretamente, cabe a você a manter o controle de como a imagem irá comunicar seu nível manchete.

6. Considere o nível manchete.

   Certifique-se de tornar os valores nível manchete 2 olhar um pouco menor ou menos acentuada do que o nível 1. Isto é, se você tem imagens que serão usadas em uma 1 configuração dirigindo, eles devem usar uma fonte maior do que as imagens que serão usadas em um menos enfatizou indo nível. Normalmente, isso é feito ajustando o tamanho da fonte em suas imagens.

7. Criar a página da maneira que você normalmente faria.

   Depois de criar essas imagens especiais, construir uma página web regular. Coloque e marcas em exatamente os mesmos lugares que você costuma fazer.

8. 
   
   
   

   Colocar etiquetas dentro das rubricas.

   Ao invés de texto comum, colocar tags de imagem dentro do e tags. Veja a próxima imageTitles.html código se você está um pouco confuso.

9. Coloque um texto de título no alt atributo.

   o alt atributo é especialmente importante aqui, porque se o usuário tem gráficos desligado, o texto ainda aparece como um título apropriadamente denominado. As pessoas com conexões lentas ver o texto antes da carga imagens, e as pessoas que utilizam leitores de texto pode ainda ler o texto alt da imagem.

Aqui está o código usado para gerar os cabeçalhos com base em imagens:

Esta página descreve as vacas famosas da história
A maioria das pessoas não sabem que o gado realmente tookpart na batalha. Eles não é claro. Eu apenas inventei isso.
Video: Arduino - Ethernet Shield + SDCard + Arquivos (imagens, css, javascript, pdf...)

Esta técnica é um bom compromisso entre gráficos personalizados e HTML ordinária da seguinte forma:

• Você tem um grande controle de suas imagens. Se você é hábil com a sua ferramenta de gráficos, você pode fazer qualquer tipo de imagem que deseja agir como um título. Não há literalmente nenhum limite, exceto sua habilidade e criatividade.

• A página mantém a sua estrutura. Você ainda tem tags de cabeçalho no lugar, por isso é fácil de ver que você quer dizer por uma determinada imagem para agir como um título. Você ainda pode ver a organização da página no código HTML.

• Você tem texto fallback. o alt atributos será ativado se as imagens não podem ser exibidas.

• O significado semântico de notícias imagem é preservada. o alt etiquetas fornecer uma outra grande característica. Se eles replicam o texto da imagem, o texto ainda está disponível para leitores de tela e motores de busca, de modo que o texto não está enterrado na imagem.

Esta técnica é ótimo para manchetes ou outras áreas, mas perceber que o texto de título foi repetido na tag. Isto é importante porque você não quer perder o texto. Ferramentas de pesquisa do motor e leitores de tela precisa o texto.

Não fique tentado a usar esta técnica para grandes quantidades de corpo de texto. Isso faz com que alguns problemas:

• O texto não é pesquisável. Os motores de busca não consegue encontrar texto se é enterrado em imagens.

• O texto é mais difícil de mudar. Você não pode atualizar sua página com um editor de texto. Em vez disso, você tem que baixar a imagem, modificá-lo e enviá-lo novamente.

• Imagens de exigir muito mais largura de banda do que o texto. Não use imagens se não substancialmente adicionar à sua página. Você pode fazer o caso para algumas imagens de título, mas é mais difícil de justificar ter a sua página inteira guardada como uma imagem apenas para usar uma fonte particular.