Убедитесь, что текст остается видимым во время загрузки веб-шрифта и не решается в отчете о скорости страниц Google - PullRequest
Новая
       36

Убедитесь, что текст остается видимым во время загрузки веб-шрифта и не решается в отчете о скорости страниц Google

1 голос
/ 07 января 2020

Может ли кто-нибудь помочь мне здесь, ниже приведен мой код, куда я должен вставить swap для решения проблемы веб-шрифта в отчете о проникновении страниц в Google, так как я не могу заменить display: inline-block на display: swap. 

@font-face {
    font-family: 'FontAwesome';
    src: url('fonts/fontawesome-webfont.eot?v=4.5.0');
    src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal
}

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

Ответы [ 2 ]

1 голос
/ 09 января 2020

Вам необходимо добавить отображение шрифта к объявлению @ face-font.

Таким образом, ваш код будет: 

@font-face {
    font-family: 'FontAwesome';
    src: url('fonts/fontawesome-webfont.eot?v=4.5.0');
    src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

Подробнее см .: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face / font-display # Примеры

0 голосов
/ 28 февраля 2020

Вы также должны использовать Woff2 и woff, более чем на 40% легче. EOT не является хорошим решением.

Я написал статью об этом (на французском языке) для полной оптимизации шрифтов: Optimizer les fonts

...