Fontes CSS (Fontes)

As propriedades de fontes CSS permitem definir vários estilos para a fonte, como a família de caracteres do texto, tamanho e negrito, variantes, etc.

Propriedades de fontes

No estilo CSS para o texto, como fornecer várias propriedades:font-family，font-style，font-variant，font-weightefont-size. A próxima seção apresentará cada uma dessas propriedades.

Família de caracteres

Afont-familyA propriedade CSS permite que você defina o nome da família de caracteres do conteúdo do texto, a lista de prioridade de uso da família de caracteres.

Afont-familyAs propriedades podem conter vários nomes de famílias de caracteres comoReservaFonte. Primeiro liste a família de caracteres desejada, seguida de todas as famílias de caracteres (se não estiverem disponíveis). Se o navegador não suportar a primeira família de caracteres, ele tentará a próxima. A declaração da família de caracteres pode ser como follows:

p {
　　　　font-family: "Times New Roman", Times, serif;
}

Para obter mais informações sobre combinações de fontes comuns, consulte fontes de segurança de rede.

Estilo da fonte

atravésfont-stylePropriedade que define o estilo do texto do elemento.

Os valores possíveis para essa propriedade são:normal，italicouoblique。

p.one {
　　　　font-style: normal;
}
p.two {
　　　　font-style: italic;
}
p.three {
　　　　font-style: oblique;
}

Tamanho da fonte

font-sizePropriedade que define o tamanho da fonte do conteúdo do texto do elemento.

Existem várias maneiras de especificar o valor do tamanho da fonte, por exemplo, usando palavras-chave, pixels ou ems.

Definir o tamanho da fonte usando palavras-chave

Pode-se definir tamanhos relativos em qualquer lugar da página usando palavras-chave definidas no elemento 'body', permitindo que a fonte seja escalada facilmente em toda a página. Pode-se especificar um tamanho absoluto usando uma das seguintes palavras-chave:xx-small，x-small，small，medium，large，x-large，xx-large。

Tamanhos relativos são especificados usando um dos seguintes termos:smaller, ,larger。

body {
　　　　font-size: large;
}
h1　{
　　　　font-size: larger;
}
p {
　　　　font-size: smaller;
}

Definir o tamanho da fonte em pixels

Quando precisar de precisão em pixels, use valores em pixels (por exemplo12px,16px, etc.) é uma boa escolha para definir o tamanho da fonte. No entanto, os resultados podem variar de navegador para navegador, pois eles usam algoritmos diferentes para implementar efeitos semelhantes.

h1　{
　　　　font-size:　24px;
}
p {
　　　　font-size:　14px;
}

Pode ser definido o tamanho da fonte em pixels, mas essa abordagem não é muito flexível, pois os usuários não podem alterar o tamanho da fonte nas configurações do navegador. Por exemplo, usuários com visão ruim podem querer definir o tamanho da fonte para um valor maior do que o especificado. Portanto, ao criar designs, é melhor evitar usar valores em pixels para o tamanho da fonte.

Definir o tamanho da fonte em em

emé o tamanho da fonte do elemento pai.

emO valor é dinâmico. A unidadefont-sizepropriedade quando emigual ao tamanho da fonte aplicado ao pai do elemento.

Sefont-sizeDefina o valor 'a' no elemento 'body' como20px, então1em=20pxe2em=40px。

Se você não configurar o tamanho da fonte em nenhum lugar da página, ele será o valor padrão do navegador, que é16px. Portanto, o valor padrão é1em=16pxe2em=32px。

h1　{
　　　　font-size:　2em;　　　　/*　32px/16px =2em　*/
}
p {
　　　　font-size: 0.875em;　　　　/*　14px/16px = 0.875em　*/
}

Usar a combinação de porcentagem e em

Uma solução para implementar efeitos semelhantes em todos os navegadores éfont-sizeUma técnica popular para definir o corpo do elemento como porcentagem éfont-sizeDefinir o body como62.5%（isto é, padrão16px62.5％), equivalente a10px ou 0.625em.

Agora, você pode definirfont-sizeAtravés de qualquer elemento que usar a unidade em, há uma conversão memorável fácil.pxatravés10Os valores são10px =1em，12px =1.2em，14px =1.4em，16px =1.6emEtc. Veja o exemplo a seguir:

body {
　　　　font-size:　62.5%;　　　　/*　font-size　1em =　10px　*/
}
p {
　　　　font-size:　1.6em;　　　　/*　1.6em =　16px　*/
}

Grossura da Fonte

font-weightA propriedade especifica a grossura ou negrito da fonte.

font-Os valores possíveis da propriedade style são:normal，bold，bolder，lighter，100，200，300，400，500，600，700，800，900einherit。

• Numérico100- 900Especificar a grossura da fonte, onde cada número representa uma grossura mais escura do que a anterior.400enormal＆700igualbold。

• dobolderelighterEnquanto outros valores são valores de peso de fonte absolutos que são relativos ao peso da fonte herdado.

p {
　　　　font-weight: bold;
}

Devido ao fato de que a maioria das fontes só podem ser usadas com pesos limitados. Normalmente, elas são apenasNormaleExibição em NegritoSe a fonte não estiver disponível no peso especificado, será escolhida uma fonte substituta que seja o peso mais próximo disponível.

Variedade de Fontes

font-variantA propriedade permite exibir o texto em uma forma de maiúsculas especial.

Letras Maiúsculas e Minúsculas ouLetras Maiúsculas e MinúsculasDiferem ligeiramente das letras maiúsculas comuns, onde as letras minúsculas são exibidas como versões menores das letras maiúsculas correspondentes.

font-variantOs valores possíveis da propriedade sãonormal，small-capseinherit。

p {
　　　　font-variant: small-caps;
}