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

原文地址：https://www.jb51.cc/css/215861.html