Слишком много шрифтов загружается из Google шрифтов

Question

Я встроил только один шрифт из шрифтов Google. это код для встраивания:

 <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet"> 

, но если я смотрю на сетевой монитор, загружаются 3 элемента шрифта и 1 css из шрифтов Google. Вот список шрифтов, которые я получаю:

Status  Method  Domain  File    Cause   Type    Transfered  Size

200 GET fonts.googleapis.com    css?family=Open+Sans&display=swap   stylesheet  css 557 B   2.53 KB
200 GET fonts.gstatic.com   mem8YaGs126MiZpBA-UFVZ0b.woff2  font    woff2   14.04 KB    14.04 KB
200 GET fonts.gstatic.com   mem8YaGs126MiZpBA-UFW50bbck.woff2   font    woff2   11.05 KB    11.05 KB
200 GET fonts.gstatic.com   mem8YaGs126MiZpBA-UFWp0bbck.woff2   font    woff2   5.89 KB 5.89 KB

Помимо этого у меня есть целый список шрифтов в прикрепленном css.

/* cyrillic-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFUZ0bbck.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFWZ0bbck.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVp0bbck.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFWp0bbck.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFW50bbck.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Почему это так?

Answer 1

Я встроил только один шрифт из шрифтов Google. это код для встраивания:

Это неправильно, вы ввели несколько гарнитур и наборов символов из шрифта семейства . Шрифт - это не что-то одно:

• семейство шрифтов (Arial)
  • гарнитура (Arial Regular)
  • гарнитура (Arial Itali c)
  • шрифт (Arial Bold)
  • шрифт (Arial Bold Itali c)

, где каждый шрифт затем разделяется далее на дополнительные файлы, которые содержат разные наборы символов.

Если мы посмотрим на файл CSS, загружается несколько шрифтов. Все они реализуют разные части шрифта Open Sans, в частности разные наборы символов:

• Open Sans cyrilli c -ext
• Open Sans кириллы c
• Open Sans греческий-ext
• Open Sans греческий
• Open Sans вьетнамский
• Open Sans latin-ext
• Open Sans латинский

Каждая запись объявляет диапазон символов Unicode, которые поддерживает файл.

Например, без этого файла вьетнамские символы не будут отображаться:

https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFWp0bbck.woff2

И без этого Символы файла в европейском латинском символьном пространстве не будут отображаться:

https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVZ0b.woff2

Аналогично, если вы выбрали itali c, полужирный , полужирный итальянский c, et c стилей, файл был бы добавлен для каждого.

Наконец вы не сказали браузеру загружать шрифты, вы сказал браузеру загрузить таблицу стилей, а таблица стилей загрузила шрифты, так что это еще один дополнительный файл.

Почему он не объединяет их в один файл?

Это не спасет любое файловое пространство при их отдельной загрузке, и с HTTP / 1 он может загружаться медленнее, поскольку не может передавать параллельно.

Однако, если я пишу сайт исключительно на кириллице c, действительно ли я нужны вьетнамские символы в шрифте? Выбирая только те сценарии, которые вы собираетесь использовать, вы экономите пропускную способность и ускоряете загрузку шрифтов. Вот почему Google дал вам файл для каждого сценария, вместо того, чтобы объединить все это в один файл.

Передача большого количества маленьких файлов таким способом дает лучшую производительность, чем передача одного большого файла благодаря HTTP / 2