Как исправить Убедитесь, что текст остается видимым во время загрузки веб-шрифта - PullRequest
Новая
       107

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

2 голосов
/ 31 марта 2019

Привет, я сталкиваюсь с этой проблемой в google pagespeed. Я почти получаю скорость моего сайта до 100, осталось только Ensure text remains visible during webfont load

Я уже использую font-display: swap;так почему это не решает мою проблему.

вот мой внешний шрифт css 

@font-face {
    font-display: swap;
      font-family: 'Miriam Libre';
      font-style: normal;
      font-weight: 400;
      src: local('Miriam Libre Regular'), local('MiriamLibre-Regular'), url(https://fonts.gstatic.com/s/miriamlibre/v5/DdTh798HsHwubBAqfkcBTL_fZ5P7.ttf) format('truetype');
    }
    @font-face {
    font-display: swap;
      font-family: 'Miriam Libre';
      font-style: normal;
      font-weight: 700;
      src: local('Miriam Libre Bold'), local('MiriamLibre-Bold'), url(https://fonts.gstatic.com/s/miriamlibre/v5/DdT-798HsHwubBAqfkcBTL_X3LbrQsq_.ttf) format('truetype');
    }

Я сгенерировал этот css с помощью этих команд

npx local-webfont https://fonts.googleapis.com/css?family=Miriam+Libre:400,700 /Users/admin/Documents/projects/font.css fallback

, который я получил от https://github.com/swissspidy/local-webfont

1 Ответ

0 голосов
/ 09 июня 2019

Вы используете шрифты Google.Лучше добавить &display=swap, чтобы исправить проблему. 

<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:400,700&display=swap" rel="stylesheet">

Проверьте это: https://www.infyways.com/fix-ensure-text-remains-visible-during-webfont-load/

...