Прикручиваем клевые шрифты с помощью @font-face

http://www.html5rocks.com/tutorials/webfonts/quick/
  • Перевод
Недавно столкнулся с задачей прикручивания достаточно необычного шрифта для мобильного веб клиента. Так как работа была под айфон, то я решил, что в этой задаче мне поможет css 3 и такая штука как @font-face. Пользу от такого способа решения задачи, я думаю, видят все, потому что:
  • сохраняется поиск по тексту, потому что это текст, а не картинка;
  • появляется возможность использовать онлайн-переводчики и разные фишки связанные с текстом;
  • никто не отменяет для нас использование line-height, letter-spacing, text-shadow,text-align, и селекторов вида ::first-letter и ::first-line


Итак, чтобы начать использовать нужный шрифт создаем следующую запись в файле со стилями
@font-face {
 font-family: 'Tagesschrift';
 src: url('tagesschrift.ttf'); 
}


И теперь лишь остается дописать название нового шрифта
h1,h2,h3 { font-family: 'Tagesschrift', 'Georgia', serif; }

Теперь кратко, что мы сделали. Свойство font-family указывает на то, как в нашей системе будет называться новый шрифт. Называть можно как угодно, главное чтобы потом можно было вспомнить, что же вы имели ввиду. Свойство src указывает на файл с самим шрифтом. Поддерживаются следующие форматы шрифтов: eot, ttf, otf, svg, woff.

image

Как видно, многообразие браузеров добавляет радости, так что приведенный выше код придется переписать вот так:
@font-face {
 font-family: 'Tagesschrift';
 src: url('tagesschrift.eot'); /* IE 5-8 */
 src: local(''),       /* sneakily trick IE */
    url('tagesschrift.woff') format('woff'),  /* FF 3.6, Chrome 5, IE9 */
    url('tagesschrift.ttf') format('truetype'), /* Opera, Safari */
    url('tagesschrift.svg#font') format('svg'); /* iOS */
}

Сложно? Однозначно, поэтому по ссылке читаем пару интересных штук. А еще для упрощения жизни используем вот этот сервис. Загружаем в него шрифт и он генерит нам css.

Теперь обратимся к горячо любимым мною мобильным устройствам. Как видно по таблице, на андроиде и айфоне все так или иначе поддерживает. Но здесь проблемы возникает по следующей причине. Пока шрифт грузится, а это овер 50к, ВЕСЬ текст будет невидимым, поэтому со шрифтами в мобильных веб приложениях следует быть осторожнее.

На этом с программированием все и теперь пара слов о нескольких сервисах, которые могут быть полезны при работе со шрифтами в вебе.

Во-первых, Font Previewer — сервис от гугла, который позволяет сразу посмотреть как будет выглядеть тот или иной шрифт и получить готовый css стиль.
И не отходя далеко еще одна разработка гугла — Google font API, API позволяющее добавлять любые шрифты в любую разработку.

По аналогии с Google Font API есть еще ряд сервисов — WebInk, Typekit, и Fontslive. Их отличие в том, что они платные.

В качестве посткриптума, отошлю всех к проблеме FOUT. Если кратко, то она заключается в следующем — при указании нескольких шрифтов в свойстве font-family может произойти проблема, что применился второй шрифт из указанных, пока первый еще подгружается. Данная проблема проявляется в Firefox и Opera. Если вы с ней столкнулись, то следует вновь обратиться к гуглу и его js библиотеке WebFont Loader. Ниже пример работы с этим скриптом

<script src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
WebFont.load({
  custom: {
  families: ['Tagesschrift'],
  urls : ['http://paulirish.com/tagesschrift.css']
}
});
</script>



И затем стиль

.wf-loading h2 {
   visibility: hidden;
  }
 .wf-active h2, .wf-inactive h2 {
   visibility: visible;
   font-family: 'Tagesschrift', 'Georgia', serif;
 }
Поделиться публикацией
Похожие публикации
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама
Комментарии 48
  • 0
    Кажется уже было.

    Но статья хорошея, молодец.
    • 0
      Ага, Firefox поддерживает шрифты в формате SVG, да еще и с весрии 3.5. Может он уже и Acid3 проходит, а я все проспал? Колитесь, где изображение брали? :)
      • 0
        Все по ссылке)
        • +1
          Да, вы правы. От сей новости я забыл по ней (ccskrt) пройти, но сути это не меняет. Firefox не поддерживает шрифты в формате SVG — причина, демка. Перевод это конечно же классно, у самого с английским туговато иной раз, но все же должен быть какой-то анализ материала…
          • +1
            Ок, просто Paul Irish для меня очень серьезный человек и ему я привык доверять.
            • 0
              так перечеркните или в статью комент внесите
      • +1
        А что это за смайлик, который служит хаком для IE?
        • +1
          Подробно об этом смайлике можно прочитать вот тут.
          • +6
            зашёл по ссылке, поводил по серым полям слева и справа страницы, забыл зачем пришёл :))
            • +1
              О, теперь можно быстро модную шапку сайта нарисовать)
              • 0
                Кто-нибудь знает как это сделано? Хочу сделать нечто подобное, голова тупит как спросить у гугля.
                • 0
                  это Harmony вроде
                  • 0
                    Спасибо, буду смотреть как его прикрутить
                • 0
                  А что там такого? я чего-то не понимаю или браузер не тот =(
                  • 0
                    Движение мыши оставляет на фоне страницы след. Причем вид следа зависит от угла и скорости движения. Очень забавная фенька. Работает в хроме под виндой точно.
                    • 0
                      В хроме действительно забавно, но FF не воспринимает это искусство
            • 0
              Мне кажется в данный момент Cufon куда актуальней
              • +1
                вам кажется абсолютно неправильно…
              • +7
                блин, ну не надо, я вас очень прошу, пожалуйста.
                я не хочу качать (мобильником тем более) мегабайт шрифтов, чтобы прочитать 100 байт информации.
                • 0
                  OperaMini в помощь, а иначе смысл открывать браузер с поддержкой всего и вся (по сути)? Да и шрифты не факт, что мегабайты весить будут…
                  • +2
                    да побойтесь бога, говорить такие вещи, ну же!
                    я всегда полагал, что задача дизайнера — делать жизнь людей удобнее и проще, а не заставлять пользоваться какими-то ни было инструментами для подчеркивания его, дизайнера, никому не интересной индивидуальности.

                    а смысал открывать такой браузер — в доступной функциональности, а не дизайнерских «клевых»© штучках.
                    • 0
                      Просто вы думаете исключительно из собственных соображений. Ну а если вам вдруг изображения нравятся перестанут, то и их запретить? Если есть возможность, то ей можно пользоваться. Вот, к примеру, я взял первый шрифт «graffiti.svg» по ссылке, которую приводил выше. Этот шрифт весит ~ 113кб. Скорее всего его можно сжать gzip'ом. В итоге получается ~50кб. Выкиньте из него лишние символы и получится и того меньше.

                      В наше время народ (не конкретно вы) любит вешать jquery и т.п. на всекую хрень, решаемую кроссбраузерно в пару строчек кода, зато возмущается из-за якобы страшного веса подключаемых шрифтов…
                      • +2
                        Еще раз подчеркну, если сразу не достаточно понятно объяснил: подключенный jquery добавляет функциональности (читай: удобства), дополнительные шрифты — ничего, кроме повышения чсв дизайнера, не делают в 99% случаев.
                        • 0
                          jquery я привел как пример того, что тоже имеет свой вес и порой используется не по назначению только лишь из-за того, что некотрые индивиды (опять же без намеков на кого-то определенного) практикуют метод «копировать / вставить». Шрифты, как и графика, и оформление в целом, доводят до пользователя то, что задумал дизайнер.

                          Сия дискуссия зашла в тупик, ибо каждый в праве выбрать для себя предпочтительный вариант. Следовательно продолжать далее смысла нет.
                          • +1
                            доводят до пользователя то, что задумал дизайнер

                            Вот именно! :)
                            • +1
                              А ведь aubt прав. Скрипты несут функциональность и решают проблемы юзабилити, картинки несут информацию. Шрифт — ничего, кроме пожиранию ресурсов не дает.
                          • 0
                            Вы технарь и 90% людей на хабре технари, но есть еще и гуманитарии, я как истенный технарь тоже считаю гумонитариев челокеками с огр. возм., однако вынужден считаться с их наличием. Кому-то так важен функционал (табы, или еще что-то), а кому-то важно качество типографики, кому-то важно что заголовок выглядт ахрененно красиво. У меня в студии, например, есть такой термин — функциональный дизайн. Это когда frontend программист и верстальщик деалет страницу функционально — чтобы все работало, с минимум «рюшичек», по мне такие штуки ужасно удобны и практичны, но ниодна из них в таком виде не уходит в продакшен. Почему? да потому что пользуются этим другие люди с другими эстетическими особенностями и говорить что «мне не нужен шрифт» глупо, ведь вы делаете не для себя, а для своих пользователей. Если тема реально для вас важна, то используйте тестирование: Сделайте версию от дизайнера с использованием шрифтов, и сделайте версию без их использования и посмотрите где конверт выше — это правильный подход. удачи.
                    • 0
                      Кэширование еще никто не отменял.
                      • +3
                        То что вы так говорите — это ужасно.
                      • +1
                        Я думаю можно будет отключить загрузку шрифтов. Вот чего действительно не надо, так это флеш банеров. Хорошо, что отключаются они без проблем.
                        • 0
                          Шрифты после удаления лишних наборов символов и самих символов весят совсем немного, к тому же хорошу гзапятся. так что какой-нибудь Calibri весит примерно 40-50 кбайт.
                        • +2
                          если у меня будет инет 3Г и смартфон, то я постараюсь отключить подгрузку всяких левых шрифтов. Слишком уж вы, дизайнеры, много хотите.
                          • 0
                            У меня была проблема в Опере, на одном компе — работает, на другом нет…
                            А было еще: в 10 работает, а в 10.5 уже нет =(((
                            • 0
                              а мне вот не нравится как такие шрифты ведут себя, если отключено сглаживание. зрелище печальное очень и никто не фиксит
                              • 0
                                По соседству появился отличный топик в тему.
                                • 0
                                  Огромное спасибо за статью. Но есть небольшая проблема, пытаюсь прикрутить шрифт, англиские буковки отображаются как и должны, русские — нет.
                                  • 0
                                    Вполне может быть, что этот шрифт не поддерживает русские символы.
                                    • 0
                                      Поддерживает, шрифт HeliosCondensed.
                                      Вчера побывал прикрутить с помощью typeface.neocracy.org/ но выходит плохо.
                                      • 0
                                        после конвертации у меня почему-то буква «М» прыгает…
                                    • 0
                                      Начинаю догадываться в чём дело. Конвертер плохо конвертирует, уже в получившихся файлах шрифтов кириллица отсутствует.
                                      Посоветуйте конвертер OTF в EOT, TTF, SWG, WOFF.
                                      • 0
                                        Сам спросил, сам отвечаю. Для того чтобы в конечных файлах шрифтов была кириллица нужно: прейти в режим эксперта, в настройка subsetting поставить Custom Subsetting. B uалочками отметить что именно нам нужно.
                                    • 0
                                      Пока использую куфон, т.к. Опера что-то то любит, то не любит @font-face.
                                      • +1
                                        >> Пока шрифт грузится, а это овер 50к

                                        используйте русский язык, прошу Вас!
                                        • 0
                                          Привет, есть вопросик на засыпку, почему firefox грузит 2 раза *.woff шрифт?
                                          • 0
                                            Да, но зачем?

                                            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.