Como utilizar melhor as fontes em CSS?

Este artigo irá apresentá-lo a um tópico simples, mas importante, que é Fontes em e também fará uma demonstração prática sobre o assunto. As dicas a seguir serão abordadas neste artigo,

• Fontes em CSS
• Atributos em fonte CSS
• atributo de estilo de fonte
• atributo de peso da fonte
• atributo de tamanho de fonte
• atributo font-family

Os sites carregam conteúdo na forma de imagens, áudio, vídeo e conteúdo textual. No entanto, a maioria das páginas da web ainda depende do texto como formato predominante. Isso ocorre porque o texto simples oferece algumas vantagens muito significativas.

Legibilidade não intrusiva - você deseja verificar a pontuação da partida mais recente enquanto estiver no escritório. Obviamente, você quer uma atualização de texto rápida, não um vídeo barulhento!
Requisito de largura de banda de rede baixa - o conteúdo de texto pode ser carregado mesmo em áreas de conectividade de Internet ruim, enquanto rich media não pode.
Fácil de pesquisar - os sites sempre ficam de olho na facilidade com que seu conteúdo é notado nos mecanismos de pesquisa. O texto é mais adequado para isso, pelo menos até que a IA domine completamente a Internet!

Ao formatar o conteúdo do texto, os web designers têm apenas alguns parâmetros para trabalhar - fonte, alinhamento, realce e cor. Selecionar a fonte certa para o seu texto é uma escolha crítica. A prática padrão é usar tags de fonte CSS para definir fontes para texto em páginas HTML.
Se você é novo no mundo da programação HTML, faça um tour básico para iniciantes aqui. Você pode querer ler sobre os fundamentos do CSS antes de continuar a aprender sobre as fontes CSS.

Para obter um tutorial de CSS abrangente, visite Edureka CSS Tutorial For Beginners. Você receberá um excelente aviso sobre como o CSS deve ser usado para aprimorar o design da web em HTML.

Continuando com este artigo sobre Fontes em CSS

Fontes em CSS

Uma fonte é basicamente um conjunto de características associadas à exibição de texto. As fontes são diferenciadas umas das outras por seu tamanho, recuo, largura, inclinação e assim por diante. Vamos começar com uma exibição de texto básica em fontes diferentes.

c ++ stl sort

Exemplo 1: títulos e parágrafos em várias fontes

body {background-color: lightblue} h1 {font: bold 30px arial, sans-serif} h2 {font: 15px verdana} p {font: italic bold 12px / 30px Georgia, serif}
O parágrafo em itálico negrito fonte Georgia
 

 Exemplo 1: saída 

No Exemplo 1, temos 3 linhas diferentes de texto em fontes diferentes. Você notaria que cada uma das fontes varia em suas larguras de caracteres, recuos, etc.

Continuando com este artigo sobre Fontes em CSS

Atributos em fonte CSS

Fontes CSS têm 4 atributos principais - estilo, peso, tamanho e família. O atributo de estilo denota normal ou itálico. O peso mostra a fonte como simples ou em negrito. O peso também pode ser expresso numericamente. O tamanho é simplesmente o tamanho da fonte, maior o tamanho, maior a aparência do texto. Existem várias maneiras de atribuir o tamanho da fonte. Descrições detalhadas são fornecidas nas seções posteriores. O atributo family é para atribuir o nome da fonte ao texto.

No Exemplo 1, usamos nomes de fontes diferentes para os títulos e o parágrafo. Sob as marcas h1 e p, vemos dois nomes de fontes listados, enquanto a marca h2 nomeia apenas uma fonte. Esta é a definição de família de fontes, mais sobre isso mais tarde.

Continuando com este artigo sobre Fontes em CSS

atributo de estilo de fonte:

Os dois estilos principais podem ser definidos são 'normal' e 'itálico'. O itálico deve ser cursivo por natureza com uma inclinação. Normal é a opção padrão que é direta. Há outra opção menos usada chamada 'oblíqua', que se assemelha à opção itálico na maioria das fontes. Você também pode definir o estilo para ‘herdar’ para que ele pegue o estilo da fonte de seu elemento pai.

Continuando com este artigo sobre Fontes em CSS

atributo font-weight:

Este atributo decide se a fonte deve parecer espessa ou fina. Pode ser definido como 'normal' ou 'negrito'. O valor padrão é normal. Este valor também pode ser definido como numérico. Peso de 400 representa normal e 700 é para negrito. Existem algumas outras configurações (variando de 100 - muito claro a 900 - muito negrito), mas elas não são suportadas por todas as fontes. Todas as opções de peso são mostradas no Exemplo 3.

Continuando com este artigo sobre Fontes em CSS

atributo font-size:

O atributo de tamanho pode ser definido de várias maneiras. Vamos listar essas maneiras abaixo.
● Valor enumerado como ‘médio’, ‘grande’. Na verdade, assim como os tamanhos das roupas, os valores podem variar de XX Pequeno a XX Grande!
● Definido em relação ao seu elemento pai, como 'maior' ou 'menor'.
● Porcentagem do tamanho do elemento pai.
● Defina como 'herdado' para adotar diretamente o tamanho do elemento pai.
● Como valor absoluto nas unidades de px (pixels), pt (pontos) ou cm (centímetro)
‘Médio’ é o valor padrão definido para este parâmetro.

Continuando com este artigo sobre Fontes em CSS

atributo font-family:

Em HTML, a família de fontes CSS serve para definir o nome da fonte. Você pode simplesmente colocar um único nome de fonte com a tag. Ou você pode atribuir vários valores como uma lista de famílias de fontes que define a prioridade na qual o navegador deve escolher a fonte.
A lista é priorizada da esquerda para a direita, na forma de um sistema de fallback. O primeiro valor se disponível é escolhido, ou o controle vai para o próximo, até que o final da lista seja alcançado. A família de fontes padrão é definida pelas preferências do navegador.
As famílias de fontes CSS são de 2 tipos - famílias genéricas e famílias de fontes.
● Famílias genéricas - com base em algumas características gerais, as fontes são agrupadas como 'serif', 'sans serif', 'monoespaçada', etc. Por exemplo, Sans serif significa fontes sem o estilo serif.
● Nomes de família - fontes pertencentes a hierarquias familiares específicas. Times, Arial, Courier são todas famílias de fontes e Times New Roman é um exemplo de fonte da família Times.
As várias opções de uso da família de fontes estão listadas no Exemplo 4 abaixo.

Alguns pontos comuns a serem observados

● Como várias outras propriedades CSS, algumas das configurações de fonte variam em diferentes navegadores. Verifique o suporte do navegador antes de usar algumas configurações de fonte raras.
● Você pode definir as configurações de fonte separadamente usando as marcas individuais de estilo da fonte, espessura da fonte, etc. Alternativamente, se você preferir código compacto, você pode usar o atributo de fonte abreviada com todos os valores na mesma linha.
● Em cenários de usuário em que você deseja que o tamanho da fonte varie dependendo do tamanho do navegador, há uma configuração de tamanho de fonte útil chamada configuração de fonte responsiva. Ele pode ser definido com uma unidade vw, que significa “largura da janela de visualização”. Dessa forma, o tamanho do texto seguirá o tamanho da janela do navegador.

Espero que você tenha encontrado as informações que procurava em Fonts In CSS. Compartilhe sua experiência conosco na seção de comentários abaixo. Feliz design!

Se você estiver interessado em aprender mais sobre desenvolvimento web, confira o por Edureka. O Treinamento de Certificação de Desenvolvimento Web ajudará você a aprender como criar sites impressionantes usando HTML5, CSS3, Twitter Bootstrap 3, jQuery e APIs do Google e implantá-lo no Amazon Simple Storage Service (S3).