Canto da CSS: usando a fonte completa

Com suporte entre navegadores tanto para a regra CSS3 @font-face, quanto para o formato de empacotamento de fonte WOFF, a tipografia da Web moderna se expandiu para além do domínio das ‘fontes seguras da Web’. Revistas famosas, como a New Yorker usam fontes da Web para preservar a personalidade tipográfica de seus títulos, enquanto a campanha de reeleição do presidente dos Estados Unidos, Obama, usa o serviço de fontes da Web Typekit para hospedar sua fonte de identidades.

Ainda há uma limitação que impede que os designers da Web usem a fonte completa: a incapacidade de acessar a grande variedade de recursos opcionais OpenType® embutidos em muitas fontes. Esses recursos definem as opções de posicionamento e substituição de glifos para dar suporte aos recursos tipográficos básicos como kerning, sobrescrito e subscrito, formatos de letra contextuais, como ligaturas, estilos numéricos, acesso a glifos do leste asiático, além de caracteres ornamentados.

Por exemplo, um “conjunto estilístico” OpenType criado em Gabriola permite que este texto:

Cadeia de texto na fonte Gabriola sem a aplicação de conjuntos estilísticos

fique assim:

Cadeia de texto na fonte Gabriola com a aplicação do conjunto estilístico 6

As atualizações recentes no módulo CSS3 Fonts (Fontes CSS3) incluem um novo conjunto de propriedades para expor esses recursos OpenType em CSS. Essas propriedades podem ser agrupadas em duas categorias amplas:

  • Um mapeamento explícito dos recursos comuns OpenType para especificar propriedades e valores. Por exemplo, font-kerning:normal aplica os ajustes de par kerning codificados na fonte e font-variant-numeric: tabular-nums habilita numerais em tabela.
  • A propriedade font-feature-settings habilita acesso de nível baixo a todos os recursos OpenType com suporte de uma fonte. Ela serve de "saída de escape" para acessar recursos mais avançados em casos de uso menos comuns.

Propriedade CSS: font-feature-settings

O Preview 4 do IE10 inclui suporte à propriedade font-feature-settings. O exemplo anterior com a fonte Gabriola poderia ser escrito desta forma:

p#demo {

font-family: Gabriola, cursive;

font-size: 24pt;

-ms-font-feature-settings: "ss06" 1;

}

A declaração -ms-font-feature-settings acima ativa um conjunto estilístico com suporte da fonte (ss06). A propriedade apresenta o valor de ‘normal’ – nenhuma alteração no posicionamento ou seleção de glifo – ou uma lista separada por vírgulas de um ou mais recursos. Cada recurso combina um valor e uma marca de recurso OpenType de quatro letras. No exemplo acima, “ss06” é a marca de recurso OpenType para o conjunto estilístico 6. Atribuímos o valor 1 ao recurso para ativá-lo.

O registro de recurso OpenType define a lista de marcas possíveis (também documentado aqui e padronizado pelo ISO). Veja algumas das mais populares:

Marca OpenType Habilita
kern Kerning
liga Ligaturas padrão
dlig Ligaturas discricionárias
smcp Versaletes
subs Subscrito
sups Sobrescrito
swsh Caracteres ornamentados
ss01, ss02, …, ss20 Conjuntos estilísticos de 1 a 20

Para uma boa introdução ilustrada desses e muitos outros recursos, recomendamos a seção Layout Features (Recursos de layout) do FontFont OpenType User Guide (Guia do Usuário do FontFont OpenType).

Os recursos mais comuns são do tipo ativar/desativar. Os valores do recurso desativado ou zero desativam o recurso; o valor ativado ou qualquer inteiro positivo o ativam. Em alguns recursos, um valor inteiro dá acesso a várias opções. Esse costuma ser o caso dos caracteres ornamentados (‘swsh’). Se nenhum valor é especificado para o recurso, o valor 1 é usado automaticamente. Todas as declarações a seguir são equivalentes à finalidade do exemplo da fonte Gabriola:

-ms-font-feature-settings: "ss06" 1;

-ms-font-feature-settings: "ss06" on;

-ms-font-feature-settings: "ss06";

Descobrindo recursos com suporte para uma fonte

As ferramentas de design, como Adobe InDesign ou Illustrator, expõem os recursos OpenType em menus e caixas de diálogo amigáveis, processadores de texto como o Word dão suporte a eles por meio de sua caixa de diálogo de seleção de fontes, e os fornecedores de fontes normalmente documentam a que recursos seus produtos dão suporte. Uma futura postagem abordará o uso do navegador para detectar recursos de fonte. Com mais acesso de navegadores aos recursos OpenType, esperamos que os serviços de hospedagem de fonte anunciem e documentem seu uso também.

Suporte de navegador

O Firefox 4+ e o Internet Explorer 10, a partir do Preview 4, dão suporte à propriedade font-feature-settings no momento. Observe que, como o Firefox e o IE implementaram diferentes versões do rascunho, a sintaxe de valor que aceitam é diferente. Por exemplo, para habilitar o kerning nos dois navegadores, é necessário o seguinte:

-ms-font-feature-settings: "kern" 1;

-moz-font-feature-setting: "kern=1";

Para obter mais informações sobre –moz-font-feature-settings, consulte -moz-font-feature-settings.

Como as fontes CSS3 estão no caminho da padronização, esperamos que outros navegadores também adicionem suporte a font-feature-setttings, bem como aos valores definidos no módulo e propriedades font-variant mais amigáveis ao autor.

Observe também que a propriedade se aplica a todas as famílias de fontes, sejam fontes da Web baixadas por meio de regras @font-face ou fontes locais especificadas pelo nome.

Demonstrações

O nosso site de "test drive" do IE inclui demonstrações de recursos avançados OpenType do Monotype Imaging, FontFont e The Font Bureau. Eles demonstram a variedade de designs tipográficos disponíveis em fontes modernas.

Não é necessária nenhuma fonte especial para experimentar isso. O Windows 7 inclui várias fontes habilitadas para OpenType, incluindo Calibri, Cambria, Consolas, Gabriola e Palatino Linotype. No Windows 8 Developer Preview, adicionamos recursos OpenType ao Segoe UI e as fontes seguras da Web: Arial, Verdana, Georgia, Times New Roman, Comic Sans e Trebuchet.

Estamos felizes em oferecer aos autores da Web acesso a todos os recursos OpenType embutidos em fontes da Web e esperamos uma gama ainda maior de designs tipográficos na Web.

—Sylvain Galineau, gerente de programas, Internet Explorer