Объяснение загрузки Google Fonts ⇐ CSS

[Anonymous]

Я хотел бы знать, как Google Fonts определяет, какие шрифты загружать. Например, когда я использую это в своем CSS

Код: Выделить всё

@import '//fonts.googleapis.com/css?family=Roboto:300';

он ​​возвращает CSS, который интерпретируется немедленно (загрузка этого ресурса даже блокирует рендеринг браузера):

Код: Выделить всё

/* cyrillic-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light'), url(http://fonts.gstatic.com/s/roboto/v15/0eC6fl06luXEYWpBSJvXCIX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light'), url(http://fonts.gstatic.com/s/roboto/v15/Fl4y0QdOxyyTHEGMXX8kcYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
// ...and some more

Я всегда думал, что когда вы указываете URL-адрес (...) внутри CSS, браузер немедленно загружает этот ресурс.
Однако когда вы открываете это перо http://codepen.io/anon/pen/EgkvEr

Код: Выделить всё

@import '//fonts.googleapis.com/css?family=Roboto:300';

body {
font-family: 'Roboto';
}

Код: Выделить всё

Hello äöüß

и посмотрите на вкладку сети (возможно, очистите кеш), вы видим, что он загружает ровно два ресурса: http://fonts.googleapis.com/css?family=Roboto:300, а затем http://fonts.gstatic.com/s/roboto/v15/H ... s920.woff2, который представляет собой обычный латинский диапазон (определенный в нижней части CSS загруженного шрифта):

Код: Выделить всё

/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light'), url(http://fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfZBw1xU1rKptJj_0jans920.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

Итак, браузер смотрит, какие символы вы используете, и ПОТОМ загружает используемый шрифт? Или это зависит от настроек вашего браузера? Я не могу найти ресурс, документирующий такое поведение (или я ищу неправильное ключевое слово). Я подозреваю, что это как-то связано с диапазоном unicode: в нижней части CSS.

Подробнее здесь: https://stackoverflow.com/questions/396 ... -explained