Как этот шрифт в CSS3 встроен в файл css?

Я искал, как ускорить время загрузки страницы, и мне нужно настроить загрузку шрифтов CSS3 @font-face на страницу.

Я просматривал исходный код некоторых других сайтов и заметил, что у них шрифт каким-то образом встроен в файл css (насколько я могу судить).

Ниже приведен пример с basecamp.com. Если вы посмотрите на файл css, вы увидите, что шрифт встроен в css. :

    @font-face {
  font-family: 'ProximaNova';
  src: url(data:font/opentype;charset=utf-8;base64,d09GRgABAAAAA0ABIAAA...[redacted]..xBeTUFYWAA==) format("woff"), url(data:font/truetype;charset=utf-8;base64,AAEAAAASAQAABAAgRkZUTWAFSKIAAAE...[redacted]...EsBYgRbIVHgIrsQNGditEWbAUKw==) format("truetype"), url("/assets/fonts/ProximaNova-Reg-webfont.svg#ProximaNovaRegular") format("svg");
  font-weight: normal;
  font-style: normal; }

Как бы вы сделали перевод шрифта в этот формат? Как это работает?

Можно сократить время загрузки на пару сотен миллисекунд и уменьшить количество запросов к серверу, так что в целом это кажется хорошей идеей.

Спасибо.


fonts css font-face truetype
person MintDeparture    schedule 10.04.2012    source источник

Ответы (1)


arrow_upward
4
arrow_downward

URL-адреса данных позволяют встраивать фактические данные ресурса в сам URL-адрес. Это очень удобно для небольших ресурсов, но в меньшей степени для больших, поскольку они закодированы как base64 и приводят к раздуванию встроенных текстовых ресурсов.

Что вам нужно сделать, так это закодировать соответствующий файл шрифта, используя кодировку base64 (существует ряд онлайн-конвертеров, таких как этот), а затем укажите правильный тип контента в URL-адресе данных.

person Alexander Pavlov    schedule 10.04.2012