Ignorare la dichiarazione @ font-face che sostituisce la famiglia di font "helvetica"

Ho un bookmarklet che inserisce un widget in qualsiasi pagina del sito. Lo stile del widget viene rotto da un certo sito che ha il seguente CSS @font-face dichiarazione:Ignorare la dichiarazione @ font-face che sostituisce la famiglia di font "helvetica"

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

Il widget che i miei inserti bookmarklet utilizza helvetica ovunque e su questo sito sembra orribile perché il browser è mappatura helvetica alla dichiarazione @font-face di quel nome piuttosto che al carattere di sistema helvetica standard.

La domanda: esiste un modo per ignorare/ignorare questa dichiarazione @font-face o creare un'altra dichiarazione @font-face associata al font helvetica di sistema?

fonte

2012-06-12 Tautologistics

@PerSalbark: Sarebbe essere rimosso prima che si possa lampeggiare :) – thirtydot

A meno che il foglio di stile prevale su di esso facendo riferimento al foglio di stile con !important dopo foglio di stile del widget, questo potrebbe funzionare:

@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. */ 
}

fonte

2012-06-12 15:44:04

Anche se ho risposto alla mia domanda, accetterò la tua poiché è stata la prima soluzione non autoposta =) – Tautologistics

Non appena ho presentato questa domanda ho avuto qualche ispirazione. Quello che ho trovato lavori è il seguente ...

Creare una la seguente regola CSS:

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

Negli elementi che richiedono il carattere di sistema vera helvetica specificare il font-family come 'RealHelvetica' invece di helvetica:

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

fonte

2012-06-12 15:34:29 Tautologistics

È possibile aggiungere il seguente css per creare un nome di carattere personalizzato associato a un carattere installato locale:

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

Per lo stile del widget si dovrebbe usare questo:

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

Se si utilizza più stili dei font come grassetto e corsivo, è necessario definire tutti loro:

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

fonte

2012-06-12 15:37:14 ausi

Avvolgete il vostro widget in un iframe. Non so se la soluzione migliore, ma è una soluzione.

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);

Bonus: Nel caso a prova di futuro il tuo widget contro la maggior parte altri CSS o problemi connessi di carattere.

fonte

2012-06-12 15:39:18

Ottimo punto ma la funzionalità/l'interazione del mio widget preclude l'utilizzo di un iFrame. In generale, sarebbe un'opzione praticabile. – Tautologistics

Ignorare la dichiarazione @ font-face che sostituisce la famiglia di font "helvetica"

risposta

Problemi correlati