Пользователь
0,0
рейтинг
20 мая 2010 в 02:04

Разработка → Google представил API для кроссбраузерного подключения шрифтов

Google Font API — API для подключеня нестандартных шрифтов.
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="_http://fonts.googleapis.com/css?family=Tangerine">
    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <h1>Making the Web Beautiful!</h1>
  </body>
</html>
Google определяет браузер и выдает валидный для него CSS и шрифт.

Google Font Directory — набор шрифтов.
WebFont Loader — JavaScript библиотека для расширенной работы с API.
Маргарита @Margaritka
карма
39,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

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

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

Комментарии (100)

  • +31
    Сколько сегодня хороших новостей от Google.
    Google молодец!
  • +2
    просто супер, как просто пользоваться, порадовали!
    теперь другой вопрос: как свои шрифты закачать?
  • +2
    Гугл никак не перестает радовать… сначала видео, потом шрифты…
    сегодня отличный день =)
    воистину — корпорация Добра
    • 0
      также радует поддержка кириллицы в шрифтах, жаль, что не во всех
      такой полюбившийся мне Cantarell пока кириллицу не содержит, буду надеяться, что временно
      • +1
        А где там кириллические шрифты?
        • 0
          Droid Sans, например
          • 0
            я тут не вижу кириллицы
            code.google.com/webfonts/family?family=Droid+Sans#set
            • +2
              зато я вижу ее, сделав себе демо
              пример:
              www.deniam.net/_/habr/font.html
              • 0
                Понял, спасибо.
                Видимо там не вся таблица символов.
                • +1
                  PS
                  Хороший шрифт :)
                  • 0
                    да, неплохой на самом деле
                    буду использовать в проектах, хоть какое-то начало разнообразия
                    к сожалению, не могу проверить работу всего этого в ИЕ6 (у меня его нет), но по правде говоря, не особо и переживаю за тех, кто до сих пор на нем
                    • +1
                      в IE6 страница работает норм
                      kamana.ru/screenshot/20100520-o3f-56kb.jpg
                      • 0
                        это радует
                        спасибо за тест
                        • +1
                          в safari/webkit одни только знаки вопроса.
                          • +1
                            кодировочку по меняйте на кирилическую, ато автоопределение у них хромает немного…
                          • +1
                            Там что-то не то с кодировкой, безотносительно веб-шрифтов (поставьте вручную win-1251). А вот в Опере какая-то проблема, они не включаются, отображается таймсом.
                • 0
                  наверное
                  там еще несколько есть с поддержкой кириллицы, я проверял
                  правда, не все выглядят хорошо на мелких пунктах (12-14)
              • 0
                в FF не так отображается как ниже на скриншоте из IE6
                • 0
                  странно и обидно
                  в Хроме и ИЕ работает
              • 0
                у меня не работает и в хроме. у вас точно этот шрифт не установлен в системе?
                • 0
                  да, проверил
                  в системе шрифта нет
  • –1
    Не плохо. Хорошее решение взамен @font-face. Еще бы свой шрифт закачать можно было.
    • +7
      это и есть @font-face… посмотрите подключаемый css
      • +1
        Каюсь, глупость сказал. Подумал про sIFR, а написал @font-face.
    • +1
      смысл этого API в том, что не надо будет качать один и тот же шрифт каждый раз — достаточно один раз его скачать и он будет в кэше. А свой шрифт можно зачать, как сделать? прочитать FAQ. RTFM!
  • 0
    Надо только _ убрать из URL, а то не работает пример. Tangerine выглядит похоже на пропись.
  • +1
    У меня IE в приведенном примере игнорирует выставленный размер шрифта %)
  • +3
    Жаль в опере не работает
    • +1
      Все ок у меня
    • +3
      В опере через раз работает, font-face криво реализован
      • +6
        Ну а что вы минусуете, к сожалению, это правда, сохранив код из топика на диск и нажимая f5 можно увидеть случайным образом одно из следующих состояний.
        • +1
          Вот вам и опера.
          • 0
            Хм, win xp, opera 10.53, раз 10 рефрешил — все ок.
        • 0
          знак подчеркивания, точно не забыли убрать?
        • 0
          Сейчас вот столкнулся с этой проблемой, в Orchard cms шрифты подключаются через Google API, в опере перестали работать :) Может есть какой-нибудь изящный костыль для отображения?
  • +8
    Предвижу нездоровое буйство шрифтов на домашних страницах «супермегадизайнеров» и их несчастных жертв.
  • –2
    Кто-то смотрел через Browsershots уже (думаю да, у них лимит на url)? Расскажите насколько лучше чем этот метод?
    • –1
      это font-face и есть. посмотрите подключаемый css
  • +1
    че по кириллице?
  • НЛО прилетело и опубликовало эту надпись здесь
    • +4
      Какой вы параноик, ей богу.
      Не успеет кто-нибудь реализовать действительно полезную фичу, как находятся люди, увидевшие в этом нечто плохое. И так всегда…
    • +4
      А я ничего негативного в этом не вижу. Наоборот, считаю, что это «тру-вэй». Интернет рано или поздно унифицирует себя. Мы же пользуемся хостингом сайтов, баз данных, файлов, размещаем сервера в дата-центрах и даже подключаем js-библиотеки с того же гугла и ничего в этом «эдакого» не видим. Чем же шрифты не угодили?
      • 0
        ну, не знаю, я вот не стараюсь не подключать библиотеки напрямую с гугля, после того, как упавший на короткое время сервис, отдававший мне analytics, убил мне сайт…
        • 0
          Ну, это единичные случаи, и такое бывает. Думаю вероятность ошибки администраторов хостинга не ниже, а местами и выше, нежели подобный инцидент. У самого были случаи, когда часть сайта была недоступна из за того, что админы при апгрейде чего-то намудрили с CGI.
          Я вообще говорил о том, что подобные сервисы — это хорошо, и в потенции на будущее, очень перспективный и практичный подход. Даже исходя из того, что такие монстры как Google и Яndex (на счет последнего не уверен) используют CDN, доступность контента с их серверов выше, плюс большинство провайдеров держат их в приоритетных очередях что сулит более высокую скорость загрузки JS у клиентов, etc.
          А вообще — каждый волен выбирать сам как ему удобнее и «симпатишнее» © by Фрекен Бок
          • 0
            с основным вашим утверждением я никоим образом не спорю, мне тоже нравится тенденция.
    • +3
      Гугл явно желает видеть легко распознаваемый текст там, где сейчас горе-дизайнеры и горе-верстальщики обходятся надписями-картинками. Похвальное желание :)
      • 0
        Разрешите вступиться за честь так называемых «горе-верстальщиков», а что же им остается делать, если горе-дизайнеры уже убедили клиентов, что можно использовать нестандартный шрифт? Вот и приходится использовать куфон, что по своей сути и является картинкой.
        • –1
          Куфон не картинка в том плане, что из кода страницы легко выцепить текст. Можно экспериментировать с @font-face. Идеальный вариант — убить горе-дизайнера :)
  • +1
    А как свой шрифт то подключить?
    • +2
      Если вы не способно понять это прочитав FAQ — вам этого не надо.
      • +1
        А. то есть, если в моей школе не было учителя, англ. языка и пришлось учить нем., то я не нуб убогий, которому ниче не надо, да?
        • –4
          человек не знающий ангельского не человеке.txt

          Да и знать его толком не надо, чтобы осилить этот FAQ…
        • 0
          сходите на курсы
          • –3
            Дак может всех на курсы? А? давайте! И Гос. язык сделаем англ. Хуль, не люди что ли. А кто не захочет — расстрел, хуль, не людей не жалко.
            Мне вот с моей работой тока и хочется еще после нее пойти на курсы какие нить. А когда мне понадобится небольшая консультация в JS, то я пойду на курсы JS, да?
            • –1
              Не хотите на курсы — купите книжку. Или вон ЛингвоЛео специально для вас сделали. Английский — язык международного общения, не зная его хотя бы на базовом уровне, вы добровольно запираете себя в информационном гетто.
  • 0
    Для тех кто сам не может 4 строчки написать. Очень крутая разработка;)
  • +8
    Веб-щрифты? Отображение страницы, как её задумал автор? Какого черта?
    image
    • +1
      Ну так сафари, по-моему любые шрифты жирнее чем нужно показывает
      • –7
        Так же как сафари показывает хром и фф.
        • +1
          не выдумывайте
          • НЛО прилетело и опубликовало эту надпись здесь
            • 0
              У меня в ФФ вообще не работает — не применяется Font Face. Даже на последней Альфе
              Win XP SP3
          • –1
            Я сравнил оба варианта с Оперой, они были жирнее. Но я ошибся, да, в сафари все равно жирнее.
      • +3
        Вот в линуксе, ff, chrome, opera:
        • 0
          кстати в опере при загрузке, на секунду надпись была шрифтом поумолчанию, а потом уже стала указанным.
          • 0
            Это нормальное поведение: по спецификации @font-face вначале должен рендериться обычный шрифт, а потом применяться «декорирование». Просто процесс этот обычно происходит достаточно быстро, так что глаз не всегда замечает. Но иногда проскальзывания заметны, и не только в Опере.
            • 0
              В спецификации это не указано. Поэтому все Webkit-движки сначала ничего не показывают, что крайне бесит. Уж лучше прыжок, чем ждать пока загрузится (а загрузится ли вообще?) шрифт на 2 МБ.
    • –1
      Сейчас специально проверил, правда не локально, а просто страницу с гугла, например code.google.com/webfonts/family?family=Reenie+Beanie
      Отображается везде нормально и одиннакого. сафари не жирнит, ие не мельчит.
      Возможно тут дело из-за доктайпа? на странице гугла его нет.
      какой шрифт смотрите?
      • 0
        Код из топика.
      • +1
      • –1
        Вообще, на приведенной вами странице не используется апи, описанный в топике.
        • +3
          Как много комментариев успели написать :)
          Я разобрался.
          Стоило всего-то добавить
          h1 {font-size: 48px;}
          и всё стало на свои места.

          Так как в каждом браузере свое понятие о дефолтном размере шрифта для каждого элемента html, как, впрочем, и для других значений.
          • +1
            Только в опере вообще на работатет шрифт. Это очень печально
            • –1
              В Opera 10.50 работает всё гут.
              Правда иногда при очень частом рефреше ставится неправильный шрифт.
              Хотя в FAQ (http://code.google.com/intl/ru/apis/webfonts/faq.html#Browsers_Supported) про оперу ничего не сказано.
              • –1
                Насчет 10.50 не знаю, у меня Opera 10.53 — надпись отображается таймсом
                • 0
                  ошибся. у меня тоже 10.53.
                  только иногда слетает.
                  • 0
                    у вас Win XP?
                    • 0
                      win7 x64
                      • 0
                        у меня XP, может в этом дело. Хотя гугл с оперой давно не дружит
          • 0
            Стоило всего-то добавить
            Где были мои глаза? :)
            Но тем не менее: i49.tinypic.com/aw72hc.png
            • 0
              И все равно в сафари самый жирный шрифт
              • 0
                Не жирный он. Это собственная технология сглаживания шрифтов Apple.
            • 0
              Да, жирноват…
              Даже не спасает font-size:normal;
              Но для Сафари это, вроде, обычное дело.
              • 0
                Это было обычным делом для 3-го сафари. 4-й использует виндовый рендеринг шрифтов. Жирнее выглядели мелкие кегли из-за различий техники сглаживания, на крупных это различие было не так заметно. И в Опере явно тоньше чем в остальных.
      • 0
        На странице Гугла нет доктайпа? Не смешите. Там HTML5 DT.
  • –5
    Хотелось бы добавления шрифтов = ) opentype/truetype = )
    Было бы шикарно. Решение взаместо @font-face суперское на самом деле,
    единственное всё-таки нужно рациональное решение в стандарте, надеюсь
    в html5 усё будет. А так: Спасибо Google! =)
  • –2
    С одной стороны — плохо, потому как найдётся куча дизайнеров, благодаря которым вырви-глаз сайтов станет более чем до фига.

    С другой стороны — хорошо, так как в вебе можно будет наконец вести правильную работу с текстом, персонализируя текст на уровне книжных технологий.
  • +3
    Тема конечно крутая, но я не нашел в библиотеке ни одного шрифта, поддерживающего кириллицу :-|
  • +2
    Пробежался по ФАКу. Не нашол ничего про упоминание использования пиратских шрифтов. Будет ли гугл бороться с такими?
  • 0
    Ни в одном из IE не сработало. Какая тут кроссбраузерность?
    • 0
      Странно, еще раз проверил — на этот раз шрифты подключились.
  • 0
    На браузершотс можем посмотреть как выглядят шрифты в разных браузерах…
  • 0
    Google совместно с TypeKit разрабатывал это фигню.
    Зашел я на typekit.com, решил скачать trial.

    И что же я вижу? Пишет мне typekit (после регистрации): You're using a browser that Typekit doesn't yet fully support. Read more…

    смотрю Read more: getsatisfaction.com/typekit/topics/typekit_browser_support

    смотрю версию своего: FF (3.6.3)

    делаю выводы…
  • –1
    сафари в айфне не поддерживает
    • 0
      Для Safari Mobile нужны SVG-шрифты, видимо Google пока ими не озаботился.
  • 0
    ой, боюсь, что благое начинание не будет использовано к месту и ко времени «дезигнерами»
    к примеру, уже сейчас стал натыкаться на повсеместное использование text-shadow не там где надо, благодаря которому текст на сайте становится трудно читаемым.

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