CSS3 Fuentes
Reglas CSS 3 @ font-face
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 @.
Soporte para el navegador
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.
Es necesario utilizar el tipo de letra
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:
Ejemplos
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div
{
font-family:myFirstFont;
}
</style>
Trate »
Utilice texto en negrita
Debe añadir otra regla @ font-face que contiene el texto en negrita:
Ejemplos
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight:bold;
}
Trate »
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 @.
descripción de la fuente CSS3
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". |