Em html, o tamanho da fonte desempenha um papel importante. Permite chamar a atenção do usuário para informações importantes postadas na página do site. Embora não apenas o tamanho das letras seja importante, mas também sua cor, espessura e até família.
Tags e atributos ao trabalhar com fontes html
A linguagem de hipertexto possui um grande conjunto de ferramentas para trabalhar com fontes. Afinal, a formatação de texto é a principal tarefa do html.
O motivo da criação da linguagem HTML foi o problema de exibição das regras de formatação de texto pelos navegadores.
Considere as tags que são usadas para trabalhar com fontes em html e seus atributos. A principal é a etiqueta . Usando os valores de seus atributos, você pode definir várias características de fonte:
- color - define a cor do texto;
- size – tamanho da fonte em unidades arbitrárias.
Um valor de atributo positivo de 1 a 7 é suportado.
- face - usado para definir a família de fontes do texto a ser usado dentro da tag . Vários valores são suportados, separados por vírgulas.
Apenas o texto localizado entre as partes da tag de fonte emparelhada é formatado. O restante do texto é exibido na fonte padrão.
Também em html existem várias tags emparelhadas que definem apenas uma regra de formatação. Esses incluem:
- - define a fonte em negrito em html. Marcação semelhante em ação ao anterior;
- - o tamanho é maior que o padrão;
- - tamanho de fonte menor;
- - texto em itálico (itálico). Tag semelhante ;
- — texto sublinhado;
- riscado;- — exibir texto apenas em letras minúsculas;
- - em maiúsculas.
texto simples
Miniatura
Miniatura
Mais do que o normal
Menos do que o normal
Itálico
Itálico
Com sublinhado
Tachado
Recursos de atributo de estilo
Além das tags descritas, existem várias outras maneiras de alterar a fonte em html . Uma delas é usar o atributo de estilo genérico. Usando os valores de suas propriedades, você pode definir o estilo de exibição da fonte:
1) font-family - a propriedade define a família da fonte. É possível enumerar vários valores.
A alteração da fonte em html para o próximo valor acontecerá se a família anterior não estiver definida no sistema operacional do usuário.
Sintaxe de escrita:
font-family: font-name [, font-name[, ...]]
2) tamanho da fonte - o tamanho é definido de 1 a 7. Essa é uma das principais maneiras de aumentar a fonte em html.
Sintaxe de escrita:
font-size: tamanho absoluto | tamanho relativo | valor | interesse | herdar
Você também pode definir o tamanho da fonte:
- Em pixels;
- Em termos absolutos ( xx-pequeno, x-pequeno, pequeno, médio, grande);
- Em porcentagens;
- Em pontos (pt).
tamanho da fonte: 7
tamanho da fonte: 24px
Tamanho da fonte: extragrande
tamanho da fonte: 200%
tamanho da fonte: 24pt
3) estilo da fonte - define o estilo da fonte. Sintaxe:
estilo de fonte: normal | itálico | oblíquo | herdar
Valores:
- normal - ortografia normal;
- itálico - itálico
- oblíqua - fonte com inclinação para a direita;
- herdar - herda a grafia do elemento pai.
Um exemplo de como alterar a fonte em html usando esta propriedade:
estilo da fonte: herdar
estilo da fonte: itálico
estilo de fonte: normal
estilo de fonte: oblíquo
4) font-variant - converte todas as letras maiúsculas em maiúsculas. Sintaxe:
variante de fonte: normal | versaletes | herdar
Um exemplo de como alterar a fonte em html com esta propriedade:
variante de fonte: herdar
variante de fonte: normal
font-variant: small caps
5) peso da fonte - permite definir a espessura da escrita do texto (saturação). Sintaxe:
peso da fonte: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900
Valores:
- bold - define a fonte html para negrito;
- bolder - mais bold em relação ao normal;
- mais leve - menos saturado em relação ao normal;
- normal - ortografia normal;
- 100-900 - define a espessura da fonte em termos numéricos.
intensidade da fonte: Negrito
peso da fonte: mais ousado
peso da fonte: mais leve
peso da fonte: normal
peso da fonte: 900
peso da fonte: 100
propriedade da fonte e cor da fonte html
Font é outra propriedade de contêiner. Internamente, combinou os valores de várias propriedades projetadas para alterar fontes. Sintaxe da fonte:
fonte: font-size font-family | herdar
Além disso, as fontes usadas pelo sistema nos rótulos de vários controles podem ser definidas como um valor:
- legenda - para botões;
- ícone - para ícones;
- cardápio - cardápio;
- caixa de mensagem - para caixas de diálogo;
- small-caption - para pequenos controles;
- barra de status - fonte da barra de status.
fonte: ícone
fonte: legenda
fonte: menu
fonte: caixa de mensagem
pequena legenda
fonte: barra de status
fonte: itálico 50px negrito "Times New Roman", Times, serif
Para definir a cor da fonte em html, você pode usar a propriedade color. Ele permite que você defina a cor, tanto com uma palavra-chave quanto no formato rgb. E também na forma de um código hexadecimal.
Uma capitular é a primeira letra de um parágrafo, maior que o resto, e colocada de forma que sua parte superior fique no nível da primeira linha do parágrafo. Na imagem você pode ver um exemplo de uma letra inicial embutida no texto.
A propósito, o WordPress tem um plugin especial (wordpress.org/extend/plugins/drop-caps) que permite criar automaticamente embutidos no texto (e deslocados para baixo) letras maiúsculas. Maravilhoso! No entanto, e se você não quiser usar o plug-in (tenho certeza que não) e você só precisar colocar algumas postagens e talvez um local específico?
A boa notícia é que você não precisa de um plugin para criar letras maiúsculas, tudo que você precisa é um pouco de CSS e uma tag span. Abra seu arquivo css e adicione o seguinte código:
Span.dropcaps ( font-family: Georgia, serif; color: #ccc; font-size: 46px; float: left; font-weight: 400; line-height: 1em; margin-bottom: -0.4em; margin-right : 0,09em; posição: relativa; )
Algo assim. Claro, você precisará de um estilo que corresponda ao seu design e texto. Por exemplo, os valores da propriedade: font-size , margins e line-height precisarão ser ajustados com base em seu design e texto.
tag span
Para que o estilo seja aplicado à letra maiúscula do texto, é necessário “embrulhar” a letra maiúscula em uma tag span e prescrever a classe apropriada.
UMA
Pseudo elemento: primeira letra
Você também pode estilizar o primeiro caractere no texto usando o pseudo-elemento :first-letter. No entanto, um número limitado de propriedades pode ser aplicado ao pseudoelemento :first-letter: são propriedades relacionadas a fonte, cor, plano de fundo, borda, margem e preenchimento. Outra coisa a notar é que o pseudo-elemento :first-letter não funcionará em navegadores mais antigos.
P:first-letter ( font-family: Georgia, serif; color: #ccc; font-size: 46px; float: left; font-weight: 400; line-height: 1em; margin-bottom: -0.4em; margin -direita: 0,09em; posição: relativa; )
Aqui, de fato, alguns métodos de edição letras maiúsculas com CSS.
letras maiúsculas CSS ajudam a quebrar a monotonia do mesmo tipo de desenho, cujos textos parecem iguais do começo ao fim.
Cartas antes e agora
Os cronistas usavam letras maiúsculas em manuscritos manuscritos, alguns dos quais datam do século V. As letras maiúsculas continuaram a ser usadas do século VIII ao XV, quando as prensas tornaram possível levar a impressão a um nível industrial. Tanto as letras maiúsculas manuscritas quanto as impressas foram colocadas no início do texto. Muitas vezes, eles eram decorados com um padrão decorativo localizado ao redor da carta.
As letras levantadas e abaixadas ainda estão em uso hoje. Eles podem ser encontrados em jornais, revistas e livros, bem como em impressão digital. As letras em relevo são às vezes chamadas de alongadas. Eles são colocados alinhados com a parte inferior do texto que os segue. As letras soltas são colocadas alinhadas com a parte superior do texto, às vezes em uma camada atrás do corpo principal do conteúdo do texto, ou o restante do texto as envolve.
As letras em relevo são muito mais fáceis de definir, pois ficam alinhadas com o restante do texto e geralmente não precisam alterar a quebra das margens externas. Letras omitidas requerem um ajuste mais fino. Será mais fácil para você lidar com isso se você primeiro entender como os caracteres levantados são tratados.
Usando aulas
Designers que já entendem de CSS sabem como criar uma classe CSS separada para a primeira letra maiúscula.
O código CSS para o elemento de parágrafo e a classe que cria a carta ficaria assim:
p ( font-size:20px; font-family: Georgia, "Times New Roman", Times, serif;) .myinitialcaps (font-size:48px; font-family: Didot;)
E o código HTML ficará assim:
O que nos dá:
Parece muito fácil? Na verdade, você terá que fazer ajustes dependendo das letras em relevo específicas, pois cada letra maiúscula requer kerning especial. Depois de escolher uma fonte para as letras em relevo e para o corpo do texto, você precisa criar classes separadas para cada letra em relevo. No abaixo CSS class.myinitialcapsi a margem à direita é negativa para reduzir a distância entre I e n .
Myinitialcapsi(font-size:48px; font-family: Didot; margin-right:-1px;)
Neste caso, há algum espaço extra entre o “I” e o “n”.
ncluir uma nova classe com margem negativa a aproxima.
Dependendo da resolução da tela no exemplo acima, I e n podem parecer que se fundiram. Isso se deve às serifas nas extremidades das letras. Portanto, antes de escolher seus estilos CSS finais, teste seu site em diferentes dispositivos para ver como o texto em CSS em maiúsculas fica neles.
Cotações e outros casos especiais
Você pode aumentar não apenas as letras no início do texto. Você pode implementar outra classe para criar uma versão maior das aspas que aparecerão ao lado da letra. No nosso caso, nem a classe de letra com tamanho de 48 nem a classe de texto de 20 pixels são adequadas para aspas. Em vez disso, será algo entre - 30 pixels. Movemos as aspas para baixo em 4 pixels para alinhá-las opticamente com I :
Myinitialcapsq (tamanho da fonte:30px; família da fonte: Didot; float:left; margin-top:4px;)
ncluir” uma nova classe com uma margem negativa a aproxima.
Você precisa ter muito cuidado ao especificar cada uma das letras maiúsculas do CSS junto com as aspas para que seu kerning e alinhamento correspondam à marcação circundante. Por exemplo, a letra T precisará ser movida para a esquerda, um pouco além da borda do parágrafo, para que sua linha transversal se encaixe visualmente no layout. Você precisará fazer o mesmo com letras redondas como C, G, O e Q. Este exemplo usa tamanhos de fonte 20, 30 e 48. Mas você precisará ajustar os tamanhos com base nas fontes específicas que você escolheu. Assim como os tamanhos e resoluções das telas em que o site será visualizado.
Pseudoelementos e pseudoclasses
Usando o pseudo-elemento CSS, você pode facilmente criar uma letra em relevo adicionando ::first-letter ao elemento de parágrafo. Use :primeira letra ( com um cólon) para navegadores legados:
p ( font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:2em; padding-bottom:1.2em;) p::first-letter ( font-size: 3.6em; text-transform: maiúsculas; font-family: "Monotype Bernard Condensed", serif; margin-right:0.03em;) .initialb (margin-right:-0.1em;) .initialn (margin-right:-0.15 em ;)
Um código HTML que contém classes CSS que levam em conta o kerning das letras N e B ficará assim…
Uma letra inicial, com a primeira letra sendo uma letra maiúscula.
Com uma quebra de linha, a próxima linha não tem limite inicial.
n Observe na fonte HTML como a primeira letra, não uma letra maiúscula no HTML, é dimensionada para o tamanho inicial de 3,6em. Legal, hein?
B ut com um retorno duro, e um novo parágrafo iniciado, outro limite inicial sempre é criado. Você pode estar se perguntando Como vou contabilizar isso? Eu deveria ter um limite inicial no início de um parágrafo muito novo? Bem, você poderia. Mas, você quer que pareça dessa maneira, e absolutamente tem que parecer dessa maneira?
A primeira letra maiúscula de um parágrafo é convertida em uma letra.
A primeira letra após uma quebra de linha não será maiúscula.
O Observe que na fonte HTML a primeira letra não é maiúscula, mas é convertida em um caractere de 3,6em.
O No entanto, mesmo após uma quebra de linha forçada, sempre é criada uma letra no início de cada novo parágrafo. Você pode se perguntar: Como posso levar isso em consideração? Preciso adicionar letras para todos esses casos? Bem, você pode. Mas é necessário?
Mesmo com os benefícios que os pseudo-elementos fornecem, tivemos que adicionar muito código para definir classes separadas para lidar com problemas de kerning e padding. Mas esse método converterá a primeira letra de cada novo parágrafo em maiúsculas CSS. Para alguns, pode não ser adequado, pois não é necessário converter a primeira letra de cada parágrafo.
Combinando pseudoclasses e pseudoelementos para criar um layout inteligente
Adicionar a pseudo-classe :first-child ajuda a resolver o problema de conversão desnecessária das primeiras letras:
p ( font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:2em; padding-bottom:0.5em;) p:first-child::first-letter ( font-size: 3.6em; text-transform: maiúsculas; font-family: "Monotype Bernard Condensed", serif; margin-right:0.03em;)
Combinando este código com HTML:
A primeira letra que é definida como first-child é a única letra que converte em uma capitular levantada nesse método.
Como apenas a letra definida como first-child é convertida, observe que este exemplo difere do anterior sem first-child. Além disso, não convertemos as primeiras letras após o início de um parágrafo e após uma quebra de linha forçada. Isso parece mais elegante do que o layout quando convertemos todas as primeiras letras dos parágrafos.
A vantagem de usar pseudoclasses é a capacidade de lidar com vários casos especiais. E as desvantagens? Existem muitas pseudoclasses diferentes, e elas podem ser combinadas de tantas maneiras que podem fazer sua cabeça girar. Por exemplo, as pseudo-classes :first-child e :first-of-type podem produzir os mesmos resultados. Você também pode aplicar uma pseudoclasse não apenas a um parágrafo, mas também a elementos section ( font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:3em;) section>p:first-child:first-letter ( font-size: 4em; text-transform: maiúsculas; font-family:Didot, serif; margin-right:5px;) E junto com o HTML: No início da seção, a primeira letra é definida como uma letra maiúscula levantada. E um novo parágrafo... Se você quiser experimentar, pode explorar vários métodos além de :first-child e :first-of-type . Por exemplo, como :nth-of-type ou :nth-of-child , para ver como certos tipos de pseudoclasse podem ser usados para texto de capitalização CSS. Se você seguir os princípios descritos neste artigo ou começar a se aprofundar, depois de aprender a trabalhar com as pseudoclasses CSS first-child , :first-of-type e :first-letter , você poderá aplicar corretamente para elementos HTML. ou mais sobre letras e formatação HTML CSS O capítulo contém exemplos formatação de letras da área Marcação de hipertexto. No menu à esquerda você encontrará tutoriais HTML modernos e muito detalhados. Eles permitirão que você crie seu site do zero enquanto olha um pouco mais baixo. Pode ser interessante. Era da sociedade da informação A humanidade entrou em um novo período de seu desenvolvimento, no qual as tecnologias da informação e das redes desempenham um papel extremamente importante. Vivemos na era da sociedade da informação, caracterizada pelo rápido desenvolvimento das tecnologias de informação e telecomunicações. Com o advento do computador e da Internet, grandes mudanças começaram. O computador e a Internet estão pressionando a sociedade a formular novas normas de comportamento, regras e ideais. A Internet é para a nova geração o que a televisão foi para a geração anterior. Mas a Rede Global é muito mais funcional do que a televisão, pois oferece a oportunidade de fazer compras, vendas, ofertas de comunicação e diversas formas de autoexpressão, como criar páginas e sites pessoais. Exemplo de formatação de carta: Resultado do formato: Um exemplo de texto livre escrito em letras maiúsculas Um exemplo de texto livre escrito em letras maiúsculas Tag - definir letras maiúsculas(Estas tags não são suportadas em HTML 5). css code style="text-transform:maiúsculas" - define letras maiúsculas.
Em outras palavras, letras maiúsculas são definidas com CSS atributos. Exemplo de formatação de carta: Resultado do formato: Texto HTML personalizado e espaçamento entre letras CSS 2px Descrição dos atributos e valores: css code style="letter-spacing:2px" - define Espaçamento entre letras CSS.
Procure exemplos de formatação semelhantes no menu à esquerda. Obrigado pela sua atenção. Permite alterar o caso das letras do texto. O valor padrão é none , o que não afeta o texto. O caso do texto permanece o mesmo. Os valores maiúsculas e minúsculas convertem caracteres em maiúsculas e minúsculas, respectivamente. Se você especificar capitalize , somente os primeiros caracteres de cada palavra serão capitalizados. Herdar herda o valor do pai. Este parágrafo tem a propriedade Text-transform definida como minúscula, o que significa que todas as letras estarão em minúsculas. E este último parágrafo tem uma propriedade text-transform aplicada com a propriedade CAPITALIZE. As primeiras letras de cada palavra serão maiúsculas, e somente elas.Letras HTML: maiúsculas e minúsculas
Letras HTML e espaçamento CSS entre elas
Exemplo
h3 ( text-transform: maiúsculas; ) .lowercase ( text-transform: minúsculas; ) .capitalize ( text-transform: maiúsculas; )
Este é o título. Tem uma propriedade text-transform aplicada com um valor de maiúsculas. Todos os caracteres serão maiúsculos.