лицо шрифта вызывает проблемы с производительностью - PullRequest
Новая
       6

лицо шрифта вызывает проблемы с производительностью

3 голосов
/ 14 января 2012

Когда мой сайт загружается, происходит остановка на несколько секунд, прежде чем браузер отображает текст, отображаемый шрифтом face (текст с шрифтом arial отображается немедленно).

Я получаю жалобы от пользователей, которые замирают до 10 секунд.

Что я могу с этим поделать?

вот как я могу вставить шрифтлицо: 

@font-face{
    font-family:'GillSans';
    src:url('../fonts/GIL_____.eot');
    src:url('../fonts/GIL_____.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GIL_____.woff') format('woff'),
        url('../fonts/GIL_____.ttf') format('truetype'),
        url('../fonts/GIL_____.svg#GillSans') format('svg');
}
@font-face{
    font-family:'GillSansB';
    src:url('../fonts/GILB____.eot');
    src:url('../fonts/GILB____.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GILB____.woff') format('woff'),
        url('../fonts/GILB____.ttf') format('truetype'),
        url('../fonts/GILB____.svg#GillSansB') format('svg');
}
@font-face{
    font-family:'GillSansBI';
    src:url('../fonts/GILBI___.eot');
    src:url('../fonts/GILBI___.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GILBI___.woff') format('woff'),
        url('../fonts/GILBI___.ttf') format('truetype'),
        url('../fonts/GILBI___.svg#GillSansBI') format('svg');
}
@font-face{
    font-family:'GillSansI';
    src:url('../fonts/GILI____.eot');
    src:url('../fonts/GILI____.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GILI____.woff') format('woff'),
        url('../fonts/GILI____.ttf') format('truetype'),
        url('../fonts/GILI____.svg#GillSansI') format('svg');
}

1 Ответ

5 голосов
/ 14 января 2012

Попробуйте сжать и кэшировать ваши шрифты. Если вы используете Apache, вы можете настроить это, используя .htaccess

Вот очень полезный обзор от гуру производительности Стив Саундерс

Дополнительная информация и ресурсы

Если вы используете Apache и модули mod_expires и mod_deflate включены, вы можете добавить следующие правила в ваш .htaccess 

<IfModule mod_expires.c>
  Header set cache-control: public
  ExpiresActive on

  ExpiresByType font/ttf      "access plus 1 month"
  ExpiresByType font/woff     "access plus 1 month"
  ExpiresByType image/svg+xml "access plus 1 month"
</IfModule>

<IfModule mod_deflate.c>
  <FilesMatch "\.(ttf|otf|eot|svg)$" >
    SetOutputFilter DEFLATE
  </FilesMatch>
</IfModule>

После добавления вышеуказанного в .htaccess, проверьте соответствующие поля заголовка для проверки.

Если вам интересно узнать больше, ознакомьтесь с советами по скорости для управления кэшем и сжатия .

...