Propiedad de estilo de fuente CSS

Una propiedad CSS de estilo de fuente se utiliza para diseñar el texto en particular en una cara normal, cursiva u oblicua de su familia de fuentes . Usando la propiedad de estilo de fuente , podemos asignar importancia junto con la decoración del texto específico. Ayuda a hacer una mejor experiencia de usuario. En CSS, si queremos dar diseño a cualquier tipo de texto, podemos hacer uso de la propiedad de estilo de fuente CSS. 

Sintaxis:  

font-style: normal|italic|oblique|initial|inherit;

Valores de propiedad: 

  • normal: este es el valor predeterminado del estilo de fuente para el que el navegador mostrará texto de fuente normal.
  • cursiva : este estilo de fuente se utiliza para mostrar el texto en cursiva en el navegador.
  • oblicua : este estilo de fuente especifica un ángulo para la inclinación del texto. El estilo de fuente que se muestra es oblicuo en el navegador.
  • initial : esta propiedad de estilo de fuente se utiliza para establecer la fuente en su valor predeterminado.
  • heredar : esta propiedad de estilo de fuente se usa para heredar la propiedad actual de su elemento principal.

Discutiremos todas las propiedades de estilo de fuente a través de los ejemplos. Comencemos con la propiedad de estilo de fuente normal .

  • estilo de fuente: normal: el navegador mostrará texto de fuente normal, es el valor predeterminado.

Sintaxis: 

font-style: normal;

Ejemplo:  Este ejemplo ilustra el estilo de fuente cuyo valor se establece en normal.

HTML

<!DOCTYPE html>
<html>
<head>
    <title> CSS | font-style Property </title>
    <style>
    p.a {
        font-style: normal;
    }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h3>Normal font-style Property</h3>
    <p class="a">GeeksforGeeks</p>
 
</body>
</html>

Producción:

estilo de fuente: cursiva: cursiva.

Sintaxis:

font-style: italic;

Ejemplo:  Este ejemplo ilustra el estilo de fuente cuyo valor se establece en cursiva.

HTML

<!DOCTYPE html>
<html>
<head>
    <title> CSS | font-style Property </title>
    <style>
    p.a {
        font-style: italic;
    }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h3>Italic font-style Property</h3>
    <p class="a">GeeksforGeeks</p>
 
</body>
</html>

Producción: 

font-style:oblique: el navegador muestra un estilo de fuente oblicuo.

Sintaxis: 

font-style: oblique;

Ejemplo:  Este ejemplo ilustra el estilo de fuente cuyo valor se establece en oblicuo.

HTML

<!DOCTYPE html>
<html>
<head>
    <title> CSS | font-style Property </title>
    <style>
    p.a {
        font-style: oblique;
    }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h3>Oblique font-style Property</h3>
    <p class="a">GeeksforGeeks</p>
 
</body>
</html>

Producción:

font-style:initial: el navegador muestra un estilo de fuente inicial que es el predeterminado.

Sintaxis: 

font-style: initial;

Ejemplo:  Este ejemplo ilustra el estilo de fuente cuyo valor se establece en inicial.

HTML

<!DOCTYPE html>
<html>
<head>
    <title> CSS | font-style Property </title>
    <style>
    p.a {
        font-style: initial;
    }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h3>Initial font-style Property</h3>
    <p class="a">GeeksforGeeks</p>
 
</body>
</html>

Producción:

font-style:Inherit: hereda la propiedad de su elemento principal.

Ejemplo: En este ejemplo, hemos establecido el valor de color como herencia que heredará la propiedad de color de su elemento principal.

HTML

<!DOCTYPE html>
<html>
<head>
    <title> CSS | font-style Property </title>
    <style>
    span {
        color: blue;
        font-size: 70px;
    }
     
    .extra span {
        color: inherit;
    }
    </style>
</head>
 
<body>
    <div>
        <span>GeeksforGeeks</span>
    </div>
    <div class="extra"
         style="color:green">
      <span>GeeksforGeeks</span>
    </div>
    <div style="color:red">
        <span>GeeksforGeeks</span>
    </div>
</body>
</html>

Producción:

Navegadores compatibles: los navegadores compatibles con la propiedad de estilo de fuente se enumeran a continuación: 

  • Google Chrome 1.0
  • Internet Explorer 4.0
  • Microsoft Edge 12.0
  • Firefox 1.0
  • Ópera 7.0
  • Safari 1.0

Publicación traducida automáticamente

Artículo escrito por Jitender_1998 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *