9

ウィジェットを任意のサイトのページに挿入するブックマークレットがあります。@font-faceウィジェットのスタイルは、次のCSS宣言を持つ特定のサイトによって壊れています。

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

私のブックマークレットが挿入するウィジェットはどこでもhelveticaを使用しており、この1つのサイトでは、ブラウザーがhelveticaを@font-face標準のhelveticaシステムフォントではなくその名前の宣言にマッピングしているため、ひどいように見えます。

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

4

4 に答える 4

4

!importantウィジェットのスタイルシートの後にスタイルシートを参照してスタイルシートをオーバーライドしない限り、これは機能する可能性があります。

@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-12T15:44:04.213 に答える
3

次の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-12T15:37:14.110 に答える
1

この質問を提出するとすぐに、私はいくつかのインスピレーションを得ました。私が見つけた作品は次のとおりです...

次のcssルールを作成します。

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

実際のhelveticaシステムフォントを必要とする要素で、フォントファミリを単にhelveticaではなく「RealHelvetica」として指定します。

.widget {
    font-family: 'RealHelvetica',helvetica,sans-serif !important;
}
于 2012-06-12T15:34:29.687 に答える
0

ウィジェットを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またはフォント関連の問題に対してウィジェットを将来にわたって保証する必要があります。

于 2012-06-12T15:39:18.093 に答える