Встроенные шрифты и внешний ресурс - PullRequest
Новая
       40

Встроенные шрифты и внешний ресурс

2 голосов
/ 17 февраля 2012

Я занимался проблемами веб-шрифтов в различных браузерах и следовал рекомендациям FontSpring , который, похоже, является последним рекомендуемым решением.

Однако, поскольку я использую CDN и обслуживаю свои файлы CSS из другого домена, я очень быстро обнаружил, что ни IE, ни Firefox не будут загружать веб-шрифты из CDN, выдавая ошибку, такую ​​как @font-face failed cross-origin request. В моем CSS у меня было что-то вроде следующего: 

@font-face {
    font-family: 'ClarendonRoman';
    src: url('/assets/fonts/clarendon-bt-webfont.eot?#iefix') format('embedded-opentype'),
       url('/assets/fonts/clarendon-bt-webfont.woff') format('woff'),
       url('/assets/fonts/clarendon-bt-webfont.ttf')  format('truetype'),
       url('/assets/fonts/clarendon-bt-webfont.svg#svgFontName') format('svg');
    font-weight: normal;
    font-style: normal;
}

Как видите, пути к шрифтам относятся к CSS, и в результате шрифты не загружаются из CDN. То, что мне было нужно, это жесткий код в домене сайта в мои таблицы стилей, чтобы шрифты загружались из одного источника. Итак, моя новая таблица стилей выглядит так: 

@font-face {
    font-family: 'ClarendonRoman';
    src: url('//mydomain.com/assets/fonts/clarendon-bt-webfont.eot?#iefix') format('embedded-opentype'),
       url('//mydomain.com/assets/fonts/clarendon-bt-webfont.woff') format('woff'),
       url('//mydomain.com/assets/fonts/clarendon-bt-webfont.ttf')  format('truetype'),
       url('//mydomain.com/assets/fonts/clarendon-bt-webfont.svg#svgFontName') format('svg');
    font-weight: normal;
    font-style: normal;
}

А теперь со встроенным доменом все отлично работает для HTTPS и HTTP-трафика. Тем не менее, я не совсем счастлив, так как я больше не использую свой CDN для обслуживания файлов шрифтов, и я сторонник производительности. Поскольку я не могу обойти проблему с доменом кросс-происхождения, я думал о внедрении шрифтов вместо этого. Если вы посмотрите на http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax,, то увидите, что они рекомендуют встроенный формат data-uri следующим образом: 

@font-face {
  font-family: 'MyFontFamily';
  src: url('myfont-webfont.eot?') format('embedded-opentype');
  }

@font-face {
  font-family: 'MyFontFamily';
  url(data:font/truetype;charset=utf-8;base64,BASE64_ENCODED_DATA_HERE)  format('truetype'),
  url(data:font/woff;charset=utf-8;base64,BASE64_ENCODED_DATA_HERE)  format('woff'),
  url('myfont-webfont.svg#svgFontName') format('svg');    
}

Итак, у меня довольно много вопросов по этому поводу:

  • Конечно, если я дважды внедряю шрифт в свою таблицу стилей, используя кодировку Base64 для форматов TTF и WOFF, я собираюсь раздуть свою таблицу стилей до такой степени, что, возможно, преимущество вложения сводится на нет удвоением или большим количеством данных в моем таблицы стилей?
  • Почему в этом примере src: не используется перед каждым URL (data: ...). Это опечатка или умышленное?
  • Если я встраиваю шрифты, все ли браузеры будут использовать встроенную версию поверх EOT-версии и, таким образом, сохранят обратную передачу на сервер? Какие браузеры будут использовать встроенные файлы TTF или WOFF?
  • Почему мы не встраиваем EOT-версию?

Я ценю, что в этом посте немало, но я надеюсь, что этот пост окажется полезным для тех, кто сталкивается с той же дилеммой.

Мэтт

...