¿Hay un disparador que pueda usar si se usa una fuente alternativa en CSS?

Question

Estoy usando this service para crear @font-face reglas en mi CSS. Lo que hice fue crear dos reglas, una para la fuente de peso normal y otra para la versión en negrita. De este modo:

@font-face 
{ 
    font-family: 'CenturyGothicRegular'; 
    src: url('/static/fonts/gothic_2-webfont.eot'); 
    src: url('/static/fonts/gothic_2-webfont.eot?#iefix') format('embedded-opentype'), 
      url('/static/fonts/gothic_2-webfont.woff') format('woff'), 
      url('/static/fonts/gothic_2-webfont.ttf') format('truetype'), 
      url('/static/fonts/gothic_2-webfont.svg#CenturyGothicRegular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 
... and another for 'CenturyGothicBold' 

he hecho a continuación, el tipo de letra predeterminado global para mi sitio de nuevo a Verdana, así:

body 
{ 
    font-family: "CenturyGothicRegular", Verdana; 
    font-size: 14px; 
} 

e hizo una pequeña regla para <strong> de manera que en lugar de hacer el peso normal versión en negrita (que apenas se parece a estirarlo), se utilizará la versión de peso negrita:

strong 
{ 
    font-weight: normal; 
    font-family: 'CenturyGothicBold'; 
} 

Un problema que podemos prever aquí es que si la fuente cambia automáticamente a Verdana, negrita no quieren b e presente.

¿Hay alguna manera de que pueda especificar un nuevo conjunto de reglas para <strong> que solo se aplican si la fuente ha predeterminado a Verdana?

Answer 1

No es necesario encontrar un disparador para ver si se ha utilizado una fuente de retroceso.

Lo que necesita hacer es configurar el font-weight en la regla @font-face, usando el mismo apellido. Por lo que sería ahora llamarlo Century Gothic:

@font-face { 
    font-family: 'CenturyGothic'; /* this used to be CenturyGothicRegular */ 
    src: url('/static/fonts/gothic_2-webfont.eot'); 
    src: url('/static/fonts/gothic_2-webfont.eot?#iefix') format('embedded-opentype'), 
     url('/static/fonts/gothic_2-webfont.woff') format('woff'), 
     url('/static/fonts/gothic_2-webfont.ttf') format('truetype'), 
     url('/static/fonts/gothic_2-webfont.svg#CenturyGothicRegular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'CenturyGothic'; /* this used to be CenturyGothicBold but the urls still need to point to the files they were pointing at */ 
    src: url('/static/fonts/gothic_2-webfont.eot'); 
    src: url('/static/fonts/gothic_2-webfont.eot?#iefix') format('embedded-opentype'), 
     url('/static/fonts/gothic_2-webfont.woff') format('woff'), 
     url('/static/fonts/gothic_2-webfont.ttf') format('truetype'), 
     url('/static/fonts/gothic_2-webfont.svg#CenturyGothicRegular') format('svg'); 
    font-weight: bold; 
} 

body{ 
    font-family: "CenturyGothic", Verdana; 
    font-size: 14px; 
} 

strong{ 
    font-weight: bold; 
} 

Esto combinar las dos fuentes en una sola font-family que le permite actuar como cualquier otro font-family es decir, cuando lo hace bold se mostrará la versión en negrita de la fuente etc .

Answer 2

Usando font-weight sólo con el mismo font-family no funcionará cuando se tiene varios weight, como la luz, ultraligero, condensada negrita, negrita, etc. demi