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，在这个站点上它看起来很糟糕，因为浏览器将 helvetica 映射到该@font-face名称的声明，而不是标准的 helvetica 系统字体。

问题：有没有办法覆盖/绕过这个@font-face声明或创建另一个@font-face映射到系统 helvetica 字体的声明？

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 系统字体的元素中，将字体系列指定为“RealHelvetica”，而不仅仅是 helvetica：

.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 回答