Обход объявления @font-face, которое переопределяет семейство шрифтов " helvetica

У меня есть букмарклет, который вставляет виджет на страницы любого сайта. Стиль виджета нарушается определенным сайтом, который имеет следующее объявление 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 объявление или создать другое @font-face объявление, которое сопоставляется с системным шрифтом helvetica?

4 8
css css3 font-face bookmarklet

4 ответа:

Если таблица стилей не переопределяет ее, ссылаясь на таблицу стилей с помощью !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. */
}
4

Вы можете добавить следующий css для создания пользовательского имени шрифта, которое сопоставляется с локальным установленным шрифтом: 

@font-face{
    font-family: mycustomuniquefontname;
    src: local("Helvetica");
}

Для оформления виджета вы должны использовать следующее: 

font-family: mycustomuniquefontname, Helvetica, sans-serif;

Если вы используете больше стилей шрифта, таких как полужирный и курсивный, вы должны определить все из них: 

@font-face{
    font-family: mycustomuniquefontname;
    src: local("Helvetica");
}
@font-face{
    font-family: mycustomuniquefontname;
    src: local("Helvetica Bold");
    font-weight: bold;
}
@font-face{
    font-family: mycustomuniquefontname;
    src: local("Helvetica Italic");
    font-style: italic;
}
@font-face{
    font-family: mycustomuniquefontname;
    src: local("Helvetica Bold Italic");
    font-weight: bold;
    font-style: italic;
}
3

Как только я представил этот вопрос, я получил некоторое вдохновение. То, что я нашел, работает следующим образом...

Создайте следующее правило css: 

@font-face {
    font-family: 'RealHelvetica';
    src: local('helvetica');
}

В элементах, требующих реального шрифта системы helvetica, укажите семейство шрифтов как "RealHelvetica", а не просто helvetica: 

.widget {
    font-family: 'RealHelvetica',helvetica,sans-serif !important;
}
1

Оберните виджет в iframe. Не знаю, является ли это лучшим решением, но это Решение.

Http://jsfiddle.net/bwcNX/ 

var $frame = $('<iframe style="width:200px; height:100px;">');
$('body').append( $frame );
setTimeout( function() {
    var $doc = $($frame[0].contentWindow.document.documentElement);
    $doc.html("<head><title>abc</title></head><body><div>def.</div></body></html>");
    $doc.find('div').append('<div>ghi.</div>');
}, 1 );

Бонус: если в будущем ваш виджет будет защищен от большинства других проблем, связанных с CSS или шрифтами.

0