字体变乱的粗体指令（bootstrap-wysiwyg）

yuvi 发表于 Dev

尤维

我在弹窗内使用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之类的东西？），希望有人从类似的经验中知道答案，或者会给出有益的建议。

尤维

原来，我应该给他们全部相同的名字。

根据本文的介绍，为字体定义粗体版本的正确方法是使用相同的字体系列名称，但使用不同的属性。这样，您的浏览器就会知道一个是另一种的粗体形式

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

挺整洁的。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。