El mejor tutorial de CSS3 Fuentes en 2024. En este tutorial podrás aprender Reglas CSS 3 @ font-face,Soporte para el navegador,Es necesario utilizar el tipo de letra,Ejemplos,Utilice texto en negrita,Ejemplos,descripción de la fuente CSS3,
Las versiones anteriores de CSS3, los diseñadores tuvieron que utilizar en el equipo del usuario está ya instalado fuentes.
Utilizar CSS3, los diseñadores web pueden utilizar cualquier fuente que él / ella le gusta.
Cuando encuentre el archivo que desea utilizar la fuente, el archivo de fuente simplemente se incluirá en el sitio web, se descargará automáticamente a las necesidades de los usuarios.
Fuente de su elección en la nueva versión de CSS3 descripción de la regla @ font-face.
Sus fuentes "propias" se definen en la regla font-face CSS3 @.
Las cifras de la tabla representan el primer navegador compatible con el número de versión de la propiedad.
属性 | |||||
---|---|---|---|---|---|
@font-face | 4.0 | 9.0 | 3.5 | 3.2 | 10.0 |
Internet Explorer 9 o superior, Firefox, Chrome, Safari y Opera apoyo WOFF (Web Open Font Format) fuentes.
Firefox, Chrome, Safari y Opera .ttf apoyo (fuentes True Type) y .otf (OpenType) fuente de tipo de letra).
Chrome, Safari y Opera también admiten fuentes SVG / colapsaron.
Internet Explorer también soporta fuentes EOT (Embedded OpenType).
Nota: Internet Explorer 8 y versiones anteriores no son compatibles con la nueva regla @ font-face.
En la regla font-face nueva @, primero debe definir el nombre de la fuente (como myFirstFont), a continuación, seleccione el archivo de fuente.
Consejo: Usar fuente URL en minúsculas, letras mayúsculas en IE producirán resultados inesperados |
Para utilizar la fuente para el elemento HTML, para hacer referencia al nombre de la fuente (myFirstFont) por las propiedades font-family:
Debe añadir otra regla @ font-face que contiene el texto en negrita:
El archivo "Sansation_Bold.ttf" es otro archivo fuente que contiene la letra negrita Sansation.
El uso de este texto navegador tiempo de la familia de la fuente "myFirstFont" debe ser traducido como negrita.
Lo que puede tener muchos de la misma regla font-cara de la fuente @.
La siguiente tabla muestra toda la descripción de la fuente y el interior de la definición de la regla @ font-face:
descriptores | valor | descripción |
---|---|---|
font-family | nombre | Requerido. Dispuesto en el nombre de la fuente. |
src | URL | Requerido. Definido archivo de fuente URL. |
font-stretch |
| Opcional. Definir cómo dibujar la fuente. El valor por defecto es "normal". |
font-style |
| Opcional. Define el estilo de fuente. El valor por defecto es "normal". |
font-weight |
| Opcional. Un peso de fuente personalizado. El valor por defecto es "normal". |
unicode-range | unicode-range | Opcional. Fuente personalizado intervalo de caracteres UNICODE apoyo. El valor por defecto es "U + 0-10FFFF". |