"helvetica"フォントファミリをオーバーライドする@ font-face宣言をバイパスする

私はどのサイトのページにもウィジェットを挿入するブックマークレットを持っています。"helvetica"フォントファミリをオーバーライドする@ font-face宣言をバイパスする

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

私のブックマークレットインサートはどこでも、ブラウザがマッピングヘルベチカあるので、それは恐ろしい見えます。この1つのサイト上のHelveticaを使用していますウィジェット：ウィジェットのスタイリングには、以下のCSS @font-face宣言が特定のサイトによって破壊されています標準ヘルベティカシステムフォントではなく、その名前の@font-face宣言に変換します。

質問：この@font-face宣言をオーバーライド/バイパスする方法や、システムのhelveticaフォントにマップする別の@font-face宣言を作成する方法はありますか？

出典

2012-06-12 Tautologistics

@PerSalbark：あなたは優秀なポイント:) – thirtydot

、これは仕事ができる：

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

出典

2012-06-12 15:44:04

私自身の質問に答えても、それは最初の非自己投稿の解決策だったので、私はあなたを受け入れます。 – Tautologistics

私はこの質問を提出するとすぐにインスピレーションを得ました。本物のHelveticaシステムフォントは「RealHelvetica」としてフォントファミリを指定する必要要素で

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

代わりに：私は作品を発見したことは、次の...

は、次のCSSルールを作成していますヘルベチカ：

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

出典

2012-06-12 15:34:29 Tautologistics

ローカルインストールフォントにマップするカスタムフォント名を作成するには、以下のCSSを追加することができます。

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

をあなたがこれを使用する必要があるウィジェットのスタイリングのために

：

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

あなたは、このようなボールドとイタリックなど多くのフォントスタイルを使用している場合は、あなたがそれらのすべてを定義する必要があります。

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

出典

2012-06-12 15:37:14 ausi

は、あなたのラップiframe内のウィジェットそれが最良の解決策かどうかわからないが、解決策です。

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

ボーナス：将来の証明は、他のほとんどのCSSフォント関連の問題に対するあなたのウィジェットする必要があります。スタイルシートは、ウィジェットのスタイルシートの後!importantとスタイルシートを参照することによってそれを上書きしない限り

出典

2012-06-12 15:39:18

を点滅させることができる前にそれは除去されるが、機能/私のウィジェットのインタラクションは、iFrameの使用を妨げます。一般的には、それは実行可能なオプションです。 – Tautologistics

"helvetica"フォントファミリをオーバーライドする@ font-face宣言をバイパスする

答えて

関連する問題