Compreensão e Uso das Propriedades de Fonte
Vamos considerar as propriedades mais comuns relacionadas a fontes.
selector {
font-family: 'Montserrat' | 'Oswald' | 'Lato' |...; /* any font family */
font-size: 12px | 0.5em | 0.8rem |...; /* it can be any value in px/em/rem units */
font-weight: 400 | 500 | 700 | 900 |...; /* value 100 - 900 */
font-style: normal | italic | oblique; /* only these values available */
}
Nota
Todos os exemplos serão demonstrados utilizando o mesmo conteúdo de texto para possibilitar a observação de como o mesmo texto pode ser exibido de maneiras diferentes.
font-family
A propriedade font-family define a família ou as famílias de fontes que serão utilizadas para exibir o conteúdo textual. É possível especificar um único nome de família de fonte ou uma lista de vários nomes de famílias de fontes separados por vírgulas.
font-size
A propriedade font-size define o tamanho da fonte para exibição do conteúdo de texto. Pode ser um tamanho fixo medido em px ou um tamanho relativo medido em unidades em ou rem.
font-weight
A propriedade font-weight determina o peso ou a espessura da fonte utilizada para exibir o conteúdo de texto. Pode ser especificada como um valor numérico (por exemplo, 300, 500, 700, ...) ou como uma palavra-chave (por exemplo, lighter, normal ou bold).
font-style
A propriedade font-style especifica o estilo da fonte a ser utilizada para o conteúdo de texto. Pode ser normal (valor padrão), italic ou oblique.
Pseudo-classe ::first-letter
A pseudo-classe first-letter seleciona e estiliza a primeira letra de um parágrafo ou título. Para utilizar essa pseudo-classe, é necessário colocar dois :: após um seletor e adicionar a palavra-chave first-letter.
selector::first-letter {
/* some styles */
}
Vamos executar o próximo exemplo para ver como funciona.
index.html
styles.css
Resumo
font-familyespecifica a fonte ou fontes alternativas para o texto. É possível listar várias fontes para garantir a renderização adequada;font-sizedefine o tamanho do texto utilizando unidades absolutas (px) ou relativas (em, rem);font-weightcontrola a espessura da fonte, podendo ser numérico (100–900) ou por palavras-chave comonormaloubold;font-styledetermina o estilo da fonte, comonormal,italicouoblique;- A pseudo-classe
::first-letterseleciona e estiliza a primeira letra de um bloco de texto, permitindo efeitos tipográficos criativos.
1. Qual propriedade determina a espessura da fonte?
2. Qual é o valor padrão da propriedade font-style no CSS?
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Can you explain the difference between px, em, and rem units for font-size?
How do I choose the best font-family for my website?
Can you show examples of using the ::first-letter pseudo-class?
Awesome!
Completion rate improved to 2.56Compreensão e Uso das Propriedades de Fonte
Deslize para mostrar o menu
Vamos considerar as propriedades mais comuns relacionadas a fontes.
selector {
font-family: 'Montserrat' | 'Oswald' | 'Lato' |...; /* any font family */
font-size: 12px | 0.5em | 0.8rem |...; /* it can be any value in px/em/rem units */
font-weight: 400 | 500 | 700 | 900 |...; /* value 100 - 900 */
font-style: normal | italic | oblique; /* only these values available */
}
Nota
Todos os exemplos serão demonstrados utilizando o mesmo conteúdo de texto para possibilitar a observação de como o mesmo texto pode ser exibido de maneiras diferentes.
font-family
A propriedade font-family define a família ou as famílias de fontes que serão utilizadas para exibir o conteúdo textual. É possível especificar um único nome de família de fonte ou uma lista de vários nomes de famílias de fontes separados por vírgulas.
font-size
A propriedade font-size define o tamanho da fonte para exibição do conteúdo de texto. Pode ser um tamanho fixo medido em px ou um tamanho relativo medido em unidades em ou rem.
font-weight
A propriedade font-weight determina o peso ou a espessura da fonte utilizada para exibir o conteúdo de texto. Pode ser especificada como um valor numérico (por exemplo, 300, 500, 700, ...) ou como uma palavra-chave (por exemplo, lighter, normal ou bold).
font-style
A propriedade font-style especifica o estilo da fonte a ser utilizada para o conteúdo de texto. Pode ser normal (valor padrão), italic ou oblique.
Pseudo-classe ::first-letter
A pseudo-classe first-letter seleciona e estiliza a primeira letra de um parágrafo ou título. Para utilizar essa pseudo-classe, é necessário colocar dois :: após um seletor e adicionar a palavra-chave first-letter.
selector::first-letter {
/* some styles */
}
Vamos executar o próximo exemplo para ver como funciona.
index.html
styles.css
Resumo
font-familyespecifica a fonte ou fontes alternativas para o texto. É possível listar várias fontes para garantir a renderização adequada;font-sizedefine o tamanho do texto utilizando unidades absolutas (px) ou relativas (em, rem);font-weightcontrola a espessura da fonte, podendo ser numérico (100–900) ou por palavras-chave comonormaloubold;font-styledetermina o estilo da fonte, comonormal,italicouoblique;- A pseudo-classe
::first-letterseleciona e estiliza a primeira letra de um bloco de texto, permitindo efeitos tipográficos criativos.
1. Qual propriedade determina a espessura da fonte?
2. Qual é o valor padrão da propriedade font-style no CSS?
Obrigado pelo seu feedback!
