Melhorar o seu site com fontes personalizadas

Para a maioria dos web designers, a fonte de fontes faz não transborda. As 11 fontes internas para o iOS da Apple, mostrado nesta figura, são lamentavelmente inadequados. desenhadores graves passar horas procurando apenas a fonte certa para transmitir a sensação de que eles querem provocar em um projeto. É por isso que muitos designers são animado que CSS 3 oferece uma nova solução.

image0.jpg

o @Tipo de letra opção, novo em CSS 3, permite que você conectar-se a qualquer tipo de letra que está disponível a partir de um servidor web. Adicione um pouco de sombra e outros elementos de estilo com CSS, e você pode criar efeitos de fonte fantásticas sem recorrer à velha solução para fontes limitadas: salvar imagens de texto com estilo criado em Photoshop.

Depois de gerar o código que você precisa em Squirrel Font, pode começar a utilizar o tipo de letra em suas páginas web em poucos passos simples. O exemplo a seguir mostra o código que você vê se você executar uma fonte personalizada através do gerador Squirrel Font.

Primeiro, você adiciona a fonte para a área da cabeça de sua página usando a seguinte sintaxe:

@ Font-face {font-family: 'GoodDogRegular'-src: url (' GoodDog-webfont.eot ') - src: url (' GoodDog-webfont.eot IEFix? ') Formato (' EOT), url ( ' GoodDog-webfont.woff 'format) (' ') formato (' woff '), url (' GoodDog-webfont.ttf TrueType '), url (' GoodDog-webfont.svg # webfontx1QlgLst ') formato (' svg ') - font-weight:-font-style normal: normal-}

Então você incluir a fonte em uma regra de estilo, e você pode aplicá-lo a qualquer texto em sua página.

.stylename {font-family: 'GoodDogRegular'-}

Siga estes passos para adicionar qualquer uma das fontes no diretório de fontes Google para suas páginas:

  1. Abra qualquer navegador web (recomendamos Safari: a versão desktop está mais próximo da versão em iOS) e visita Google Web Fonts.

  2. Clique no nome de qualquer tipo de letra para selecionar o tipo de letra que você deseja usar em seu projeto.

  3. Clique na guia Uso Essa fonte no topo da página para gerar o código que você precisa, como mostrado.

    image1.jpg

  4. Copie o link no primeiro campo e colá-lo na área da cabeça de sua página web.

  5. Copie o código para a família de fontes no segundo campo na página de fonte diretório de fontes Google e colá-lo na folha de estilo CSS para a sua página web.

    No exemplo mostrado, você vê que o Google gerou a regra em um estilo para o tag. Você pode usar este código para criar um estilo para o tag com a fonte selecionada, mas você também tem a opção de adicionar a regra da fonte para qualquer outro estilo CSS.

  6. Aplicar a regra ao texto em sua página web.

    Se você usar a regra inteira fornecido pelo Google, qualquer texto formatado com a tag exibe em que fonte. Se você criar um novo estilo de classe ou ID com a fonte, como parte da regra, você aplicar o estilo ao seu texto para a fonte a aparecer, assim como você teria de aplicar qualquer outro estilo.

Semelhante

menu