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

我有一个书签,可以将小部件插入任何网站的页面.小部件的样式被具有以下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声明?

解决方法

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

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效