css - 绕过覆盖 "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，在这个网站上它看起来很糟糕，因为浏览器将 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. */
}