使用Bootstrap样式表时，粗体字体粗细不起作用

时间：2020-05-14 14:28:04

标签： html css twitter-bootstrap

使用引导程序时，我遇到的问题将以粗体显示。在Chrome中，应以粗体显示的文本不会显示为粗体：

enter image description here

但是在Safari中它可以按预期工作：

enter image description here

HTML：

<!DOCTYPE html>
<html lang="en" dir="ltr">
<meta charset="utf-8">
<title>Font check</title>

<!--  Comment out the bootstrap stylesheet and it works  -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<link rel="stylesheet" href="font-test.css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<!-- <h1 class="font-weight-bold">Hello World!</h1> -->
<span class="bold-text">Hello World!</span>

CSS：

* {-webkit-font-smoothing: antialiased;}
.bold-text {
  font-weight: 700;
  font-size: 2.5em;
}

codepen：https://codepen.io/Kexarif/pen/rNOZMqO

有人建议我需要添加-webkit-font-smoothing: antialiased，但这没什么区别。

如果我注释掉Bootstrap样式表，则文本将在Chrome中正确显示。似乎是因为Bootstrap。有什么想法可能会发生这种情况以及我该如何解决？

2 个答案:

答案 0 :(得分：0)

尝试清除浏览数据，一天对我有用

答案 1 :(得分：0)

问题实际上是Chrome错误。这会导致某些系统堆栈字体无法正确显示粗体文本。修复程序需要几周的时间，来源：https://css-tricks.com/chrome-system-fonts-snafu

现在临时修复是：

body {
  font-family: -apple-system, Helvetica;
}
相关问题
最新问题