19.12.2024

Mudando o Peso da Fonte no Bootstrap: Classes Predefinidas

Resposta Rápida

No Bootstrap, você pode usar classes auxiliares como .fw-bold para texto negrito, .fw-semibold para semi-negrito e .fw-normal para peso normal da fonte para definir o peso da fonte:

<strong class="fw-bold">Texto em negrito em toda sua glória!</strong>
<strong class="fw-semibold">Texto semi-negrito - uma escolha ideal</strong>
<span class="fw-normal">Texto regular, calmo e moderado</span>

Isso ajuda a manter o CSS organizado e estruturado.

Classes Auxiliares do Bootstrap para Controlar o Peso do Texto

O Bootstrap oferece uma variedade de níveis de peso da fonte. A quarta versão do framework introduziu classes como .font-weight-bold, .font-weight-normal e .font-weight-light, projetadas para simplificar e realçar a ênfase do texto, mantendo o estilo e a formatação do Bootstrap.

Sem Necessidade de Criar Suas Próprias Classes

Como o Bootstrap oferece uma ampla gama de classes prontas, não há necessidade de complicar as coisas criando suas próprias classes CSS, como .font-bold. Em vez disso, você pode aplicar classes existentes, economizando tempo e evitando inconsistências no design.

Lembre-se do antigo ditado: não conserte o que não está quebrado.

Controle Simples: Gerenciando o Peso do Texto com Classes do Bootstrap

Para aplicar rapidamente texto negrito, a tag <strong> é ideal. No entanto, se você precisar de controle total sobre todos os níveis de peso, utilize classes do Bootstrap como .fw-light, .fw-normal, .fw-bold e .fw-bolder. Elas ajudarão a transmitir as nuances da sua mensagem textual.

Visualização

Pense no conjunto de classes do Bootstrap para controlar o peso da fonte como uma caixa de ferramentas universal (🧰), onde cada ferramenta corresponde a um nível de peso específico:

| Classe do Bootstrap | Ferramenta      | Nível de Peso    |
|---------------------|------------------|------------------|
| .fw-light           | 🪶 Pena           | Leve             |
| .fw-normal          | 📄 Folha         | Normal           |
| .fw-bold            | 🔨 Martelo       | Negrito          |
| .fw-bolder          | 🛠️ Marretão       | Extra Negrito    |

Usar esse conjunto de classes Bootstrap vai enriquecer significativamente sua tipografia.

Mantendo a Consistência Visual

A consistência é a chave para um design bem-sucedido. Classes predefinidas do Bootstrap ajudam a alcançar isso ao minimizar as discrepâncias visuais que podem surgir do uso de classes personalizadas. As classes no Bootstrap são criadas por profissionais que realizam testes rigorosos para garantir uma percepção visual perfeita.

Classes Personalizadas: Quando Necessárias

Às vezes, as classes padrão do Bootstrap podem não se adequar a projetos específicos. Nesses casos, criar classes CSS personalizadas pode ser justificado, como:

/* Quando 300 é o novo peso normal */
.font-weight-300 {  
  font-weight: 300;
}

Use classes personalizadas com cautela, apenas quando absolutamente necessário:

<p class="font-weight-300">A leveza do verão</p>

Recursos Úteis

1. Tipografia · Bootstrap v5.1 — Documentação oficial sobre como gerenciar tipografia e classes de peso da fonte no Bootstrap.
2. Texto · Bootstrap v5.1 — Classes comprovadas para controlar estilo e peso do texto.
3. Bootstrap 5 Cheat Sheet by ThemeSelection | Classes — Lista abrangente de classes do Bootstrap 5 focadas em classes de peso da fonte.
4. font-weight - CSS: Folhas de Estilo em Cascata | MDN — Artigo da Mozilla sobre a propriedade CSS font-weight.
5. font-weight | CSS-Tricks — Guia detalhado sobre a propriedade font-weight e seu uso.
6. Bootstrap 5 alpha! | Blog do Bootstrap — Visão geral dos recursos do Bootstrap 5, incluindo tipografia e classes utilitárias.

Video

Navigation