Ejemplo: En este ejemplo usaremos algunas propiedades de CSS Font.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS Font</title>
<style>
.gfg {
font-family: "Arial, Helvetica, sans-serif";
font-size: 60px;
color: #090;
text-align: center;
}
.geeks {
font-family: "Comic Sans MS", cursive, sans-serif;
font-variant:small-caps;
text-align: center;
}
</style>
</head>
<body>
<div class="gfg">GeeksforGeeks</div>
<div class="geeks">
A computer science portal for geeks
</div>
</body>
</html>
Producción:
La fuente CSS se utiliza para establecer el contenido de la fuente del elemento HTML. Hay muchas propiedades de fuente en CSS que se mencionan y analizan brevemente a continuación:
- Propiedad de la familia de fuentes CSS : la propiedad de la familia de fuentes especifica la fuente de un elemento.
- Propiedad de estilo de fuente CSS : si queremos dar diseño a cualquier tipo de texto, podemos utilizar la propiedad de estilo de fuente CSS.
- Propiedad de peso de fuente CSS : La propiedad de peso de fuente de CSS se utiliza para establecer el peso o el grosor de la fuente que se utiliza con el texto HTML.
- Propiedad CSS font-variant : la propiedad font-variant se utiliza para convertir todas las letras minúsculas en letras mayúsculas.
- Propiedad de tamaño de fuente de CSS : la propiedad de tamaño de fuente en CSS se utiliza para establecer el tamaño de fuente del texto en un documento HTML.
- Propiedad CSS font-stretch : la propiedad font-stretch en CSS se utiliza para establecer el texto más ancho o más estrecho.
- Propiedad CSS font-kerning : esta propiedad se utiliza para controlar el uso de la información de kerning que se ha almacenado en la fuente.
A continuación se dan algunos ejemplos de la colección de fuentes CSS.
font-family : se utiliza para establecer el tipo de fuente de un elemento HTML. Contiene varios nombres de fuentes como un sistema alternativo.
Sintaxis:
font-family: "font family name";
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>font-family property</title>
<style>
.gfg {
font-family: "Times New Roman";
font-weight: bold;
font-size: 40px;
color: #090;
text-align: center;
}
.geeks {
font-family: "Comic Sans MS", cursive, sans-serif;
text-align: center;
}
</style>
</head>
<body>
<div class="gfg">GeeksforGeeks</div>
<div class="geeks">
A computer science portal for geeks
</div>
</body>
</html>
Producción:
font-style : se utiliza para especificar el estilo de fuente de un elemento HTML. Puede ser “normal, cursiva u oblicua”.
Sintaxis:
font-style: style name;
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>font-style property</title>
<style>
.gfg {
font-style: normal;
font-family: "Times New Roman";
font-weight: bold;
font-size: 40px;
color: #090;
text-align: center;
}
.geeks {
font-style: italic;
text-align: center;
}
</style>
</head>
<body>
<div class="gfg">GeeksforGeeks</div>
<div class="geeks">
A computer science portal for geeks
</div>
</body>
</html>
Producción:
font-weight : Se utiliza para establecer la negrita de la fuente. Su valor puede ser “normal, negrita, más claro, más negrita”.
Sintaxis:
font-weight: font weight value;
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>font-weight property</title>
<style>
.gfg {
font-weight: bold;
font-style: normal;
font-family: "Times New Roman";
font-size: 40px;
color: #090;
text-align: center;
}
.geeks {
font-weight: normal;
text-align: center;
}
</style>
</head>
<body>
<div class="gfg">GeeksforGeeks</div>
<div class="geeks">
A computer science portal for geeks
</div>
</body>
</html>
Producción:
font-variant : Se utiliza para crear el efecto de versalitas. Puede ser “normal o de pequeña capitalización”.
Sintaxis:
font-variant: font variant value;
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>font-variant property</title>
<style>
.gfg {
font-variant: small-caps;
font-weight: bold;
font-family: "Times New Roman";
font-size: 40px;
color: #090;
text-align: center;
}
.geeks {
font-variant: normal;
text-align: center;
}
</style>
</head>
<body>
<div class="gfg">GeeksforGeeks</div>
<div class="geeks">
A computer science portal for geeks
</div>
</body>
</html>
Producción:
font-size : se utiliza para establecer el tamaño de fuente de un elemento HTML. El tamaño de fuente se puede establecer de diferentes maneras, como en «píxeles, porcentaje, em o podemos establecer valores como pequeño, grande», etc.
Sintaxis:
font-size: font size value;
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>font-size property</title>
<style>
.gfg {
font-size: 40px;
font-weight: bold;
font-family: "Times New Roman";
color: #090;
text-align: center;
}
.geeks {
font-size: 1.2em;
text-align: center;
}
</style>
</head>
<body>
<div class="gfg">GeeksforGeeks</div>
<div class="geeks">
A computer science portal for geeks
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por letsLearnCode y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA