Fonte - CSS-Tricks

Anonim

A fontpropriedade em CSS é uma propriedade abreviada que combina todas as seguintes subpropriedades em uma única declaração.

body ( font: normal small-caps normal 16px/1.4 Georgia; ) /* is the same as: body ( font-family: Georgia; line-height: 1.4; font-weight: normal; font-stretch: normal; font-variant: small-caps; font-size: 16px; ) */

Existem sete fontsubpropriedades, incluindo:

  • font-stretch: esta propriedade define a largura da fonte, como condensada ou expandida.
    • normal
    • ultra-condensed
    • extra-condensed
    • condensed
    • semi-condensed
    • semi-expanded
    • expanded
    • extra-expanded
    • ultra-expanded
  • font-style: faz com que o texto apareça em itálico ou oblíquo.
    • normal
    • italic
    • oblique
    • inherit
  • font-variant: altera o texto alvo para versalete.
    • normal
    • small-caps
    • inherit
  • font-weight: define o peso ou a espessura da fonte.
    • normal
    • bold
    • bolder
    • lighter
    • 100, 200, 300, 400, 500, 600, 700, 800, 900
    • inherit
  • font-size: define a altura da fonte.
    • xx-small
    • x-small
    • small
    • medium
    • large
    • x-large
    • xx-large
    • smaller, larger
    • percentage
    • inherit
  • line-height: define a quantidade de espaço acima e abaixo dos elementos embutidos.
    • normal
    • number (font-size multiplier)
    • percentage
  • font-family: define a fonte que é aplicada ao elemento.
    • sans-serif
    • serif
    • monospace
    • cursive
    • fantasy
    • caption
    • icon
    • menu
    • message-box
    • small-caption
    • status-bar
    • "string"

Gotchas de abreviação de fonte

A fontpropriedade não é tão direta quanto outras propriedades abreviadas, em parte devido aos requisitos de sintaxe para ela e em parte devido a problemas de herança.

Aqui está um resumo de algumas coisas que você deve saber ao usar essa propriedade abreviada.

Valores Obrigatórios

Dois dos valores fontabreviados são obrigatórios: font-sizee font-family. Se algum deles não for incluído, toda a declaração será ignorada.

Além disso, font-familydeve ser declarado o último de todos os valores, caso contrário, novamente, a declaração inteira será ignorada.

Valores Opcionais

Todos os cinco outros valores são opcionais. Se você incluir qualquer um de font-style, font-variante font-weight, eles devem vir antes font-sizena declaração. Se não forem, eles serão ignorados e também podem fazer com que os valores obrigatórios sejam ignorados.

body ( font: italic small-caps bold 44px Georgia, sans-serif; )

No exemplo acima, três opcionais estão incluídos. Contanto que sejam definidos antes font-size, eles podem ser colocados em qualquer ordem.

Incluir line-heighttambém é opcional, mas pode ser declarado somente após font-sizee somente após uma barra:

body ( font: 44px/20px Georgia, sans-serif; )

No exemplo acima, o line-heighté “20px”. Se você omitir line-height, você também deve omitir a barra, caso contrário, a linha inteira será ignorada.

Usando font-stretch

A font-stretchpropriedade é nova no CSS3, portanto, se for usada em um navegador mais antigo que não seja compatível font-stretchcom fontabreviações, fará com que toda a linha seja ignorada.

A especificação recomenda incluir um substituto sem font-stretch, como este:

body ( font: italic small-caps bold 44px Georgia, sans-serif; /* fallback for older browsers */ font: ultra-condensed italic small-caps bold 44px Georgia, sans-serif; )

Herança para opcionais

Se você omitir qualquer um dos valores optianais (inclusive line-height), os opcionais omitidos não herdarão valores de seu elemento pai, como costuma ser o caso com propriedades tipográficas. Em vez disso, eles serão redefinidos para seu estado inicial.

Por exemplo:

body ( font: italic small-caps bold 44px/50px Georgia, sans-serif; ) p ( font: 30px Georgia, sans-serif; )

Nesse caso, os valores opcionais (itálico, versalete e negrito) são colocados na fontdeclaração do elemento. Isso também se aplica à maioria dos elementos filho.

No entanto, como declaramos novamente a fontpropriedade nos elementos do parágrafo, todos os opcionais serão redefinidos nos parágrafos, fazendo com que o estilo, a variante, o peso e a altura da linha sejam revertidos para seus valores iniciais.

Palavras-chave para definir fontes do sistema

Além da sintaxe acima, a fontpropriedade também permite o uso de palavras-chave como valores. Eles estão:

  • caption
  • icon
  • menu
  • message-box
  • small-caption
  • status-bar

Esses valores de palavra-chave definem a fonte para aquela que é usada no sistema operacional do usuário para aquela categoria específica. Por exemplo, definir "legenda" configurará a fonte nesse elemento para usar a mesma fonte que é usada no sistema operacional para controles legendados (botões, menus suspensos, etc).

Uma única palavra-chave compreende todo o valor:

body ( font: menu; )

As outras propriedades mencionadas anteriormente não são válidas em conjunto com essas palavras-chave. Essas palavras-chave só podem ser usadas com fontabreviações e não podem ser declaradas usando nenhuma das propriedades individuais de extenso.

Mais Informações

  • W3C Spec
  • Artigo CSS-Tricks: px - em -% - pt - palavra-chave
  • Jonathan Snook: tamanho da fonte com rem
  • Um manual sobre a propriedade abreviada de fonte CSS
  • Folha de referências da propriedade abreviada da fonte CSS

Suporte para navegador

cromada Safári Raposa de fogo Ópera IE Android iOS
Nenhum Nenhum Nenhum Nenhum Nenhum Nenhum Nenhum