Omitiendo la declaración @ font-face que anula la familia de fuentes "helvética"

Tengo un marcador que inserta un widget en las páginas de cualquier sitio. El estilo del widget está siendo roto por un determinado sitio que tiene la siguiente CSS @font-face declaración:Omitiendo la declaración @ font-face que anula la familia de fuentes "helvética"

@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 mis inserciones bookmarklet utiliza Helvetica en todas partes y en este un sitio que se ve horrible porque el navegador es Helvetica mapeo a la declaración @font-face de ese nombre en lugar de la fuente del sistema helvetica estándar.

La pregunta: ¿hay alguna manera de anular/eludir esta declaración @font-face o crear otra declaración @font-face que se asigna a la fuente helvetica del sistema?

Fuente

2012-06-12 Tautologistics

@PerSalbark: Sería ser retirado antes de poder abrir :) – thirtydot

A menos que la hoja de estilo que anula haciendo referencia a la hoja de estilo con !important después 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. */ 
}

Fuente

2012-06-12 15:44:04

Aunque respondí mi propia pregunta, aceptaré la suya ya que fue la primera solución que no se publicó por cuenta propia =) – Tautologistics

Tan pronto como envié esta pregunta me inspiré. Lo que encontré obras es la siguiente ...

Create a la siguiente regla CSS:

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

En los elementos que requieren el tipo de letra Helvética sistema real especificar la fuente de la familia como 'RealHelvetica' en lugar de sólo Helvetica:

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

Fuente

2012-06-12 15:34:29 Tautologistics

puede añadir el siguiente CSS para crear un nombre de fuente personalizado que se asigna a una fuente instalada locales:

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

Para el estilo del widget que use este:

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

Si está utilizando más estilos de fuente, como negrita y cursiva, usted tiene que definir todos ellos:

@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; 
}

Fuente

2012-06-12 15:37:14 ausi

Envuelva su widget en un iframe No sé si es la mejor solución, pero es una 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);

Bono: En caso de prueba futura tu widget contra la mayoría de los demás CSS o problemas relacionados con el tipo de letra.

Fuente

2012-06-12 15:39:18

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

Omitiendo la declaración @ font-face que anula la familia de fuentes "helvética"

Respuesta

Cuestiones relacionadas