Должен ли я локально хранить CSS, сгенерированный API Google Web Fonts?

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

У меня вопрос, в какой момент он это делает?

Причина в том, что для API вы можете просто включить файл CSS, который содержит @font-face запрос. Могу ли я просто включить этот CSS в свой собственный файл CSS, сохранив таким образом HTTP-запрос, или этот CSS меняется в зависимости от браузера, который его запрашивает?

Я действительно надеюсь, что это имеет смысл.

Например, Google предлагает включить в файл CSS следующее:

@import url(http://fonts.googleapis.com/css?family=Exo);

содержание которых:

@font-face {
  font-family: 'Exo';
  font-style: normal;
  font-weight: 400;
  src: local('Exo Regular'), local('Exo-Regular'), url('http://themes.googleusercontent.com/static/fonts/exo/v1/ZcGd2dvMSgl3mHN3lKAjNw.woff') format('woff');
}

3 ответа

Решение

CSS, обслуживаемый Google Webfonts, изменяется в зависимости от пользовательского агента в заголовке HTTP-запроса, поэтому вам лучше использовать @import. Причина заключается в разных реализациях веб-шрифтов в разных браузерах.

Не ответ на ваш точный вопрос, но даже если бы это было возможно в данный момент, я бы никогда не кэшировал локально любой CSS, который Google обслуживает "вживую", потому что:

  • даже если это работает сейчас, оно может сломаться позже, если они что-то изменят

  • Вы не добавляете никакой надежности, потому что сам шрифт все еще должен быть выбран из Google

  • вы не сильно улучшите производительность: если все настроено правильно, HTTP-запрос будет выполнен только один раз и впоследствии будет кеширован. Кроме того, пользователь может иметь CSS-шрифт, кэшированный с другого сайта, который использует Google Fonts.

Если вы хотите хранить локальный CSS, тогда вы ДОЛЖНЫ также хранить шрифт локально, потому что в противном случае у него снова будет дополнительный HTTP-запрос.

А Google позволяет загружать шрифт для локального использования, но вы также можете проверить наличие Интернета. https://developers.google.com/webfonts/faq

Другие вопросы по тегам