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

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

我的书签插入使用黑体无处不在,在这一个网站上的小部件,它看起来可怕,因为浏览器是Helvetica字体映射到@font-face该名称,而不是标准黑体系统字体的声明.

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

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