Bootstrap nav изменяет шрифт на короткое время при загрузке, мгновенно изменяя размер кнопок

ProgramBox

Bootstrap nav изменяет шрифт на короткое время при загрузке, мгновенно изменяя размер кнопок

Post author:admin
Запись опубликована:15 июля, 2022
Post category:Вопросы по программированию

#html #css #twitter-bootstrap

#HTML #css #twitter-bootstrap

Вопрос:

Bootstrap nav (в WordPress с использованием темы Understrap starter) на мгновение теряет стиль шрифта при загрузке страницы, загружая шрифт по умолчанию на мгновение и мгновенно изменяя размер кнопки, что здесь происходит и как это исправить?

Я пробовал использовать !important with font-family , добавляя .navbar .navbar-nav перед всеми именами селекторов CSS, добавляя id в body тег и предваряя этим селекторы 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;700amp;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>

Развернуть фрагмент

1. Вы используете переходы или отложенную загрузку CSS?

2. @PraveenKumarPurushothaman Я не уверен, как мне это понять? Я использую тему Understrap.

3. О … Эм… Вы получаете запросы, загруженные после загрузки страницы? Я не уверен, как вы можете проверить, но можете ли вы проверить вкладку «Сеть»? Например, сначала загружается HTML, а затем вызывается CSS или что-то в этом роде?

4. @PraveenKumarPurushothaman так выглядит на вкладке сеть, страница является первой записью, а все остальное — после этого. Но все сайты WordPress, которые я вижу, показывают то же самое на вкладке сеть.

Ответ №1:

Похоже, это распространенная проблема в WordPress. Проверьте эту тему, связанную с проблемой.

При более медленных соединениях мы сначала выводим текст шрифтом темы по умолчанию. Таким образом, люди могут начать читать ваш контент до загрузки пользовательского шрифта, вместо того, чтобы ждать, просматривая пустую страницу.

— Сказал сотрудник WordPress, «fstat»

С учетом сказанного, давайте посмотрим, как мы можем обойти это и сделать шрифт Google шрифтом темы по умолчанию в качестве приоритета.

Вариант 1. Вы можете импортировать шрифт Google с помощью CSS и с помощью @font-face селектора.

 @font-face {
  font-family: 'Roboto', sans-serif;
  src: url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700amp;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;700amp;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>

Развернуть фрагмент