Inserir uma fonte personalizada

Inserindo uma fonte personalizada no aplicativo da Windows Store, você pode optar por uma variedade maior de famílias de fonte e estilos no seu design, garantindo que qualquer fonte que você escolha fique disponível para todos os usuários do seu aplicativo. É possível localizar todos os tipos de fontes para baixar usando o mecanismo de pesquisa favorita, mas você pode inserir somente os tipos de fontes a seguir no aplicativo da Windows Store:

• Um arquivo Web Open Font Format (.woff)

• Um arquivo Embedded OpenType (.eot)

• Um arquivo True Type (.ttf) ou Open Type (.otf) com uma configuração de fonte que pode ser inserida de Instalável

  Para determinar a configuração que pode ser inserida de uma fonte, clique com o botão direito do mouse no arquivo de fonte, clique em Properties e na guia Details, que mostra as configurações que podem ser inseridas de tipo e fonte.

  

Neste tópico, você aprenderá a:

• Adicionar um arquivo de fonte ao projeto

• Criar uma regra de @font-face

• Aplicar uma fonte personalizada a uma seleção de texto

Adicionar um arquivo de fonte ao projeto

É possível adicionar o arquivo de fonte ao projeto:

• Abrindo o menu Project e clicando em Add Existing Item

• Pressionando Ctrl+I

• Copiando e colando

• Arrastando

Não é preciso criar uma pasta no seu projeto para o arquivo ou arquivos de fonte que você está inserindo, mas é recomendável.

Para criar uma pasta

• Clique com o botão direito do mouse na pasta do painel Projects, clique em Add New Folder e nomeie a pasta fontes.

Para adicionar arquivos de fonte

1. Com a pasta fonte selecionada no painel Projects, abra o menu Project e clique em Add Existing Item (teclado: Ctrl+I).

2. Na caixa de diálogo Add Existing Item, clique em arquivos de fonte que você deseja adicionar e clique em Open.

   Dica

   É possível especificar vários arquivos de fonte continuamente pressionando CTRL ao clicar em cada arquivo.

3. Nesta etapa, é possível:

   • Clicar em Cancel se não quiser adicionar fontes a uma regra de @font-face nova ou existente. Os arquivos de fonte ainda serão adicionados ao seu projeto, mas uma regra @font-face não será criada.

   • Desmarque a caixa de seleção Create an @font-face rule targeting these fonts e clique em OK se quiser adicionar fontes a uma regra de @font-face existente.

   • Confirme que a caixa de seleção Create an @font-face rule targeting these fonts está marcada, se você quiser criar uma regra de @font-face que direciona as fontes que você acabou de adicionar.

     Dica

     Somente um nome de fonte aparecerá no campo família de fontes, mesmo que você tenha adicionado vários arquivos.Se você adicionar vários arquivos e marcar a caixa de seleção Create an @font-face rule targeting these fonts, todas as fontes serão adicionadas à mesma regra de @font-face.

   

4. Vá para a próxima seção para criar uma regra de @font-face que direciona para as fontes que você acabou de adicionar.

Criar uma regra de @font-face

Para disponibilizar uma fonte personalizada para o aplicativo, crie uma regra de @font-face. A regra de @font-face pode ser direciona a uma família de fontes (por exemplo, versões de fonte regulares, em negrito e itálico) ou um único face de fonte (por exemplo, apenas a versão em itálico de uma fonte). Cada face é implementada em um arquivo de fonte.

O centro de atenções inclui um arquivo de fonte.A área restrita movediça inclui seis arquivos de fonte.O ícone de arquivos empilhados indica que a família de fontes inclui várias faces.

@font-face" title="Blend @font-face" />

Por exemplo, se você desejar usar a Área restrita movediça normal, crie uma regra de @font-face com a propriedade de font-family definida como Área restrita movediça:

@font-face
{
       font-family: Quicksand;
       src: url('/fonts/Quicksand-Regular.otf') format('opentype');
}

Se quiser usar a Área restrita movediça em negrito para qualquer texto que deve ser exibido em negrito, crie uma regra adicional de @font-face com a propriedade de font-family a Área restrita movediça e a propriedade font-weight para bold:

@font-face
{
       font-family: Quicksand;
       src: url('/fonts/Quicksand-Regular.otf') format('opentype');
}

@font-face {
       font-family: Quicksand;
       src: url('/fonts/Quicksand-Bold.otf') format('opentype');
       font-weight: bold;
}

Em Blend, é possível criar ou editar uma regra de @font-face executando uma das seguintes opções:

• Na caixa de diálogo Add Existing Item, verifique se a caixa de seleção Create an @font-face rule targeting these fonts está marcada e clique em OK. (Consulte a etapa 3 no procedimento anterior.)

• No painel Projects, clique com o botão direito do mouse em um arquivo de fonte e clique em Create new @font-face rule ou em Add to existing @font-face rule.

• No painel Style Rules, clique com o botão direito do mouse no arquivo .css, clique em Adicionar a regra e em Add @font-face Rule.

• No painel Style Rules, clique com o botão direito do mouse em uma regra @font-face e clique em Edit @font-face Rule.

Cada uma dessas opções abre o editor de @font-face, onde você define as propriedades da regra de @font-face.

O procedimento a seguir conduz você para criar uma regra de @font-face para a Área restrita movediça em negrito.

Para criar uma regra de @font-face

1. Dica

   Esse procedimento é uma continuação do procedimento "Para adicionar arquivos de fonte" da seção anterior.

   Na caixa de diálogo Add Selected Fonts to @font-face rule, verifique se a caixa de seleção Create an @font-face rule targeting these fonts está marcada e clique em OK.

   Se você adicionar vários arquivos ao mesmo tempo, o editor de @font-face incluirá todos os arquivos de face de fonte como arquivos de fonte para font-family e o nome de font-family é igual ao primeiro arquivo da lista de arquivos que você adicionou. Entretanto, você deseja selecionar um arquivo específico de face de fonte e definir as propriedades do arquivo.

2. Na caixa font-family, digite Área restrita movediça.

3. Na lista src, remova os arquivos de fonte clicando no sinal de subtração (-) à direita de cada arquivo de fonte somente até Quicksand-Bold.otf permanecer.

   Se você remover Quicksand-Bold.otfinadvertidamente, será possível adicioná-lo novamente clicando no ícone de Add Source e clicando em opentype. Na lista opentype, clique em Quicksand-Bold.otf.

4. Na lista font-weight, clique em bold e em OK.

   @font-face do Blend" title="Adicionar regra de @font-face do Blend" />

5. Para criar regras @font-face adicionais, que direcionam diferentes arquivos de face da fonte, clique com o botão direito do mouse no arquivo de fonte que você deseja definir no painel Properties e repita as etapas 2 a 4.

Aplicar uma fonte personalizada a uma seleção de texto

Agora que você adicionou a fonte personalizada ao projeto e criou uma regra de @font-face, será possível aplicar a fonte selecionando-a da seção de @font-face Fonts da lista suspensa font-family, no painel CSS Properties.

No procedimento a seguir, a fonte do Centro de atenções é adicionada ao projeto para o PickaFlick, o aplicativo de filme de Criar seu primeiro aplicativo da Windows Store com o Blend, parte 1: a página mestra (HTML e JavaScript).

Para aplicar a fonte personalizada

1. Selecione o texto ao qual você deseja aplicar a fonte personalizada.

2. Na categoria de font do painel CSS Properties, clique na nova fonte da lista font-family.

   Dica

   Observe que agora a lista @font-face Fonts inclui as fontes que você adicionou.

   

   O texto que você especificou aparece na fonte de @font-face.