Como tornar minha fonte em negrito usando css?

249

Eu sou muito novo em HTML e CSS e estava me perguntando como poderia tornar minha fonte em negrito usando CSS.

Eu tenho uma página HTML simples que importa um arquivo CSS e posso alterar a fonte no CSS. Mas não sei como tornar a fonte em negrito, alguém pode me ajudar?

css 
— peter-b
fonte
6
Eu sugiro que você leia a especificação CSS2, ela fornece uma explicação muito completa do que você pode fazer e como fazê-lo. E também não está muito seco. w3.org/TR/CSS2
— Robert K
— Ejaz

Respostas:

76

Você pode usar o strongelemento em html, que é ótimo semanticamente (também é bom para leitores de tela etc.), que geralmente é processado como texto em negrito:

See here, some <strong>emphasized text</strong>.
Expandir snippet

Ou você pode usar a font-weightpropriedade css para estilizar o texto de qualquer elemento em negrito:

span { font-weight: bold; }
<p>This is a paragraph of <span>bold text</span>.</p>
Expandir snippet

— erenon
fonte
Coloquei o segundo parágrafo inteiro em negrito, para não enfatizar as palavras "texto em negrito", é apenas estilo.
— GKFX
2
É ótimo semanticamente se você estiver tentando enfatizar alguma coisa; se é um estilo sem tentar enfatizar, o <strong>elemento é semanticamente enganoso.
— Jtpereyda
34

Você usaria font-weight: bold.

Deseja deixar o documento inteiro em negrito? Ou apenas partes dela?

— David Wolever
fonte
26

Se você é novo no html, aqui estão três exemplos prontos para usar como usar CSS em conjunto com o html. Você pode simplesmente colocá-los em um arquivo, salvá-lo e abri-lo com o navegador de sua escolha:

Este incorpora diretamente seu estilo CSS em suas tags / elementos. Geralmente, essa não é uma abordagem muito boa, porque você sempre deve separar o conteúdo / html do design.

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">     
    <head>      
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
        <title>Hi, I'm bold!</title>  
    </head>           
    <body>
        <p style="font-weight:bold;">Hi, I'm very bold!</p>
    </body>
</html>

A próxima é uma abordagem mais geral e funciona em todas as tags "p" (significa parágrafo) em seu documento e, além disso, as torna ENORMES. Btw. O Google usa essa abordagem em sua pesquisa:

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">     
    <head>      
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
        <title>Hi, I'm bold!</title>  
        <style type="text/css">
            p {
              font-weight:bold;
              font-size:26px;
            }
        </style>
    </head>   
    <body>
        <p>Hi, I'm very bold and HUGE!</p>
    </body>
</html>

Você provavelmente levará alguns dias brincando com os primeiros exemplos, mas aqui está o último. Neste, você finalmente separa totalmente o design (css) e o conteúdo (html) um do outro em dois arquivos diferentes. O stackoverflow adota essa abordagem.

Em um arquivo, você coloca todo o CSS (chame-o de 'hello_world.css'):

  p {
    font-weight:bold;
    font-size:26px;
  }

Em outro arquivo, você deve colocar o html (chame de 'hello_world.html'):

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">     
    <head>      
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
        <title>Hi, I'm bold!</title>  
        <link rel="stylesheet" type="text/css" href="hello_world.css" />  
    </head>       
    <body>
        <p>Hi, I'm very bold and HUGE!</p>
    </body>
</html>

Espero que isto ajude um pouco. Para elementos específicos de endereços em seu documento e nem todas as tags que você deve familiarizar-se com as class, ide nameatributos. Diverta-se!

— merkuro
fonte
8 
Selector name{
font-weight:bold;
}

Suponha que você queira tornar negrito o elemento p

p{
font-weight:bold;
}

Você pode usar outro valor alternativo em vez de negrito como

p{
 font-weight:bolder;
 font-weight:600;
}
— Santosh Khalse
fonte
7 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<STYLE type="text/css">
   body
   {
      font-weight: bold;
   }
</STYLE>
</HEAD>
<BODY>
Body text is now bold.
</BODY>
</HTML>
— Ian Boyd
fonte
-1

Você pode usar algumas abordagens. Primeiro seria usar a tag forte

Here is an <strong>example of that tag</strong>.

Outra abordagem seria usar a propriedade de peso da fonte. Você pode obter inline ou por meio de uma classe ou ID. Digamos que você esteja usando uma classe.

.className {
  font-weight: bold;
}

Como alternativa, você também pode usar um valor fixo para o peso da fonte e a maioria das fontes suporta um valor entre 300 e 700, incrementado por 100. Por exemplo, o seguinte seria negrito:

.className {
  font-weight: 700;
}
— Andrew Tuzson
fonte
Outras respostas já abordaram esses pontos. Como esta resposta agrega valor?
— Basil Bourque
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.