Question

我在popover中使用bootstrap-wysiwyg。 Here's a demo（只有粗体才有效）。现在您可以看到 - 按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

事实证明我应该给他们所有相同的名字。

根据this article，为font-face定义粗体版本的正确方法是使用相同的font-family名称，但具有不同的属性。这样，您的浏览器就知道其中一个是另一个

的粗体版本

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

非常整洁。

font-face搞乱粗体指令（bootstrap-wysiwyg）

1 个答案: