Это сайт — моя персональная записная книжка. Интересна мне, по большей части, история, своя жизнь и немного программирование.

Оптимизиция шрифтов с «Гугл фонт АПИ»

Благодаря Мицголу невозбранно узнал о существовании у «Гугл фонт АПИ» параметра «text», где можно перечислить буквы, которые вы будете использовать в шрифте. Это сильно сокращает размер скачиваемого шрифта. Напоминаю, «Гугл фонт АПИ» — это специальное АПИ для браузеров, позволяющее использовать свободные шрифты из коллекции Гугла. Шрифты подготавливаются автоматически, в зависимости от того, что поддерживает браузер:

bolk@Bolk ~/Projects/Ttt/exp (master) $ wget -O - --user-agent='Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)' http://fonts.googleapis.com/css?family=Rock+Salt 2>&-
@font-face {
  font-family: 'Rock Salt';
  font-style: normal;
  font-weight: normal;
  src: url('http://themes.googleusercontent.com/static/fonts/rocksalt/v1/Q94aHXFHGip10K5uxi1jOPY6323mHUZFJMgTvxaG2iE.eot');
  src: local('Rock Salt'), local('RockSalt'), url('http://themes.googleusercontent.com/static/fonts/rocksalt/v1/Q94aHXFHGip10K5uxi1jOD8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}

bolk@Bolk ~/Projects/Ttt/exp (master) $ wget -O - --user-agent='Opera/9.00 (Windows NT 5.1; U; en)' http://fonts.googleapis.com/css?family=Rock+Salt 2>&-
@font-face {
  font-family: 'Rock Salt';
  font-style: normal;
  font-weight: normal;
  src: local('Rock Salt'), local('RockSalt'), url('http://themes.googleusercontent.com/static/fonts/rocksalt/v1/Q94aHXFHGip10K5uxi1jOKCWcynf_cDxXwCLxiixG1c.ttf') format('truetype');
}

bolk@Bolk ~/Projects/Ttt/exp (master) $ wget -O - --user-agent='Mozilla/5.0 (X11; Linux i686; rv:6.0) Gecko/20100101 Firefox/6.0' http://fonts.googleapis.com/css?family=Rock+Salt 2>&-
@font-face {
  font-family: 'Rock Salt';
  font-style: normal;
  font-weight: normal;
  src: local('Rock Salt'), local('RockSalt'), url('http://themes.googleusercontent.com/static/fonts/rocksalt/v1/Q94aHXFHGip10K5uxi1jOD8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}

Для примера. Пусть у меня выбранный шрифт используется в двух фразах: «NEWS» и «ABOUT US», тогда строка запроса для этих двух заголовков будет выглядеть следующим образом (повторяющиеся буквы опущены, «%20» — это пробел):

http://fonts.googleapis.com/css?family=Rock+Salt&text=%20NEWSABOUT

Если сравнить размер шрифта без указания используемых букв и с ними, то разница выйдет более чем существенная:

bolk@Bolk ~/Projects/Ttt/exp (master) $ wget -O- `wget -O- 'http://fonts.googleapis.com/css?family=Rock+Salt' 2>&- | awk -F' '/http/{print $6}'` 2>&- | wc -c
  125136
bolk@Bolk ~/Projects/Ttt/exp (master) $ wget -O- `wget -O- 'http://fonts.googleapis.com/css?family=Rock+Salt&text=%20NEWSABOUT' 2>&- | awk -F' '/http/{print $6}'` 2>&- | wc -c
    6801

Как видно, размер файла сократился более чем в 18 раз!

12 комментариев
Аноний 2011

А кто такой Мицгол?

Евгений Степанищев (bolknote.ru) 2011

Комментарий для Аноний:

http://lurkmore.ru/%D0%BC%D0%B8%D1%86%D0%B3%D0%BE%D0%BB

greli (greli.livejournal.com) 2011

Комментарий для Евгения Степанищева:

…невозбранно узнал…

А можно узнать как-то иначе?

Евгений Степанищев (bolknote.ru) 2011

Комментарий для greli.livejournal.com:

Вы тоже не знаете кто такой Мицгол?

Астродроид Женя (efix.livejournal.com) 2011

Какой жирный, рыхлый у него слог! Я получил истинное удовольствие от прочтения! :)

Евгений Степанищев (bolknote.ru) 2011

Комментарий для efix.livejournal.com:

Слог очень питательный для троллей :)

hshhhhh.name 2011

А кто такой мицгол и что такое гиперстекстовый фидонет?

spiridonov@gmail.com 2011

Женя, или у тебя какая-то рафинированная аудитория блога, или они все издеваются :)

hshhhhh.name 2011

Комментарий для spiridonov@gmail.com:

А что такое блог?

Евгений Степанищев (bolknote.ru) 2011

Комментарий для spiridonov@gmail.com:

По-моему, они просто троллят, все кроме Грели.

Golden 2011

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

Евгений Степанищев (bolknote.ru) 2011

Комментарий для Golden:

Это очевидно, мне кажется.