Diretório de artigos
Fontes CSS
As propriedades da fonte CSS podem definir a família da fonte, tamanho, negrito, estilo (como itálico) e variações (como versalete) do texto. Especificamente, as propriedades da fonte CSS incluem o seguinte:
font-family: usado para definir o tipo de fonte.
font-size: usado para definir o tamanho da fonte.
font-weight: usado para definir o peso da fonte.
estilo da fonte: usado para definir o estilo da fonte, como itálico.
font-variant: usado para definir variações em versalete.
Usando essas propriedades, você pode criar uma variedade de estilos diferentes para o seu texto.
Diferença entre fontes com serifa e sem serifa
As diferenças entre fontes com serifa e sem serifa refletem-se principalmente nos seguintes aspectos:
- Legibilidade: As fontes serifadas são fáceis de identificar e, portanto, possuem alta legibilidade. Pelo contrário, a fonte sem serifa é mais atraente, mas no caso da leitura de texto, pode facilmente causar problemas no reconhecimento de letras, muitas vezes causando estresse de vaivém e confusão de linhas para cima e para baixo.
- O início e o fim dos traços das letras: a serifa enfatiza o início e o fim dos traços das letras, por isso é mais fácil identificar a continuidade dos traços das letras. Em contrapartida, o desempenho do sans-serif neste aspecto é fraco.
- Ênfase em palavras e letras: a serifa enfatiza uma palavra, não uma única letra. sans-serif, por outro lado, enfatiza letras individuais.
- Desempenho em fontes pequenas: Em fontes pequenas, a sans-serif geralmente é mais clara do que a serifada. Como as fontes em negrito pertencem a "sans-serif" (sans-serif) e as fontes Song pertencem a "serif" (serif), esta última será mais fácil de ser reconhecida pelo olho humano, por isso será mais fácil de ler durante a leitura. Confortável .
Em geral, serifa e sem serifa têm características próprias e ocasiões aplicáveis. serif é mais adequado para conteúdos e ambientes que exigem alta legibilidade, enquanto sans-serif é mais adequado para conteúdos e ambientes que exigem efeitos visuais exclusivos e um toque moderno.
Fontes CSS
Existem muitos atributos de fonte em CSS, incluindo fontes serif (Serif) e fontes sans-serif (Sans-serif).
As fontes serif têm um pequeno traço na borda de cada letra, criando uma sensação de forma e elegância, e são comumente vistas em jornais, revistas e livros. Por exemplo, Times New Roman e Times New Roman são exemplos de fontes serifadas.
As fontes sem serifa não têm esses pequenos traços, o que as torna mais modernas e minimalistas. Por exemplo, Helvetica e Arial são exemplos de fontes sem serifa, comumente encontradas em páginas da web.
Em CSS, você pode usar o atributo font-family para especificar a fonte do texto. Por exemplo, font-family: "Songti" significa definir o texto para a fonte Songti. Além da Dinastia Song, as fontes serifadas comuns também incluem Times New Roman, etc.
Por outro lado, fontes sem serifa comuns incluem Helvetica, Arial, etc. Além dessas fontes básicas, existem muitas outras fontes que podem ser usadas em CSS. Para obter detalhes, consulte informações relevantes sobre web design.
Família de fontes
Em CSS, as famílias de fontes referem-se aos tipos de fontes instaladas no seu computador, bem como aos estilos de fontes correspondentes.
Existem muitos tipos de famílias de fontes em CSS, incluindo cinco famílias de fontes comuns, como fontes serif, fontes sans-serif, fontes monoespaçadas, fontes cursivas e fontes fantasia.
Uma fonte serifada é uma fonte com decoração serifada, como Times New Roman, etc. Uma fonte sem serifa é uma fonte sem decoração com serifa, como Arial. Uma fonte monoespaçada é uma fonte em que cada letra e número ocupa o mesmo espaço, como Courier New, etc. Fonte cursiva é uma fonte de estilo manuscrito, como Brush Script, etc. A fonte Fantasy é uma fonte com efeito decorativo, como Comic Sans MS, etc.
Em CSS, você pode usar o atributo font-family para especificar a família da fonte, por exemplo:
p {
font-family: "Times New Roman", Times, serif;
}
Neste exemplo, se a fonte "Times New Roman" não estiver disponível no computador do usuário, o navegador tentará usar a fonte "Times". Se "Times" não estiver disponível, a fonte serif padrão será usada.
Além do atributo font-family, o CSS possui muitos outros atributos de fonte que podem ser usados para definir o estilo e o tamanho das fontes, como font-size, font-weight, font-style e outros atributos.
Estilo de fonte
Em CSS, os atributos de estilo de fonte incluem atributos como estilo de fonte e variante de fonte.
O atributo font-style é usado para definir o estilo da fonte, incluindo normal (estilo normal), itálico (estilo itálico) e oblíquo (estilo oblíquo). Entre eles, normal é o valor padrão, itálico significa usar itálico para exibir e oblíquo significa usar fontes em itálico para exibir.
A propriedade font-variant é usada para alternar entre versalete e texto normal. Seu valor pode ser normal (texto normal) ou versalete (letras minúsculas).
Aqui está um exemplo:
p {
font-style: italic;
font-variant: small-caps;
}
Neste exemplo, o texto do parágrafo será estilizado em itálico enquanto usa versalete para exibir certas letras ou palavras no texto.
tamanho da fonte
Em CSS, o tamanho da fonte refere-se ao tamanho da caixa de caracteres na fonte, que pode ser definido usando o atributo font-size. O valor deste atributo pode ser palavras-chave como "pequeno", "grande", "menor", "maior" etc., ou pode ser um valor mais px, em, rem ou% de unidades.
Por exemplo, para definir o tamanho da fonte de um parágrafo para 14px, você pode escrever:
p {
font-size: 14px;
}
Em aplicações práticas, o tamanho e a unidade de fonte apropriados podem ser selecionados de acordo com as necessidades.
Defina o tamanho da fonte em pixels
Em CSS, definir o tamanho da fonte em pixels pode ser conseguido por:
p {
font-size: 14px;
}
Neste exemplo, definimos o tamanho da fonte do parágrafo para 14 pixels. Você pode definir o tamanho da fonte de outros elementos de acordo com as necessidades reais.
Use em para definir o tamanho da fonte
Em é uma unidade relativa, geralmente calculada em relação ao tamanho da fonte do elemento pai. Em CSS, podemos usar em para definir o tamanho da fonte, por exemplo:
p {
font-size: 1em;
}
Neste exemplo, o tamanho da fonte do parágrafo será definido com o mesmo valor que o tamanho da fonte do elemento pai. Se o tamanho da fonte do elemento pai for 16 pixels, o tamanho da fonte do parágrafo também será 16 pixels.
Se quiser definir outros tamanhos de fonte, você pode atribuir um valor a em, por exemplo:
p {
font-size: 0.875em;
}
Neste exemplo, o tamanho da fonte do parágrafo será definido como 0,875 vezes o tamanho da fonte do elemento pai, que é 14 pixels.
Usar em para definir o tamanho da fonte tem muitas vantagens, como ser capaz de controlar facilmente o tamanho da fonte e, ao mesmo tempo, garantir que a fonte tenha a mesma aparência em monitores diferentes.
Use combinações de porcentagem e EM
Em CSS, você pode usar porcentagens e ems para definir o tamanho da fonte.
Por exemplo, se quisermos definir o tamanho da fonte de um parágrafo para 100% do tamanho da fonte do elemento pai, e se o tamanho da fonte do elemento pai for 16 pixels, então o tamanho da fonte do parágrafo será 16 pixels, podemos fazer isto:
p {
font-size: 1em; /* 以父元素的字体大小为基准 */
}
Se quisermos definir o tamanho da fonte de um elemento h1 para 200% do tamanho da fonte do elemento pai, e se o tamanho da fonte do elemento pai for 16 pixels, o tamanho da fonte desse elemento h1 será 32 pixels, podemos fazer isto:
h1 {
font-size: 2em; /* 以父元素的字体大小为基准 */
}
Usar porcentagens e ems juntos nos dá mais flexibilidade no controle do tamanho da fonte e garante que as fontes tenham a mesma aparência em monitores diferentes.
Propriedades da fonte CSS
O diagrama a seguir ilustra as propriedades da fonte CSS:
| Atributos | descrever |
|---|---|
| família de fontes | Especifica a família de fontes do texto |
| tamanho da fonte | Especifique o tamanho da fonte do texto |
| estilo de fonte | Especifique o estilo da fonte do texto, como itálico ou estilo normal |
| espessura da fonte | Especifique a espessura da fonte, como normal, negrito ou itálico |
| variante de fonte | Exibir texto em versalete ou fonte normal |
| cor | Definir cor do texto |