【发布时间】：2022-01-12 19:34:46
【问题描述】：
Bootstrap nav（在 WordPress 中使用 Understrap 启动主题）在页面加载时会暂时丢失字体样式，在一段时间内加载默认字体，并暂时改变按钮大小，这里发生了什么以及如何修复它？
我尝试将!important 与font-family 一起使用，在所有CSS 选择器名称之前添加.navbar .navbar-nav，并在body 标记上添加id，并在CSS 选择器前面加上id .我仍然会遇到这种暂时的字体转换。
正在从 Google 字体加载字体。
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>【问题讨论】：
-
您是在使用过渡还是延迟加载 CSS？
-
@PraveenKumarPurushothaman 我不确定，我该如何解决？我正在使用 Understrap 主题。
-
哦...呃...您是否在页面加载后加载请求？我不确定您如何检查，但您可以检查网络选项卡吗？就像是先加载 HTML 然后调用 CSS 还是什么？
-
@PraveenKumarPurushothaman 它在网络选项卡中看起来是这样，页面是第一个条目，其他一切都在之后。但是我可以看到的所有 wordpress 网站在网络标签中都显示相同的内容。
标签： html css twitter-bootstrap