La regla @font-face CSS en la regla se usa para asociar un nombre de fuente que se puede usar en una hoja de estilo. Se usa un descriptor de familia de fuentes dentro de la regla para nombrar la fuente y un descriptor src está asociado con un nombre de fuente externo. Esto se puede utilizar con fuentes descargables. Esta regla CSS @font-face puede contener más de una propiedad (máximo 24).
Sintaxis:
@font-face {
font-family: fontName;
src: url(fontFile path);
font-stretch: font-stretch Property;
font-weight: font-weight Property;
font-style: font-style Property;
}
Parámetro: la regla @font-face acepta cuatro parámetros como se describe a continuación:
- font-family: Especifica la fuente de un elemento.
- src: se utiliza para especificar la ubicación (URL) del recurso externo, es decir, contiene la ruta del archivo (url).
- font-stretch: se utiliza para establecer el texto más ancho o más estrecho.
- font-weight: Se utiliza para establecer el peso o grosor de la fuente que se utiliza con el texto HTML.
- estilo de fuente: se utiliza para diseñar el texto en particular en una cara normal, cursiva u oblicua de su familia de fuentes.
Pocos servicios de fuentes alojadas: estos servicios le proporcionarán varios tipos de fuentes.
Ejemplo 1: Este ejemplo ilustra el uso de la regla @font-face para especificar las diferentes propiedades de fuente para decorar el texto en consecuencia.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS @font-face rule</title>
<style>
@font-face {
font-family: fontName;
src: url(sansation_light.woff);
}
@font-face {
font-family: fontName;
src: url(sansation_bold.woff);
font-weight: bold;
}
div {
font-family: fontName;
}
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<div>A Computer Science Portal for Geeks</div>
</center>
</body>
</html>
Producción:
Ejemplo 2: Este ejemplo ilustra el uso de la regla @font-face especificando el origen de la ruta del archivo junto con su formato.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS @font-face rule</title>
<style type="text/css">
@font-face {
font-family: "OpenSans";
src: url("/examples/fonts/OpenSans-Regular.eot");
src: url("/examples/fonts/OpenSans-Regular.ttf") format("truetype");
font-stretch: normal;
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "OpenSansBold";
src: url("/examples/fonts/OpenSans-Bold.eot");
src: url("/examples/fonts/OpenSans-Bold.ttf") format("truetype");
font-stretch: normal;
font-weight: normal;
font-style: normal;
}
/* Specify the OpenSans bold font */
h1 {
font-family: "OpenSansBold", Arial, sans-serif;
color: green;
}
p {
font-family: "OpenSans", Arial, sans-serif;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<p>A Computer Science Portal for Geeks</p>
</center>
</body>
</html>
Producción:
Nota: Hay 5 formatos de fuente que son: TTF/OTF, WOFF, WOFF2, SVG y EOT.
Navegadores compatibles: los navegadores compatibles con la regla CSS @font-face se enumeran a continuación:
- Google Chrome (TTF/OTF, WOFF, WOFF2 y SVG)
- Internet Explorer (TTF/OTF, WOFF y EOT)
- Firefox (TTF/OTF, WOFF y WOFF2)
- Safari TTF/OTF, WOFF y SVG)
- Opera TTF/OTF, WOFF, WOFF2 y SVG
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA