Introdução às propriedades da fonte CSS
CSS Font Properties fornece um esboço para as propriedades da fonte do CSS. O Cascading Style Sheets, mais conhecido como CSS, é uma linguagem de design fácil, projetada para simplificar a aparência das páginas da Web em produção. O CSS lida com a aparência e experimenta parte de uma página da web. Ao aplicar CSS, você pode controlar a cor com o texto, o estilo das fontes, o espaçamento entre parágrafos, como as colunas serão dimensionadas e, apresentadas, as coisas que as imagens ou cores de plano de fundo estão sendo usadas, estilos de layout e variantes exibidas. vários dispositivos e tamanhos de tela, além de vários outros efeitos. O CSS é simples de entender e compreender, mas oferece controle efetivo da demonstração do documento HTML. Na maioria das vezes, o CSS geralmente é combinado com linguagens de marcação HTML ou simplesmente XHTML.
- CSS refere-se às folhas de estilos em cascata.
- O CSS identifica como os elementos HTML devem ser mostrados na tela, no papel e também consistem em mídia.
- CSS economizará muito trabalho. Ele pode controlar o layout de várias páginas da Web, tudo de uma vez.
- Folhas de estilo externas serão mantidas em arquivos CSS.
Explicar diferentes propriedades da fonte CSS
Abaixo estão as diferentes propriedades da fonte CSS:
Coleção de fontes: no CSS, você pode selecionar a fonte que deseja usar para o texto dentro de um elemento específico, definindo a propriedade da família de fontes em uma regra de estilo, mas antes de entrar em detalhes da família de fontes, teremos que entender como usar nomes de fontes porque, quando criamos uma página da web, nem sempre sabemos o que nosso usuário usará para visualizar a página da web.
Definir as cinco categorias de fonte no CSS de padrões
- A primeira dessas categorias são as categorias de fontes serif. Um exemplo de fonte específica que se encaixaria nessa categoria seria Times ou Times New Roman, além de Baskerville, Century e Schoolbook
- Esses são nomes de fontes específicos, como Baskerville, Century e Schoolbook; esses são os nomes das fontes que você pode ver em uma lista suspensa ao selecionar uma fonte dentro de um processador de texto porque o processador de texto sabe exatamente o que está instalado na sua máquina. Mas, para CSS, todas essas fontes se enquadram na categoria de fontes serif.
- Há também um conjunto de fontes sem serifa e uma fonte popular que se enquadra nessa categoria é Arial. Caso você não saiba, serif, então existem pequenas linhas no final de uma carta, elas fazem as letras parecerem um pouco chiques e embelezadas. Você pode ver a diferença nas letras R abaixo.
- OR à esquerda é um Arial, que é sem serifa, literalmente sem os enfeites, enquanto o R à direita é Times New Roman e contém alguns pequenos traços aqui e ali. De um modo geral, as pessoas acham as fontes sem serifa mais fáceis de ler em um display LCD e LED.
- Também existem categorias para fontes cursivas, que se parecem um pouco com letras manuscritas e fontes de fantasia, que podem se parecer com qualquer coisa, mas a maioria dos designs não usa muito essas fontes porque elas podem ser difíceis de ler e também um pouco imprevisível.
- Finalmente, há uma categoria para fontes monoespaçadas. Essas são as fontes que dão espaçamento igual a todas as letras e provavelmente essa é a fonte que você deseja usar no seu editor de texto que você usa para criar CSS e também a fonte que você deseja usar em uma página da web para exibir o código em uma letra. página da web.
Resultados no navegador da web:
Resultado:
Resultados no navegador da web:
Resultado:
Resultados no navegador da web:
Resultado:
Resultados no navegador da web:
Resultado:
Resultados no navegador da web:
Resultado:
Famílias de fontes
Abaixo a explicação mostra as famílias de fontes:
- Muitos designs CSS definirão a propriedade da família de fontes com o nome de uma fonte específica como Arial. No entanto, sempre existe a chance de que a fonte específica que você deseja, como Arial, não esteja disponível no sistema de um determinado usuário. E esse é um dos motivos pelos quais você pode especificar quantas fontes desejar em uma lista delimitada por vírgulas e o navegador usará o primeiro que corresponder.
De acordo com a captura de tela acima, temos a 1ª opção, a 2ª opção e, se nenhuma dessas fontes estiver disponível, voltaremos ao sans-serif genérico, porque mesmo que o navegador não possua nenhuma das outras fontes, ele deve fornecer uma fonte padrão para essa categoria. Obviamente, isso levanta a questão de quais fontes são seguras para usar no design da web. De um modo geral, você não pode errar com Arial, Verdana, Times e Courier, mas também fornecemos uma lista de outras fontes geralmente disponíveis em várias plataformas.
- Helvetica é uma fonte comum que você vê listada em várias folhas de estilo, mas Helvetica não está disponível no Windows. O Windows fornece o Arial.
- A família de fontes é uma dessas propriedades herdadas. Portanto, se o definirmos no nível do corpo, os parágrafos, os divs e as âncoras que estão dentro desse corpo escolherão a família de fontes por padrão, a menos que o substituamos. Por exemplo, esse cabeçalho aqui, essa tag h1, está herdando a família de fontes do corpo, mas não precisa ser assim.
Resultado:
Podemos dizer que, para o h1, a família de fontes deve ser Times New Roman, Serif e se atualizar as páginas da Web, a mudança refletiu.
Estilos e tamanho de fonte
Abaixo das informações detalhadas sobre o tamanho e o estilo da fonte:
- Outra característica das fontes que você deseja controlar é o tamanho e, ao definir o tamanho, primeiro você terá que escolher entre unidades absolutas ou relativas.
- Tamanhos absolutos são comumente especificados em pixels, oferecendo um controle muito preciso sobre o tamanho da fonte.
- Unidades relativas, como porcentagens ou palavras-chave maiores ou menores ou ems, permitem definir um tamanho de fonte com base em alguma linha de base; portanto, 2em seria o dobro do tamanho da linha de base e 0. 8em seria 80% da linha de base. Atualmente, muitas pessoas usam o ems para o tamanho relativo da fonte. Uma razão é que os tamanhos relativos permitem que o usuário aumente o texto usando o navegador e isso é algo que eles podem querer fazer, porque o texto é difícil de ver. Tamanhos relativos permitem que isso funcione.
Resultados no navegador da web:
Resultado:
- Algumas das outras propriedades de uma fonte que você pode definir são o estilo da fonte para forçar a fonte em itálico ou o peso da fonte para tornar a fonte em negrito. E a propriedade variante de fonte trará um tipo de letra que usa apenas letras maiúsculas.
Resultados no navegador da web:
Resultado:
- A primeira coisa que queremos fazer é enfatizar um pouco esse elemento h1. Ele precisa ser um elemento h1 porque é o cabeçalho principal desta página, mas é um pouco grande demais para o nosso ponto de vista. Então, deixe-me definir o tamanho da fonte como 1.2ems. Isso diminuirá um pouco isso, porque normalmente uma tag h1 vai muito além dos 1, 2ems. A próxima questão que queremos abordar é a lista de códigos aqui. Queremos que seja uma fonte monoespaçada e existem alguns desejos diferentes para conseguir isso. Para código conforme abaixo.
Resultados no navegador da web:
Resultado:
Resultados no navegador da web:
Resultado:
Aqui queremos usar a pré tag, o que significa que este é um texto pré-formatado e não tente manipulá-lo.
Resultados no navegador da web:
Resultado:
São propriedades abreviadas do estilo da fonte. Como itálico no estilo da fonte, tamanho da fonte 0.9em e serifa da família de fontes;
Resultados no navegador da web:
Resultado:
Conclusão
Como especificar fontes usando CSS e a diferença entre uma fonte específica como Arial e as categorias genéricas de fontes da Web como serif e sans-serif. Também gerenciamos o dimensionamento e os prós e contras de tamanhos relativos e tamanhos absolutos; finalmente, usamos as propriedades e aprendemos a carregar fontes com a família de fontes.
Artigos recomendados
Este foi um guia para as propriedades de fonte CSS. Aqui discutimos diferentes propriedades de fontes CSS e cinco categorias de fontes nos padrões CSS com resultados e saídas do navegador. você também pode ler nosso outro artigo sugerido para saber mais-
- O que é CSS?
- Introdução ao CSS
- Carreira em CSS
- Vantagens do CSS