Umgehen @ font-Face-Deklaration, die "Helvetica" Schriftfamilie überschreibt

Ich habe ein Bookmarklet, das ein Widget in die Seiten einer Website einfügt. Das Styling des Widgets wird von einer bestimmten Stelle gebrochen, die die folgende CSS @font-face Erklärung hat:Umgehen @ font-Face-Deklaration, die "Helvetica" Schriftfamilie überschreibt

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

Das Widget, das meine Bookmarklet Einsätze Helvetica überall und auf dieser Seite nutzen sieht es schrecklich, weil der Browser-Mapping Helvetica ist auf die @font-face Deklaration dieses Namens anstelle der Standard-Helvetica-Systemschriftart.

Die Frage: gibt es eine Möglichkeit, diese @font-face Deklaration zu umgehen/umgehen oder erstellen Sie eine andere @font-face Deklaration, die auf das System helvetica font?

Quelle

2012-06-12 Tautologistics

@PerSalbark: Es entfernt werden würde, bevor Sie :) – thirtydot

Es sei denn, das Stylesheet überschreibt es durch das Stylesheet mit !important nach dem Widget Sheet verweisen, könnte diese Arbeit:

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

Quelle

2012-06-12 15:44:04

Auch wenn ich meine eigene Frage beantwortet habe, akzeptiere ich deine, da es die erste nicht selbst veröffentlichte Lösung war =) – Tautologistics

Sobald ich diese Frage einreichte, bekam ich etwas Inspiration. Was ich Werken ist die folgende ...

erstellen die folgende CSS-Regel:

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

In den Elementen, die die reale Helvetica Systemschriftart die Schriftart-Familie als ‚RealHelvetica‘ statt nur angeben erfordern helvetica:

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

Quelle

2012-06-12 15:34:29 Tautologistics

Sie können folgende CSS fügen Sie eine benutzerdefinierte Schriftart Namen, der zu einem lokalen installierten Schriftarten Karten zu erstellen:

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

Für das Styling des Widgets Sie diese verwenden sollten:

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

Wenn Sie mehr Schriftstile wie fett und kursiv verwenden, müssen Sie alle von ihnen definieren:

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

Quelle

2012-06-12 15:37:14 ausi

Wickeln Sie Ihre Widget in einem Iframe. Weiß nicht ob es die beste Lösung ist, aber es ist eine Lösung.

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: Sollte Ihr Widget gegenüber den meisten anderen CSS oder Schrift Probleme im Zusammenhang mit zukunftssicher.

Quelle

2012-06-12 15:39:18

Ausgezeichnete Punkt blinzeln konnte aber die Funktionalität/Interaktion meines Widget schließt die Verwendung eines iFrame aus. Im Allgemeinen wäre das eine brauchbare Option. – Tautologistics

Umgehen @ font-Face-Deklaration, die "Helvetica" Schriftfamilie überschreibt

Antwort

Verwandte Themen