Шрифтовое лицо испортило жирную директиву (bootstrap-wysiwyg)

Question

Я использую bootstrap-wysiwyg внутри поповера. Вот демо (на самом деле работает только жирный шрифт). Теперь, как вы можете видеть - нажатие Ctrl+B сделает текст полужирным, а повторное нажатие вернет его к нормальному состоянию.

Эта демонстрация работает нормально, но в моем собственном проекте я работаю с локальными шрифтами, то есть:

@font-face {
    font-family: BerninaSans;
    src: url('theme/BerninaSans/normal/berninasans-condensedregular-webfont.eot');
    src: url('theme/BerninaSans/normal/berninasans-condensedregular-webfont.eot?#iefix') format('embedded-opentype'),
         url('theme/BerninaSans/normal/berninasans-condensedregular-webfont.woff') format('woff'),
         url('theme/BerninaSans/normal/berninasans-condensedregular-webfont.ttf') format('truetype'),
         url('theme/BerninaSans/normal/berninasans-condensedregular-webfont.svg#bernina_sanscondensed_regular') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: BerninaSansBold;
    src: url('theme/BerninaSans/bold/berninasans-condensedbold-webfont.eot');
    src: url('theme/BerninaSans/bold/berninasans-condensedbold-webfont.eot?#iefix') format('embedded-opentype'),
         url('theme/BerninaSans/bold/berninasans-condensedbold-webfont.woff') format('woff'),
         url('theme/BerninaSans/bold/berninasans-condensedbold-webfont.ttf') format('truetype'),
         url('theme/BerninaSans/bold/berninasans-condensedbold-webfont.svg#bernina_sanscondensed_bold') format('svg');
    font-weight: bold;
    font-style: normal;
}

И это как-то все портит - я могу нажать Ctrl+B (или кнопку напрямую), чтобы сделать текст жирным, но повторное нажатие не возвращает его в нормальное состояние. Это просто остается смелым. Сама кнопка тоже ведет себя странно, становится синей, но возвращается в норму, как только вы нажимаете любую другую клавишу. Я думал, что установка font-weight для второго шрифта bold разберусь, потому что это не так.

Я понятия не имею, как настроить это демо-версию для воссоздания проблемы (есть ли здесь что-то вроде... font-face cdn или что-то в этом роде?), Надеюсь, кто-то знает ответ из подобного опыта или даст полезное предложение.

Answer 1

Оказывается, я должен дать им все одно и то же имя.

Согласно этой статье, правильный способ определения жирного шрифта для шрифта-лица - использовать одно и то же имя семейства шрифтов, но с разными атрибутами. Таким образом, ваш браузер знает, что один смелый вариант другого

@font-face {
    font-family: BerninaSans;
    src: url('...');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: BerninaSans; // <----
    src: url('...');
    font-weight: bold;
    font-style: normal;
}

Довольно аккуратно.