Почему @импорт шрифта google javascript readyState не завершен

#javascript #css

Вопрос:

Я импортирую шрифт из Google, но состояние chrome и Firefox показывает состояния журнала «интерактивно» не завершено

CSS

 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;900amp;display=swap');

язык JavaScript

 switch (document.readyState) {
    case "loading":
        // The document is still loading.
        console.log("load");
        break;
    case "interactive":
        console.log("interactive");
        break;
    case "complete":
        console.log("completed");
        break;
}

1. Из того, что я могу сказать , это связано с порядком загрузки DOM; таблица стилей должна быть готова до того, как будет готов документ. Но в конечном счете, документ уже загрузил таблицу стилей, так что действительно ли имеет значение, когда именно была загружена таблица стилей в процессе? Стили всегда будут применяться при правильном использовании; время никогда не является проблемой.

Ответ №1:

Во-первых, вы не связали свой файл css с файлом javascript ИЛИ не показали его здесь, вы можете связать его с помощью этой строки кода:

 import './mystyle.css'

Во-вторых, в вашем css-файле вы ничего не нацеливали после импорта шрифта, чтобы настроить таргетинг на все, вы можете просто использовать * вот так:

 * {
 font: 'fontname';
}

Итак, ваш полный код должен выглядеть следующим образом:

язык JavaScript:

 import './mystyle.css';

switch (document.readyState) {
    case "loading":
        // The document is still loading.
        console.log("load");
        break;
    case "interactive":
        console.log("interactive");
        break;
    case "complete":
        console.log("completed");
        break;
}

CSS:

 
@import url('https://fonts.googleapis.com/css 2family=Montserrat:wght@400;500;600;700;900amp;display=swap');

* {
 font:'fontname';
}