¿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
— 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 
<!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
-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
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.