CSS3 - Fuentes web
Las fuentes web se utilizan para permitir las fuentes en CSS, que no están instaladas en el sistema local.
Diferentes formatos de fuentes web
| No Señor. | Fuente y descripción |
|---|---|
| 1 | TrueType Fonts (TTF) TrueType es un estándar de fuentes de contorno desarrollado por Apple y Microsoft a fines de la década de 1980. Se convirtió en las fuentes más comunes para los sistemas operativos Windows y MAC. |
| 2 | OpenType Fonts (OTF) OpenType es un formato para fuentes de computadora escalables y desarrollado por Microsoft |
| 3 | The Web Open Font Format (WOFF) WOFF se utiliza para desarrollar una página web y se desarrolló en el año de 2009. Ahora se utiliza por recomendación del W3C. |
| 4 | SVG Fonts/Shapes SVG permite fuentes SVG dentro de la documentación SVG. También podemos aplicar CSS a SVG con la propiedad de tipo de letra. |
| 5 | Embedded OpenType Fonts (EOT) EOT se utiliza para desarrollar las páginas web y se ha integrado en las páginas web, por lo que no es necesario permitir fuentes de terceros. |
El siguiente código muestra el código de muestra de la fuente:
<html>
<head>
<style>
@font-face {
font-family: myFirstFont;
src: url(/css/font/SansationLight.woff);
}
div {
font-family: myFirstFont;
}
</Style>
</head>
<body>
<div>This is the example of font face with CSS3.</div>
<p><b>Original Text :</b>This is the example of font face with CSS3.</p>
</body>
</html>Producirá el siguiente resultado:
Descripción de las fuentes
La siguiente lista contiene todas las descripciones de las fuentes que se colocan en la regla @ font-face:
| No Señor. | Valor y descripción |
|---|---|
| 1 | font-family Se utiliza para definir el nombre de la fuente. |
| 2 | src Se usa para definir la URL |
| 3 | font-stretch Se usa para encontrar cómo se debe estirar la fuente |
| 4 | font-style Se utiliza para definir el estilo de las fuentes. |
| 5 | font-weight Se usa para definir el peso de la fuente (negrita) |