Omitir la declaración @font-face que anula la familia de fuentes "helvetica"

Tengo un bookmarklet que inserta un widget en las páginas de cualquier sitio. El estilo del widget está siendo roto por un sitio determinado que tiene el siguiente CSS @font-face declaración:

@font-face {
    font-family: "helvetica";
    src: url("http://cdn2.yoox.biz/Os/fonts/helveticaneueltstdmdcn.eot?iefix") format("eot"),
         url("http://cdn2.yoox.biz/Os/fonts/helveticaneueltstdmdcn.woff") format("woff"),
         url("http://cdn2.yoox.biz/Os/fonts/helveticaneueltstdmdcn.ttf") format("truetype"),
         url("http://cdn2.yoox.biz/Os/fonts/helveticaneueltstdmdcn.svg#svgFontName") format("svg");
}

El widget que inserta mi bookmarklet usa helvética en todas partes y en este sitio se ve horrible porque el navegador está asignando helvética a la @font-face declaración de ese nombre en lugar de la fuente del sistema helvética estándar.

La pregunta: ¿hay alguna forma de anular/eludir esto? @font-face declaración o crear otra @font-face declaración que se asigna a la fuente helvética del sistema?

preguntado el 12 de junio de 12 a las 16:06

@PerSalbark: Se eliminaría antes de que pudiera parpadear :) -

4 Respuestas

A menos que la hoja de estilo la anule haciendo referencia a la hoja de estilo con !important después de la hoja de estilo de su widget, esto podría funcionar:

@font-face {
    font-family: 'ProperHelvetica'; /* Make a name for the "proper" Helvetica */
    src: local('helvetica'); /* Assign it to the Helvetica font on the user's system */
}
.your-widget {
    font-family: 'ProperHelvetica', helvetica, sans-serif !important; /* Make everything 
in your widget use the "proper" Helvetica and if the user doesn't have it,
use the site's helvetica. */
}

Respondido el 13 de junio de 12 a las 15:06

Aunque respondí mi propia pregunta, aceptaré la tuya ya que fue la primera solución no publicada =) - tautologística

Puede agregar el siguiente css para crear un nombre de fuente personalizado que se asigne a una fuente instalada localmente:

@font-face{
    font-family: mycustomuniquefontname;
    src: local("Helvetica");
}

Para el estilo del widget, debe usar esto:

font-family: mycustomuniquefontname, Helvetica, sans-serif;

Si está utilizando más estilos de fuente, como negrita y cursiva, debe definirlos todos:

@font-face{
    font-family: mycustomuniquefontname;
    src: local("Helvetica");
}
@font-face{
    font-family: mycustomuniquefontname;
    src: local("Helvetica Bold");
    font-weight: bold;
}
@font-face{
    font-family: mycustomuniquefontname;
    src: local("Helvetica Italic");
    font-style: italic;
}
@font-face{
    font-family: mycustomuniquefontname;
    src: local("Helvetica Bold Italic");
    font-weight: bold;
    font-style: italic;
}

Respondido el 12 de junio de 12 a las 16:06

Tan pronto como envié esta pregunta, obtuve algo de inspiración. Lo que encontré que funciona es lo siguiente...

Crea la siguiente regla css:

@font-face {
    font-family: 'RealHelvetica';
    src: local('helvetica');
}

En los elementos que requieren la fuente real del sistema helvetica, especifique la familia de fuentes como 'RealHelvetica' en lugar de solo helvetica:

.widget {
    font-family: 'RealHelvetica',helvetica,sans-serif !important;
}

Respondido el 12 de junio de 12 a las 16:06

Envuelve tu widget en un iframe. No sé si es la mejor solución, pero lo es. a solución.

http://jsfiddle.net/bwcNX/

var $frame = $('<iframe style="width:200px; height:100px;">');
$('body').append( $frame );
setTimeout( function() {
    var $doc = $($frame[0].contentWindow.document.documentElement);
    $doc.html("<head><title>abc</title></head><body><div>def.</div></body></html>");
    $doc.find('div').append('<div>ghi.</div>');
}, 1 ); 

Bonificación: debería probar su widget en el futuro contra la mayoría de los otros problemas relacionados con CSS o fuentes.

Respondido el 12 de junio de 12 a las 16:06

Excelente punto, pero la funcionalidad/interacción de mi widget impide el uso de un iFrame. En general, esa sería una opción viable. - tautologística

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.