Bootstrap nav(在WordPress中使用Understrap启动器主题(在页面加载时会暂时丢失字体样式，在一段时间内加载默认字体，并暂时更改按钮大小，这里发生了什么以及如何修复？
我尝试将!important与font-family一起使用，在所有CSS选择器名称之前添加.navbar .navbar-nav，在body标记上添加id，并在CSS选择器之前添加该id。我仍然有这种短暂的字体转换。
字体正在从谷歌字体加载。
li a.nav-link, li a.nav-link:link, li a.nav-link:hover{
letter-spacing: 0.02em;
text-transform: uppercase;
font-family: 'Roboto', sans-serif;
font-weight: 400;
color: #fff;
background-color: #000;
border-bottom: 4px solid #fff;
font-size: 15px;
float: left;
list-style: none;
text-align: center;
margin-left: 10px;
padding: 2px 16px 0 16px;
line-height: 36px;
}
li a.nav-link:active, .active a.nav-link, li a.nav-link:focus{
letter-spacing: 0.02em;
text-transform: uppercase;
font-family: 'Roboto', sans-serif;
font-weight: 400;
color: #000;
background-color: #fff;
border-bottom: 4px solid $000;
font-size: 15px;
float: left;
list-style: none;
text-align: center;
margin-left: 10px;
padding: 2px 16px 0 16px;
line-height: 36px;
}<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
</head>
<nav id="main-nav" class="navbar navbar-expand-md bg-primary" aria-labelledby="main-nav-label">
<h2 id="main-nav-label" class="sr-only">
Main Navigation</h2>
<div class="container">
<div id="navbarNavDropdown" class="collapse navbar-collapse">
<ul id="main-menu" class="navbar-nav align-items-end ms-auto">
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-73" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-73 nav-item"><a title="Home" href="/" class="nav-link">Home</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-74" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-74 nav-item"><a title="" href="/section1/" class="nav-link">Section 1</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75 nav-item"><a title="" href="/section2/" class="nav-link">Section 2</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76 nav-item"><a title="" href="/section3/" class="nav-link">Section 3</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-77" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-38 current_page_item active menu-item-77 nav-item"><a title="" href="/section4/" class="nav-link" aria-current="page">Section 4</a></li>
</ul>
</div>
</div>
</nav>这似乎是WordPress中的一个常见问题。查看与问题相关的此线程。
在较慢的连接上，我们首先以主题的默认字体显示文本。这样，人们就可以在加载自定义字体之前开始阅读您的内容，而不是在查看空白页面时等待。
WordPress工作人员说；fstat"；
话虽如此，让我们看看如何解决这一问题，并将谷歌字体作为主题默认字体作为优先事项。
选项1:您可以使用CSS和@font-face选择器导入谷歌字体。
@font-face {
font-family: 'Roboto', sans-serif;
src: url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
}
选项2:您可以将font-family设置为body和*通用选择器。
这将需要在HTML周围放置<body>标记。
body {
font-family: 'Roboto', sans-serif;
}
* {
font-family: 'Roboto', sans-serif;
}
li a.nav-link, li a.nav-link:link, li a.nav-link:hover{
letter-spacing: 0.02em;
text-transform: uppercase;
font-weight: 400;
color: #fff;
background-color: #000;
border-bottom: 4px solid #fff;
font-size: 15px;
float: left;
list-style: none;
text-align: center;
margin-left: 10px;
padding: 2px 16px 0 16px;
line-height: 36px;
}
li a.nav-link:active, .active a.nav-link, li a.nav-link:focus{
letter-spacing: 0.02em;
text-transform: uppercase;
font-weight: 400;
color: #000;
background-color: #fff;
border-bottom: 4px solid $000;
font-size: 15px;
float: left;
list-style: none;
text-align: center;
margin-left: 10px;
padding: 2px 16px 0 16px;
line-height: 36px;
}<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
</head>
<body>
<nav id="main-nav" class="navbar navbar-expand-md bg-primary" aria-labelledby="main-nav-label">
<h2 id="main-nav-label" class="sr-only">
Main Navigation</h2>
<div class="container">
<div id="navbarNavDropdown" class="collapse navbar-collapse">
<ul id="main-menu" class="navbar-nav align-items-end ms-auto">
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-73" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-73 nav-item"><a title="Home" href="/" class="nav-link">Home</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-74" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-74 nav-item"><a title="" href="/section1/" class="nav-link">Section 1</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75 nav-item"><a title="" href="/section2/" class="nav-link">Section 2</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76 nav-item"><a title="" href="/section3/" class="nav-link">Section 3</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-77" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-38 current_page_item active menu-item-77 nav-item"><a title="" href="/section4/" class="nav-link" aria-current="page">Section 4</a></li>
</ul>
</div>
</div>
</nav>
</body>