- Guia do usuário do Adobe Fonts
- Introdução
- Licenciamento de fontes
- Licenciamento de fontes
- Gerenciar sua conta
- Licenciamento para clientes da Creative Cloud para corporações
- Adicionar licenças de fonte à sua conta
- Remover fontes da biblioteca de assinaturas
- Adobe Fonts não disponível para Adobe IDs registradas na China
- Por que essas fontes não estão incluídas na minha associação à Creative Cloud?
- Remoção de fontes da Morisawa em setembro de 2021
- Obter e usar fontes
- Usar o Adobe Fonts em aplicativos da Creative Cloud
- Gerenciar suas fontes
- Resolver problemas de fontes ausentes em aplicativos de desktop
- Usar fontes no InDesign
- Fontes e tipografia
- Usar fontes da Web em documentos HTML5 Canvas
- Usar fontes no InCopy
- Usar fontes da Web no Muse
- Empacotar arquivos de fonte
- Guia de solução de problemas: adição de fontes
- As fontes adicionadas não aparecem no menu de fontes
- “Não foi possível adicionar uma ou mais fontes” ou “Uma fonte com este nome já está instalada”
- O que ocorre quando uma fonte que estou usando é atualizada pelo fornecedor?
- Web design e desenvolvimento
- Adicionar fontes ao seu site
- Guia de solução de problemas: adicionar fontes a um site
- Solução de problemas de fontes
- Usar fontes da Web em emails ou informativos HTML
- Usar fontes da Web em páginas aceleradas para dispositivos móveis (AMP)
- Seletores CSS
- Personalizar o desempenho das fontes da Web com configurações de exibição de fontes
- Códigos incorporados
- Subdivisão dinâmica e serviço de fontes da Web
- Eventos de fonte
- Por que minhas fontes da Web são de use.typekit.net?
- O site não consegue se conectar a use.typekit.net
- Usar fontes da Web com o CodePen
- Suporte a navegador e sistema operacional
- Domínios
- Usar fontes da Web no desenvolvimento local
- Política de segurança de conteúdo
- Imprimir fontes da Web
- Idiomas compatíveis e recursos OpenType
- Tecnologia de fontes
Os recursos OpenType são uma espécie de compartimento oculto nas fontes. Basta desbloqueá-los para encontrar opções que diferenciam a aparência e o comportamento das fontes de uma maneira sutil e surpreendente. Nem todos os recursos OpenType são sempre apropriados, mas alguns são essenciais para obter uma ótima tipografia.
Para usar os recursos OpenType de uma fonte em um projeto, você precisa incluí-los no projeto da Web e, em seguida, aplicar um estilo ao texto com o CSS necessário. Consulte nosso guia de sintaxe para obter exemplos de cada recurso com código para copiar e colar em seu CSS.
Incluir recursos OpenType em um projeto
Para incluir os recursos OpenType de uma fonte em um projeto da Web, visite a página de projetos da Web e clique no link “editar” do projeto. Na seção Conjunto de caracteres, marque a caixa Recursos OpenType.
Quando a caixa estiver marcada, você verá uma lista dos recursos disponíveis para essa família específica de fontes da Web, como ligaduras, caracteres alternativos ou versaletes.
A lista mostra os recursos OpenType disponíveis em todos os estilos e espessuras da família. Se um recurso for incluído apenas em espessuras ou estilos específicos, ele não será incluído na lista.
Verificar a compatibilidade do navegador para os recursos que você está usando
Quando o navegador não oferece compatibilidade suficiente para as propriedades font-variant e font-feature-settings, os recursos OpenType podem não funcionar corretamente em todos os contextos importantes para você.
A compatibilidade é surpreendentemente variada. As versões mais recentes de navegadores que alegam oferecer compatibilidade vêm com ressalvas, e os navegadores mais antigos não compatíveis com os recursos OpenType podem entrar em conflito com eles. Por padrão, o Chrome não ativa recursos que deveriam ser ativados por padrão (como ligaduras comuns e alternativas contextuais). O Safari no macOS e iOS ignora quaisquer valores de font-feature settings especificados. Em vez disso, ativa alguns recursos por padrão, e não é possível modificar essas escolhas. Algumas versões do Firefox (versão 15 e anterior) apresentam problemas quando vários conjuntos estilísticos estão ativados. A aplicação de recursos OpenType no Chrome 32 e anterior impede o funcionamento das fontes da Web.
-moz-font-feature-settings: "smcp"; -webkit-font-feature-settings: "smcp"; font-feature-settings: "smcp";
A compatibilidade atual do navegador depende muito dos prefixos do fornecedor. No documento de ajuda Sintaxe para recursos OpenType em CSS, você encontrará códigos com inúmeras propriedades prefixadas do fornecedor, que se parecem com as do exemplo acima.
Aplicar um estilo ao texto com os recursos OpenType usando CSS
A sintaxe CSS para ativar recursos OpenType ainda está em processo de desenvolvimento. O que você precisa saber é que existem propriedades de alto e baixo nível, e a herança é particularmente complicada.
A propriedade CSS de baixo nível font-feature-settings é até certo ponto compatível nos navegadores por meio de prefixos dos fornecedores, mas é difícil usá-la por dois motivos. Primeiro, ela se baseia em tags de recurso OpenType de quatro caracteres que são difíceis de lembrar. Segundo, todas as tags de recurso são especificadas em uma única propriedade, o que pode ser complicado. Consulte a sintaxe para recursos OpenType específicos e a sintaxe para usar vários recursos OpenType.
A propriedade CSS de alto nível font-variant e suas subpropriedades são excelentes porque usam valores de linguagem natural como “small-caps” e “diagonal-fractions”. O W3C deseja que elas sejam usadas sempre que possível, mas a compatibilidade com navegadores é inexistente. Ainda assim, é uma boa ideia familiarizar-se com a sintaxe.
.class {
font-variant-caps: small-caps;
font-feature-settings: "smcp";
}
Por isso, vamos usar tanto font-variant quanto font-feature-settings, tendo em mente a maneira como elas são projetadas para funcionar. Especificaremos primeiro uma font-variant fácil de ler em nosso CSS, tal como o código acima.
Herança
Como a font-feature-settings é uma propriedade de baixo nível destinada “a casos especiais em que a única maneira de acessar um recurso de fonte usado com pouca frequência é utilizá-la”, ela substituirá a font-variant independentemente da ordem de origem. Mas tome cuidado. Ela também se substitui:
body {
font-variant-numeric: oldstyle-nums;
font-feature-settings: "onum";
}
.class {
font-variant-caps: small-caps;
font-feature-settings: "smcp"; /* disables onum from body declaration */
}
Quaisquer valores de font-feature-settings herdados são substituídos quando a propriedade é reaplicada. No exemplo acima, para que os elementos com uma classe de classe terem tanto versaletes (smcp) quanto números de estilo antigo (onum) ativados, o valor “onum” precisaria ser incluído novamente, para que assim pudéssemos reescrever a declaração desta forma:
.class {
font-variant-caps: small-caps;
font-feature-settings: "onum", "smcp";
}
Valores de font-feature-settings indexados
Alguns valores de font-feature-settings são um pouco mais complexos. Nos exemplos até aqui, cada valor era uma string (ou conjunto de strings delimitado por vírgula). A presença ou ausência de tags de recursos como “onum” e “smcp” funciona como uma escolha binária: os recursos estão ativados ou desativados.
Isso faz sentido. Mas e se, por exemplo, uma fonte contiver duas versões de swash diferentes do caractere “A” maiúsculo? Nesse caso, não queremos simplesmente ativar os swashes. Queremos ativá-los e escolher determinado swash. Portanto, podemos adicionar um índice numérico ao valor, após a string:
font-feature-settings: "swsh" 2;
Você pode estar se perguntando: que número devo usar aqui? Quantos swashes diferentes existem em uma fonte? Bem, depende da fonte. Usar “0” significa desativar o recurso swash. O mesmo vale para outros recursos que usam índices numéricos, como alternativas estilísticas e conjuntos estilísticos.
Usar vários recursos OpenType
A propriedade font-variant é uma abreviação CSS para todas as subpropriedades font-variant. Podemos fazer o seguinte para ativar ligaduras comuns e números de estilo antigo:
.class {
font-variant: common-ligatures, oldstyle-nums;
}
Da mesma forma, vários recursos podem ser ativados por meio de font-feature-settings com uma lista de valores delimitados por vírgula:
.class {
font-feature-settings: "liga", "onum";
}
Em ambos os casos, os valores herdados são totalmente substituídos e a compatibilidade do navegador pode variar. Lembre-se de que os valores de font-variant às vezes são projetados para ativar vários recursos de uma vez (consulte maiúsculas em versaletes)
Recursos
Se você estiver pronto para começar a aplicar estilos com CSS, marque como favorito nosso glossário de sintaxe de recursos OpenType usados com frequência.
