越过覆盖“Helvetica”字体族的@font-face声明

Question

越过覆盖“Helvetica”字体族的@font-face声明

9

我有一个书签小工具，可以将小部件插入到任何网站的页面中。但是某个网站的以下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");
}

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

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

- Tautologistics

3

如果你眨眼之前，它就会被移除。 - thirtydot

4个回答

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

- ausi

1

我提交这个问题后很快就有了一些灵感。我发现以下方法可行...

创建以下CSS规则：

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

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

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

- Tautologistics

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或字体相关问题的影响。

- DG.

非常好的观点，但我的小部件的功能/交互排除了使用iFrame。一般来说，那将是可行的选择。 - Tautologistics

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Anish Gupta · Accepted Answer

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