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