tutoriais mais recente desenvolvimento web
×

CSS Tutorial

CSS CASA CSS Introdução CSS Sintaxe CSS Como CSS cores CSS Fundos CSS Fronteiras CSS margens CSS Preenchimento CSS Altura largura CSS Texto CSS fontes CSS ligações CSS listas CSS tabelas CSS Modelo de Caixa CSS Contorno CSS de exibição CSS Largura máxima CSS Posição CSS Flutuador CSS Inline-block CSS Alinhar CSS combinadores CSS Pseudo-classe CSS Pseudo-elemento CSS Barra de navegação CSS dropdowns CSS tooltips CSS Galeria de imagens CSS Opacidade imagem CSS Sprites imagem CSS attr seletores Formas CSS CSS contadores

CSS3

CSS3 Introdução CSS3 Cantos arredondados CSS3 Imagens de fronteira CSS3 Fundos CSS3 cores CSS3 gradientes CSS3 sombras CSS3 Texto CSS3 fontes CSS3 transformações 2D CSS3 transformações 3D CSS3 transições CSS3 animações CSS3 imagens CSS3 botões CSS3 Paginação CSS3 várias Colunas CSS3 Interface de usuário CSS3 box Dimensionamento CSS3 Flexbox CSS3 Consultas de mídia CSS3 Exemplos MQ

CSS Web design responsivo

Web design responsivo Intro Web design responsivo Janela de exibição Web design responsivo Grid View Web design responsivo Consultas de mídia Web design responsivo imagens Web design responsivo vídeos Web design responsivo Frameworks

CSS Examples

CSS Exemplos CSS Questionário CSS Certificado

CSS References

CSS Referência CSS seletores CSS Funções CSS Aural referência CSS Web Safe fontes CSS Animatable CSS Unidades CSS PX-EM conversor CSS cores CSS Valores de cor CSS Nomes das cores CSS3 Suporte a navegadores

 

CSS Fontes da web


Com CSS3, web designers não são mais obrigados a usar apenas fontes web-safe

CSS3 Web Fonts - O @font-face Regra

fontes da web permitem que os designers da Web para usar fontes que não estão instalados no computador do usuário.

Quando tiver encontrado / comprou o tipo de letra que você deseja usar, basta incluir o arquivo de fonte no seu servidor web, e ele será automaticamente baixado para o usuário, quando necessário.

Suas fontes "próprios" são definidos dentro do CSS3 @font-face regra.


Suporte a navegadores

Os números na tabela especificar a primeira versão do browser que suporta totalmente a propriedade.

Propriedade
@font-face 4.0 9.0 3.5 3.2 10.0

Formatos de fontes diferentes

TrueType fontes (TTF)

TrueType é um padrão de fonte desenvolvido no final de 1980, pela Apple e Microsoft. TrueType é o formato de fonte mais comum para ambos os sistemas operacionais Mac OS e Microsoft Windows.

OpenType Fontes (OTF)

OpenType é um formato para fontes de computador escaláveis. Foi construído em TrueType , e é uma marca comercial registrada da Microsoft. OpenType fontes são comumente usados hoje nas principais plataformas de computador.

O formato Web Open Font (WOFF)

WOFF é um formato de fonte para uso em páginas da web. Ele foi desenvolvido em 2009, e agora é uma Recomendação W3C. WOFF é essencialmente OpenType ou TrueType com compressão e metadados adicionais. O objetivo é apoiar a distribuição da fonte a partir de um servidor para um cliente através de uma rede com restrições de largura de banda.

O formato Web Open Font (WOFF 2.0)

TrueType/OpenType fonte que proporciona melhor compressão do que WOFF 1.0.

SVG Fontes / Formas

fontes SVG permitir SVG para ser usado como glifos ao exibir texto. A especificação SVG 1,1 definir um módulo de fonte que permite a criação de fontes dentro de um documento SVG. Você também pode aplicar CSS para documentos SVG, ea @font-face regra pode ser aplicada ao texto em documentos SVG.

Embarcados OpenType Fontes (EOT)

Fontes EOT são uma forma compacta de OpenType fontes criadas pela Microsoft para o uso como fontes incorporadas em páginas da web.


Suporte navegador para formatos de fonte

Os números na tabela especifica a primeira versão do browser que suporta totalmente o formato de fonte.

formato de fonte
TTF/OTF 9.0 * 4.0 3,5 3.1 10.0
WOFF 9 5 3.6 5.1 11.1
WOFF2 Não suportado 36,0 35,0 * Não suportado 26,0
SVG Não suportado 4.0 Não suportado 3.2 9
EOT 6 Não suportado Não suportado Não suportado Não suportado

* IE: O formato da fonte só funciona quando definido para ser "instalável".

* Firefox: Não suportado por padrão, mas pode ser ativado (necessidade de definir um sinalizador para "true", para usar WOFF2).


Usando a fonte desejada

No CSS3 @font-face regra que você deve primeiro definir um nome para a fonte (por exemplo myFirstFont ), e, em seguida, apontar para o arquivo fonte.

Nota Dica: Sempre utilize letras minúsculas para o URL da fonte. letras maiúsculas pode dar resultados inesperados no IE.

Para usar a fonte para um elemento HTML, consulte o nome da fonte ( myFirstFont ) através do font-family propriedade:

Exemplo

@font-face {
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}

div {
    font-family: myFirstFont;
}
Tente você mesmo "

Usando Texto em negrito

Você deve adicionar outro @font-face regra contendo descritores para texto em negrito:

Exemplo

@font-face {
    font-family: myFirstFont;
    src: url(sansation_bold.woff);
    font-weight: bold;
}
Tente você mesmo "

O arquivo "sansation_bold.woff" é outro arquivo de fonte, que contém os caracteres em negrito para a fonte Sansation.

Browsers vai usar isso sempre que um pedaço de texto com o font-family " myFirstFont " deve processar como negrito.

Desta forma, você pode ter muitos @font-face regras para a mesma fonte.


Teste-se com exercícios!

Exercício 1 » Exercício 2»


CSS3 Descritores Fonte

A tabela a seguir lista todos os descritores de fontes que podem ser definidos dentro do @font-face regra:

descritor valores Descrição
font-familyname Requeridos. Define um nome para o tipo de letra
srcURL Requeridos. Define o URL do arquivo de fonte
font-stretchnormal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded
Opcional. Define como a fonte deve ser esticado. O padrão é "normal"
font-stylenormal
italic
oblique
Opcional. Define como a fonte deve ser decorados. O padrão é "normal"
font-weightnormal
bold
100
200
300
400
500
600
700
800
900
Opcional. Define a ousadia da fonte. O padrão é "normal"
unicode-rangeunicode-range Opcional. Define o intervalo de caracteres Unicode a fonte suporta. O padrão é "U + 0-10FFFF"