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:
fique assim:
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