0

I'm using bootstrap-wysiwyg inside a popover. Here's a demo (only the bold is actually working). Now as you can see - pressing Ctrl+B will set the text to bold, and pressing again will return it to normal.

That demo is working fine, but in my own project I'm working with local font-faces, i.e.:

@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;
}

And that somehow screws everything up - I can click Ctrl+B (or the button directly) to make the text bold, but clicking again doesn't return it to normal. It just stays bold. The button itself is behaving weirdly too, turns blue, but changes back to normal the second you press down any other key. I thought setting the font-weight for the second font-face to bold will sort it out because but it doesn't.

I have no idea how to set up that demo to recreate the problem (is there like a... font-face cdn or something?), hopefully someone knows the answer from similar experience or will give a helpful suggestion.

4

1 回答 1

0

事实证明，我应该给它们都起相同的名字。

根据这篇文章，为您的字体定义粗体版本的正确方法是使用相同的字体系列名称，但具有不同的属性。这样，您的浏览器就知道其中一个是另一个的粗体版本

@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;
}

挺整洁的。

于 2014-03-17T08:27:15.397 回答