sexta-feira, 27 de abril de 2012

Oficina do Ebook: Incorporar Fontes

Aumentar Letra Diminuir Letra


Hoje vamos estudar a incorporação de fontes ou "fontes embebedadas" para isso devemos usar a variável font-face.

Para isso em nossa arquivo css devemos usar a seguinte estrutura.

@font-face {
font-family : StayPuft;
font-weight : normal;
font-style: normal;
src : url(../Fonts/StayPuft.ttf);
}

Aí temos o chamado da fonte em @font-face é a chamada da função.
Em font-family: temos o nome que damos para a fonte em nosso documento.
Em font-weight: usamos normal ou bold, para definir se usamos negrito ou não.
Em font-style: podemos usar normal ou italic, para definirmos se a fonte será em itálico ou não.
Pode parecer estranho, mas para fontes embedadas não adianta apenas usarmos o <i> ou <b> ou definir isso no css é preciso colocar todas as opções que você vai usar no css.
Finalmente temos o endereço da fonte em url.

Então ainda no css devemos indicar onde usaremos a fonte, por exemplo para usar a fonte nos parágrafos normais devemos usar a seguinte declaração:

p{font-family: "StayPuft"}

Pra finalizar devemos ir até o arquivo .opf e colocar a seguinte linha dentro do <manifest>:
<item href="Fonts/StayPuft.ttf" id="StayPuft.ttf" media-type="font/truetype" />

se a fonte for Open type em media-type use "application/x-font-otf"

E pronto você terá a sua fonte no seu livro digital.
Pra finalizar você deve sempre usar fontes Open Type e True Type.




4 comentários:

  1. Muito interessante. Acho que fontes "importadas" devem ser usadas com muito cautela, porque podem atrapalhar a compatibilidade do ebook. Eu tenho um pedido a fazer, você poderia mostrar como criar "links" no texto que remeta a outro capítulo, ou talvez a uma tabela ou índice? Eu precisaria disso para fazer duas de minhas vontades nos ebooks, livros-jogos e livros de RPG

    ResponderExcluir
  2. Será o tema da próxima oficina então.

    ResponderExcluir
  3. Gustavo no sigil é só você ir no code view e colocar a referencia apontando para o arquivo que você quer enviar ele:

    aqui tem um exemplo que eu usei para footnotes mas na pratica você tem que fazer a mesma coisa: http://pastebin.com/uXFBm6qr

    Na versão atual do sigil só fazendo assim na marra mesmo, mas o desenvolvedor já liberou uma screenshot lá no blog do sigil mostrando que na próxima versão vai ter um editor wysiwyg completo, facilitando assim a vida de todo mundo.

    ResponderExcluir