Ir para conteúdo principal

Vinculação de estilos

Saiba tudo sobre a vinculação de estilos e como usá-la

Aastha avatar
Escrito por Aastha
Atualizado há mais de uma semana

A vinculação de estilos é o uso de declarações font-face de vários estilos vinculados ao mesmo nome da família de fontes, em vez de usar um nome de família diferente para cada estilo de fonte.

Esta seção ajudará você a entender


O que são projetos da Web e anúncios digitais?

Projetos da Web

Projetos da web são ferramentas organizacionais da sua biblioteca que oferecem acesso ao formato de fontes da Web e permitem agrupar fontes em um local acessível.

Clique aqui para saber mais sobre projetos da Web.

Anúncios digitais

Como projetos da Web, os anúncios digitais na Monotype Fonts são outra opção de agrupamento para organizar sua biblioteca de fontes e

preparar suas fontes da Web para uso em anúncios (ads) em HTML5.

Clique aqui para saber mais sobre anúncios digitais.


Quais são os diferentes métodos para definir fontes da Web no CSS?

Existem duas maneiras de definir fontes da Web no CSS:

  1. Definições de fonte da Web vinculadas à família, onde os descritores dentro da propriedade font-face são usados para detalhar qual estilo exato de fonte será utilizado em uma família específica de fontes. Esse é o padrão atual da indústria.

  2. Definições individuais de fontes da Web, que envolvem definições separadas de font-face para cada fonte individual dentro da família.


Como faço para vincular um estilo a um ativo digital?

  1. Faça login na plataforma Web da Monotype Fonts.

  2. Clique em Minha biblioteca e escolha um ativo digital no painel esquerdo.

    Você verá um banner informando que a vinculação de estilos está disponível na Monotype Fonts para o ativo selecionado. Isso ocorre porque o ativo usa a abordagem antiga de vinculação de estilos.

  3. Clique no ícone de reticências verticaise selecione Duplicar no menu suspenso. O ativo será duplicado com sucesso.

    Observação: O usuário precisa ter acesso de edição ou ser coproprietário para duplicar os ativos digitais.

    Essa ação cria uma cópia do código incorporado para o estilo vinculado no novo formato e exibe um novo banner: este projeto da Web/anúncio digital segue a vinculação de estilos.

  4. Clique em </> Código incorporado para visualizar o estilo da fonte para esse projeto da Web e copie todos os elementos CSS.

    Observação: Aprimoramos o acompanhamento das visualizações de página de fontes da Web, alterando para uma implementação JavaScript e CSS mais leve. Recomendamos usá-la, em vez de implementar o antigo CSS, para um tempo de carregamento da página mais rápido e uma experiência mais fluida.


De que forma o código incorporado na nova vinculação de estilo é diferente do antigo?

Anteriormente, o acompanhamento de visualizações de página era implementado de forma síncrona. Agora, fizemos a transição para uma solução mais eficiente e leve de JavaScript e CSS, que acompanha as visualizações de página de fontes da Web sem comprometer a velocidade do site. Essa mudança garante tempos de carregamento mais rápidos e uma experiência mais fluida.

Os usuários podem continuar com a implementação antiga, mas aqueles que buscam um desempenho aprimorado podem optar pela abordagem assíncrona de JavaScript + CSS.

Vinculação de estilos antiga

Vinculação de estilos nova


Como um usuário existente pode aproveitar melhor a nova abordagem assíncrona de JavaScript + CSS?

Os usuários existentes terão apenas acesso ao código CSS antigo incorporado, já que a implementação mais recente é exclusiva para ativos da Web recém-criados. No entanto, você ainda pode aproveitar a nova abordagem atualizando o projeto da web, adicionando ou removendo uma fonte, criando um subconjunto ou apenas duplicando.


Leituras recomendadas

Isto respondeu à sua pergunta?