使用引导程序 4 时字体机器人不起作用答案

【问题标题】：font roboto doesn't work when using bootstrap 4使用引导程序 4 时字体机器人不起作用
【发布时间】：2021-09-13 04:18:51
【问题描述】：

我在我的网站中使用带有 bootstrap-4 机器人字体的机器人字体系列不起作用。它在这种情况下有效：我是这样写的"font-family:"roboto-bold"; 当我用"sans-serif" 字体"font-family: 'roboto-bold',sans-serif;" 写作时，这种情况就不行了

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');


@font-face {
    font-family: 'roboto-bold',sans-serif;
    src: url('./fonts/roboto/Roboto-Bold.woff') format('woff2'),
    url('./fonts/roboto/Roboto-Bold.woff') format('woff');
    font-weight: bold;
    font-display: swap;
    unicode-range: U+000-5FF;
  
} 
   
body {
    font-family: 'roboto-bold',sans-serif;
}
  
h2 {
    /* font-family: 'Roboto'; */
    font-family: 'roboto-bold',sans-serif;
    font-size: 47;
    color: red;
}

.tab-title{
    font-size: 30px;
    text-align: center;
    font-family: 'roboto-bold',sans-serif ;
    color: aqua;
}

<!doctype html>
<html lang="en">

<head>
  <title>Doora Invoice</title>
  <meta charset="UTF-8">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" href="demostyle.css">

</head>
<body>
  <main>
   <h2>hello</h2>
   <h3 class="tab-title"> overview</h3>
   <p>Hello</p>
  </main>

</body>

</html>

【问题讨论】：

这可能是您的unicode-range 定义的问题吗？我用谷歌搜索了5ff，我的第一个结果是，这不是有效的 unicode 字符：fileformat.info/info/unicode/char/5FF/index.htm 你可以尝试不定义 unicode-range 吗？
是的，我尝试不使用“unicode-range”，但结果仍然相同

标签： html css font-face font-family

【解决方案1】：

如果您想更改字体的 weight，请查看此内容，您必须在其中指定并从 google 字体系列中进行选择。如果您想更改字体系列名称，请访问此link

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

/*@font-face {
    font-family: 'Roboto',sans-serif;
    src: url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');
    font-weight: bold;
    font-display: swap;
    unicode-range: U+000-5FF;
  
} */
   
body {
   font-family: 'Roboto',sans-serif;
}
  
h2 {
    /* font-family: 'Roboto'; */
    font-family: 'Roboto',sans-serif;
    font-size: 47;
    color: red;
    font-weight: 400;
}

.tab-title{
    font-size: 30px;
    text-align: center;
    font-family: 'Roboto',sans-serif;
    color: aqua;
    font-weight: 700;
}

<!doctype html>
<html lang="en">

<head>
  <title>Doora Invoice</title>
  <meta charset="UTF-8">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" href="demostyle.css">




</head>
<body>
  <main>
   <h2>hello</h2>
   <h3 class="tab-title"> overview</h3>
   <p>Hello</p>
  </main>

</body>

</html>

【讨论】：

它可以工作，但是当硬刷新首先采用系统默认字体时会出现问题。在第二次采取字体系列字体
您必须在字体中使用预加载访问此developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload
在字体中也使用预加载