¿Cómo hacer que mi fuente sea negrita usando CSS?

249

Soy muy nuevo en HTML y CSS y me preguntaba cómo podría poner en negrita mi fuente usando CSS.

Tengo una página HTML simple que importa un archivo CSS, y puedo cambiar la fuente en el CSS. Pero no sé cómo poner en negrita la fuente, ¿alguien puede ayudarme?

css peter-b
fuente
66
Le sugiero que lea la especificación CSS2, le da una explicación muy detallada de lo que puede hacer y cómo hacerlo. Y tampoco es demasiado seco. w3.org/TR/CSS2
Robert K
posible duplicado de cómo poner en negrita las palabras dentro de un párrafo en html / css?
Ejaz

Respuestas:

76

Puede usar el strongelemento en html, que es excelente semánticamente (también es bueno para lectores de pantalla, etc.), que generalmente se representa como texto en negrita:

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

O puede usar la font-weightpropiedad css para aplicar estilo al texto de cualquier elemento como negrita:

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

Erenon
fuente
Puse todo el segundo párrafo en negrita, por lo que no enfatiza las palabras "texto en negrita", es solo estilo.
GKFX
2
Es genial semánticamente si estás tratando de enfatizar algo; Si es un estilo sin tratar de enfatizar, el <strong>elemento es semánticamente engañoso.
jtpereyda
34

Tendrá que utilizar font-weight: bold.

¿Quieres poner todo el documento en negrita? ¿O solo partes de él?

David Wolever
fuente
26

Sin embargo, aquí hay tres ejemplos listos para usar sobre cómo usar CSS junto con html. Simplemente puede ponerlos en un archivo, guardarlo y abrirlo con el navegador de su elección:

Este incrusta directamente tu estilo CSS en tus etiquetas / elementos. En general, este no es un enfoque muy agradable, porque siempre debe separar el contenido / html del diseño.

<?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>

El siguiente es un enfoque más general y funciona en todas las etiquetas "p" (significa párrafo) en su documento y, además, las hace ENORMES. Por cierto. Google utiliza este enfoque en su búsqueda:

<?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>

Probablemente tardarás un par de días jugando con los primeros ejemplos, sin embargo, aquí está el último. En esto, finalmente separan completamente el diseño (css) y el contenido (html) entre sí en dos archivos diferentes. stackoverflow toma este enfoque.

En un archivo pones todo el CSS (llámalo 'hello_world.css'):

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

En otro archivo debes poner el html (llámalo '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 esto ayude un poco. A elementos específicos de direcciones en su documento y no todas las etiquetas que usted debe familiarizarse con las class, idy nameatributos. ¡Que te diviertas!

Merkuro
fuente
8 
Selector name{
font-weight:bold;
}

Supongamos que desea poner negrita para el elemento p

p{
font-weight:bold;
}

Puede usar otro valor alternativo en lugar de negrita como

p{
 font-weight:bolder;
 font-weight:600;
}
Santosh Khalse
fuente
7 
font-weight: bold
Sin memoria
fuente
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
fuente
6

peso de fuente: negrita;

Luixv
fuente
-1

Podrías usar un par de enfoques. Primero sería usar la etiqueta fuerte

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

Otro enfoque sería utilizar la propiedad font-weight. Puede lograr en línea, o mediante una clase o id. Digamos que estás usando una clase.

.className {
  font-weight: bold;
}

Alternativamente, también puede usar un valor fijo para el peso de fuente y la mayoría de las fuentes admiten un valor entre 300 y 700, incrementado en 100. Por ejemplo, lo siguiente sería en negrita:

.className {
  font-weight: 700;
}
Andrew Tuzson
fuente
Otras respuestas ya cubrieron estos puntos. ¿Cómo agrega valor esta respuesta?
Basil Bourque