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