Шрифт Face: внешний сайт предпочтительнее? - PullRequest
0 голосов
/ 08 ноября 2018

Я пытаюсь загрузить шрифты Google локально, используя шрифт face, и мне это удалось. Код:

<style>
    /* roboto-300 - latin */

    @font-face {
      font-family: 'Roboto';
      font-style: normal;
      font-weight: 300;
      src: url('src/common/fonts/roboto-v18-latin-300.eot');
      /* IE9 Compat Modes */
      src: local('Roboto Light'), local('Roboto-Light'),
      url('src/common/fonts/roboto-v18-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('src/common/fonts/roboto-v18-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
      url('src/common/fonts/roboto-v18-latin-300.woff') format('woff'), /* Modern Browsers */
      url('src/common/fonts/roboto-v18-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
      url('src/common/fonts/roboto-v18-latin-300.svg#Roboto') format('svg');
      /* Legacy iOS */
    }
  </style>

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

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700|Roboto:400,300,300italic,400italic,500,500italic,700,700italic" crossorigin="anonymous">

Из-за этого мои локально сохраненные шрифты игнорируются, и вызов к cdn продолжается, где также выбираются необходимые шрифты (например, https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBBc4.woff2). Если комментарий в этой строке, то шрифты выбираются из моего пункта назначения в font-face.

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

Я что-то упустил? Разве это не то, как должен работать font-face, т.е.

  1. Поскольку мои стили шрифтов предшествовали вызову https, их следует загрузить

  2. Кроме того, поскольку они загружаются, последующий вызов cdn от Google (вызовы, которые фактически извлекают нужные шрифты) не должен выполняться (https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBBc4.woff2)

Примечание: Внешний вызов присутствует в стороннем компоненте, поэтому я не могу закомментировать его в рабочей среде.

...