Fuentes Web y fuentes de respaldo

Question

Al usar web fonts utilizando me preguntaba ¿cuál es el método recomendado para usar las fuentes de respaldo?

Como, por ejemplo, si yo estaba usando una fuente web que era audaz, tales como:

@font-face { 
    font-family: 'OpenSansBold'; 
    src: url('../fonts/OpenSans-Bold-webfont.eot'); 
    src: url('../fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/OpenSans-Bold-webfont.woff') format('woff'), 
     url('../fonts/OpenSans-Bold-webfont.ttf') format('truetype'), 
     url('../fonts/OpenSans-Bold-webfont.svg#OpenSansBold') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

Ahora cuando se llama a esto, obviamente, sólo hace esto:

font-family: OpenSansBold; 

Sin embargo, estaba preguntándose sobre cómo proporcionar fuentes de respaldo, como por ejemplo, si la descarga de la fuente falla por algún motivo.

Obviamente eso es bastante fácil de hacer con una fuente del estilo normal (sin negrita/cursiva no) de la siguiente manera ..

font-family: OpenSansRegular, Arial; 

Sin embargo, lo que me pregunto es ¿qué pasa cuando la fuente es negrita o itálico.

¿Se aconseja algo como esto y no afectará a la fuente web?

font-family: OpenSansBold, Arial; 
font-weight: bold; 

Sólo pregunto porque si no se ha especificado la negrita a continuación, si la fuente no pudo web, que obtendrían Arial, pero no habría negrita.

Answer 1

Presumiblemente está usando archivos de fuentes y un archivo CSS como fue generado por FontSquirr el El problema con su enfoque es que cada fuente específica (como Open Sans Regular y Open Sans Bold) se representa como una familia de fuentes separada, con un peso de fuente establecido en normal.Esto significa que en lugar de marcado como <p>foo <strong>bar</strong> y CSS simple como p { font-family: Open Sans, Arial } (dejando navegadores por defecto strong en negrita y selecciona la fuente adecuada de la familia Open Sans), se verá obligado a establecer las fuentes de forma explícita. Esto significa configurar tanto la familia de fuentes como el peso de la fuente, implícitamente con el valor de la propiedad font-family.

Debería ajustar el CSS para obtener un mejor enfoque. Se podría utilizar la misma familia de fuentes, pero diferentes pesos en la regla @font-family, y en la regla font-family, sólo se debería ajustar la familia:

@font-face { 
    font-family: 'open_sans'; 
    src: url('opensans-bold-webfont.eot'); 
    src: url('opensans-bold-webfont.eot?#iefix') format('embedded-opentype'), 
     url('opensans-bold-webfont.woff') format('woff'), 
     url('opensans-bold-webfont.ttf') format('truetype'), 
     url('opensans-bold-webfont.svg#OpenSans') format('svg'); 
    font-weight: bold; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'open_sans'; 
    src: url('opensans-regular-webfont.eot'); 
    src: url('opensans-regular-webfont.eot?#iefix') format('embedded-opentype'), 
     url('opensans-regular-webfont.woff') format('woff'), 
     url('opensans-regular-webfont.ttf') format('truetype'), 
     url('opensans-regular-webfont.svg#OpenSans') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 
* { font-family: open_sans, Arial; } 

Y entonces usted sólo tiene que utilizar font-weight: bold (o formato HTML que tiene como una efecto por defecto, como strong, b, th, h1 hasta h6) para aquellos elementos que deberían aparecer en Open Sans Bold.

Hacerlo de la forma en que usted describe parece funcionar en la mayoría de los navegadores, también, pero no contaría con ello. Una vez que haya declarado una fuente como peso normal en su @font-face, establecer font-weight: bold en el texto de esa fuente podría causar a) un error, ya que a las pesas no coinciden o b) la fuente tomada como punto de partida para negrita algorítmica, resultando en doble negrita. Y si no me equivoco, b) es lo que sucede en Safari (Win 7).

Answer 2

que haya resaltado correctamente un problema con la 'nueva era' de fuentes web, esta entrada del blog que analiza y presenta una solución http://elliotjaystocks.com/blog/font-weight-in-the-age-of-web-fonts/

fragmento relevante

problema número dos es significativamente más grande que el primero. Considere FF Enzo, que no tiene un peso de 400 (o incluso 500). En algunas circunstancias, su peso Light (300) quizás sea un poco demasiado delgado para un tipo de cuerpo pequeño, así que usemos el peso 600. Ah, eso se ve bien.

¡Pero no está bien! Porque si esa fuente no se puede mostrar y nos volvemos a recurrir a otra cosa, esa fuente de respaldo se renderizará en su peso de 600; en otras palabras: negrita.

¿Una solución?

Hay una forma de evitar esto y es el uso FontsLive método en la CSS que generan para sus usuarios: se declara cada peso de forma individual en lugar de toda la familia. Su código es un poco como esto:

código CSS:

{ font-family: 'FamilyName Light', 'FallbackFamily', serif; font-weight: normal; } 
{ font-family: 'FamilyName Medium', 'FallbackFamily', serif; font-weight: normal; } 
{ font-family: 'FamilyName Bold', 'FallbackFamily', serif; font-weight: bold; } 
{ font-family: 'FamilyName Black', 'FallbackFamily', serif; font-weight: bold; } 

Actualización:

@font-face { 
    font-family: 'OpenSansBold'; 
    src: url('../fonts/OpenSans-Bold-webfont.eot'); 
    src: url('../fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/OpenSans-Bold-webfont.woff') format('woff'), 
     url('../fonts/OpenSans-Bold-webfont.ttf') format('truetype'), 
     url('../fonts/OpenSans-Bold-webfont.svg#OpenSansBold') format('svg'); 
    font-weight: bold; 
    font-style: normal; 
} 

Y entonces algo así como (como usted sugiere):

{ font-family: OpenSansBold, 'Arial'; font-weight: bold; }