Пользователь
0,0
рейтинг
14 сентября 2010 в 11:03

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

Недавно столкнулся с задачей прикручивания достаточно необычного шрифта для мобильного веб клиента. Так как работа была под айфон, то я решил, что в этой задаче мне поможет 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;
 }
Перевод: Paul Irish
Андрей Ребров @mythmaker
карма
152,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (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
                  удобочитаемость.
            • 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
    Да, но зачем?

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