Как работает @ font-face? - PullRequest
Новая
       26

Как работает @ font-face?

7 голосов
/ 20 октября 2010

Мне известно, что использование @ font-face позволяет браузеру загружать собственный шрифт и использовать его на веб-странице, как любой системный шрифт.

Что я хочу знать, так это то, что браузер кодирует шрифт или использует его, не раскрывая его?

Спасибо

Ответы [ 3 ]

6 голосов
/ 20 октября 2010

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

Таким образом, проблема обеспечения безопасности шрифтов решается либо на юридическом уровне (путем выбора шрифтов, который позволяет встраивать), либо с помощью схем обфускации на стороне сервера. Например, посмотрите на шрифты, встроенные через TypeKit: 

@font-face {
    font-family:"rosewood-std-fill-1";
    src:url(data:font/opentype;base64,d09GRgABAAAAAEa4ABMAAAAA2XwA.....);
    font-style:normal;
    font-weight:400;
}

Шрифт скрывается в процессе кодирования base64. Кроме того, шрифт разделен на две части, а количество глифов ограничено только теми, которые нужны сайту.

С другой стороны, просматривая наборы FontSquirrel и Google Font API @font-face, вы можете видеть, что фактический источник шрифта отправляется пользователю - не требуется запутывание. Кроме того, владельцы шрифтов могут требовать некоторую атрибуцию, например

Если шрифт бесплатный ($ 0,00 лицензионный сбор), вы можете использовать этот шрифт для встраивания шрифтов, но только если Вы помещаете ссылку на www.exljbris.nl на Ваша страница и / или поставить это уведомление 

/* A font by Jos Buivenga (exljbris) -> www.exljbris.com */

в вашем CSS файле как можно ближе к коду, который объявляет Внедрение шрифта этого шрифта.

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

2 голосов
/ 20 октября 2010

@font-face сообщает вашему браузеру, где скачать настоящий шрифт.

Например, при использовании веб-шрифтов Google они дают вам CSS, как это: 

@font-face {
  font-family: 'Cantarell';
  font-style: normal;
  font-weight: normal;
  src: local('Cantarell'), url('http://themes.googleusercontent.com/font?kit=p5ydP_uWQ5lsFzcP_XVMEw') format('truetype');
}

Если вы откроете URL-адрес (http://themes.googleusercontent.com/font?kit=p5ydP_uWQ5lsFzcP_XVMEw), ваш браузер загрузит фактический файл шрифта истинного типа.

Я скачал шрифты Google, используя этот метод (поэтому мои макеты в Photoshop имеют правильный шрифт).

0 голосов
/ 20 октября 2010

В большинстве случаев файл шрифта раскрывается в том смысле, что он напрямую связан с вашим CSS-файлом, и, таким образом, любой достаточно умный человек может загрузить шрифт и установить его на свой компьютер. Это частично объясняет, почему большинство коммерческих лицензий на шрифты запрещают их использование на веб-сайтах с @font-face. Но есть методы, которые ограничивают это. Например, проверьте параметр «Только веб» в генераторе шрифтов Font Squirrel @ font-face.

...