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

前端之家收集整理的这篇文章主要介绍了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. */
}

猜你在找的CSS相关文章