html - Bootstrap 导航在加载时会短暂更改字体，从而暂时改变按钮大小

标签 html css twitter-bootstrap

Bootstrap 导航(在 WordPress 中使用 Understrap 启动主题)在页面加载时暂时丢失字体样式，瞬间加载默认字体，并暂时改变按钮大小，这里发生了什么以及如何修复它？

我尝试将 !important 与 font-family 一起使用，在所有 CSS 选择器名称之前添加 .navbar .navbar-nav，并在 body 标记上添加 id，并在 CSS 选择器前面添加该 id。我仍然遇到这种短暂的字体变化。

正在从 Google Fonts 加载字体。

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 中的一个常见问题。查看this thread与问题相关。

On slower connections, we display text in the theme’s default font first. This way, people can start reading your content before the custom font loads, instead of waiting while looking at a blank page.

-- WordPress 工作人员说，"fstat"

话虽如此，让我们看看如何解决这个问题，并优先将 google 字体设置为主题默认字体。

选项 1:您可以使用 CSS 并使用 @font-face 导入 google 字体。选择器。

@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和*通用选择器。

这需要将 <body> HTML 周围的标签。

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>

关于html - Bootstrap 导航在加载时会短暂更改字体，从而暂时改变按钮大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/70265035/

上一篇：jq - 如何使用 jq cmd 忽略某些值并打印其余值

下一篇：android - 组合多个 Kotlin 流以获得它们的当前值

相关文章：

html - 我必须在页面的顶部中心对齐图像。我已经尝试了几乎所有我知道的可能的事情

javascript - jQuery 悬停以交换图像不起作用

javascript - 增加进度条上的时间

javascript - Scrollspy 不工作 Bootstrap 4

javascript - Bootstrap 轮播 - JavaScript 不适用(DNN)

css - 仅对 Bootstrap 3 中分配给特定 Div 的 Popover 应用样式的问题

php - 如何在从 PHP 从数据库中检索数据时将 2 个单元格加入表中？

php - 在 php 中显示图像

javascript - 旋转图像不能很好地放置在父容器中

html - 缩小时，Safari 浏览器中的文本字段与旁边的按钮的高度不相等

©2024 IT工具网  联系我们