CSS με προσαρμοσμένες γραμματοσειρές στη Βάση64

Βελτίωση της παρουσίασης της τοποθεσίας Web με χρήση προσαρμοσμένων γραμματοσειρών χωρίς αποστολή εξωτερικών αρχείων (.Ttf, .Εοτ, . Woff, .Svg).

Apresentação

Sabemos que é possível carregar uma fonte qualquer utilizando a diretiva @font-face do CSS. Podemos fazer isto de duas formas:

1. Com arquivosAnexando os arquivos de Fontes ao CSS;
2. Com Base64Embutindo a codificação da Fonte direto no CSS.

O primeiro passo comum a ambas modalidades é escolher a fonte de sua preferência. Caso você já tenha o arquivo da sua fonte preferida, Έτσι, παραλείψτε αυτό το βήμα.

Existem diversos sites onde você pode escolher e baixar arquivos de Fontes, dentre eles:

Font Squirrel
Google Fonts
DA Font
1001 Free Fonts
Net Fontes
F Fonts

Algumas fontes podem ser proprietárias (pagas). Escolha a sua fonte e baixe para o seu computador. Vamos às Soluções!

SOLUÇÃO 1 – com arquivos

Esta é a forma convencional. Στην περίπτωση αυτή, precisamos ter os vários tipos de formatos, tais como .ttf, .Εοτ, . Woff, .Svg, para atender aos diferentes navegadores, já que cada um requer um formato específico para renderizar a fonte, veja:

Navegadores e formatos de Fontes compatíveis:
Internet Explorer: EOT (e IE9 WOFF);
Mozilla: OTF, TTF (e FF3.6+ WOFF);
Safari e Opera: OTF, TTF, SVG (e Safari5.1+, Opera11.10+ WOFF);
Chrome: TTF, SVG (e Chrome6.0+ WOFF);
Navegadores Mobile: SVG.

Στο παρακάτω παράδειγμα, note que para construir o CSS seria necessário ter o arquivo da fonte ‘okudaregularpreviamente convertido para todos os formatos, o que tornaria o processo mais trabalhoso.

CSS carregando diversos formatos de Fontes

1
2
3
4
5
6
7
8
9
10
11
 
@font-face {
    font-family: 'okudaregular';
    src: url('okuda-webfont.eot');
    src: url('okuda-webfont.eot?#iefix') format('embedded-opentype'),
         url('okuda-webfont.woff') format('woff'),
         url('okuda-webfont.ttf') format('truetype'),
         url('okuda-webfont.svg#okudaregular') format('svg');
    font-weight: normal;
    font-στυλ: normal;
}

Reunir todos estes formatos pode não ser uma tarefa trivial. Alguns sites ajudam nisto, inclusive com conversores online.

Quer um exemplo? Suponha que você queira a fonte Okuda e já tenha o arquivo de FonteOkuda.ttf”. Tente isto: acesse o WebFont Generator. Faça upload do arquivo e, na sequência, baixe o KIT que, στην περίπτωση αυτή, é um arquivo compactadowebfontkit-20130416-104252.zip”.

Note que dentro do Kit (.zip) temos vários arquivos, mas o que vai nos interessar são os arquivos de formatos de fontes como .eot, .Svg, .Ttf, .woff e o conteúdo destylesheet.css”, que é exatamente o código@font-faceque mostrei acima.

Tudo o que você tem a fazer é colocar as fontes junto a sua aplicação e ajustar o caminho (διαδρομή) dentro de url(<caminhoParaFonte>), se necessário.

Λύση 2 – com Base64

Esta foi a forma que melhor me serviu, totalmente compatível com os principais navegadores e sem a necessidade de carregar inúmeros arquivos externos. Nesta solução a Fonte vaiembarcadano código CSS. Uma vez que você já tenha escolhido a sua fonte preferida, é preciso apenas mais duas etapas:

1. Converter para Base64;
2. Inserir o código no CSS.

Converter para Base64

Base64 é um método de codificação de dados/MIME que se utiliza de 64 caracteres ([A-Za-z0-9], “/” και “+”) para transferência de conteúdo na Internet.

O que precisamos fazer é converter o arquivo de Fonte para a Base64 e embutir diretamente no CSS. Acesse o site abaixo, faça o upload da sua Fonte e clique emEncodepara realizar a conversão. Para obter o código CSS com a Fonte já em Base64, Κάντε κλικ στο κουμπί “CSS File”.

http://base64fonts.com/

Inserir o código no CSS

Τέλος, basta copiar o código gerado em Base64 e colar no seu arquivo CSS, algo como isto:

1
2
3
4
@font-face{
 font-family: "Playball";
 src: url(data:font/Woff;base64,d09GRgABAAAAAE5cAA...AEjQA=) format('woff');
}

A partir de agora é só utilizar a FontePlayballno seu arquivo .css, dentro da tag style ou inline (não recomendado), assim:

1
2
3
  <div style="font-family: Playball;">
    Meu texto com Fonte personalizada.
  </div>

Problemas

Para Solução 1 και 2, pode acontecer os respectivos problemas:

Problemas com a técnicaarquivos em anexo
Se as fontes estiverem em domínios diferentes ao da sua aplicação, o Internet Explorer e o Firefox não irão renderizar a Fonte, por questões de segurança. Para resolver isto, o Font Squirrel sugere autorizar via arquivo .htaccess, κάτι σαν:

1
2
3
4
5
<FilesMatch "\.(Ttf|otf|Woff)$">
<IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

Problemas com a técnicaBase64
Ao que tudo indica, parece haver uma limitação do Internet Explorer em carregar alguns arquivos de Fontes. Não sei se por serem muito grandes ou algum Bug desconhecido. Έτσι, caso sua fonte não seja renderizada, experimente usar outra similar. Ou tente ambas soluções (com arquivos e com Base64) e veja qual a mais compatível com sua Fonte e navegadores.

Testei o resultado nos seguintes navegadores:
Google Chrome Versão 26.0.1410.64
Firefox 19.0.2
Internet Explorer 10.0.9200.16521

Γραμματοσειρές

Fonts TutorialsAbout Web fonts
WikipédiaBase64

Σύνολο επισκέψεων: 20441

Ένα σχόλιο σχετικά με “CSS με προσαρμοσμένες γραμματοσειρές στη Βάση64

Αφήνω μια απάντηση

Η διεύθυνση email σας δεν θα δημοσιευθεί. Τα απαιτούμενα πεδία σημειώνονται με *