Question

我有一个书签，可以将小部件插入任何网站的页面。小部件的样式被具有以下CSS @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");
}

我的bookmarklet插入的小部件到处使用helvetica，在这个网站上看起来很糟糕，因为浏览器将helvetica映射到该名称的@font-face声明，而不是标准的helvetica系统字体。

问题：是否有任何方法可以覆盖/绕过此@font-face声明或创建另一个映射到系统helvetica字体的@font-face声明？

Answer 1

除非样式表通过在窗口小部件样式表之后使用!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. */
}

Answer 2

您可以添加以下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;
}

Answer 3

我一提交这个问题就得到了一些启发。我发现的作品如下......

创建以下css规则：

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

在需要真正的helvetica系统字体的元素中，将font-family指定为'RealHelvetica'而不仅仅是helvetica：

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

Answer 4

将您的小部件包装在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或字体相关的问题。

绕过覆盖“helvetica”字体系列的@ font-face声明

4 个答案: