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