mythmaker14 сен 2010 в 07:03

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

3 мин

43K

Веб-разработка *

Перевод

+78

Комментарии 48

mishunika 14 сен 2010 в 07:15

Кажется уже было.

Но статья хорошея, молодец.

Serator 14 сен 2010 в 07:21

Ага, Firefox поддерживает шрифты в формате SVG, да еще и с весрии 3.5. Может он уже и Acid3 проходит, а я все проспал? Колитесь, где изображение брали? :)

mythmaker 14 сен 2010 в 07:26

Все по ссылке)

Serator 14 сен 2010 в 07:42

Да, вы правы. От сей новости я забыл по ней (ccskrt) пройти, но сути это не меняет. Firefox не поддерживает шрифты в формате SVG — причина, демка. Перевод это конечно же классно, у самого с английским туговато иной раз, но все же должен быть какой-то анализ материала…

mythmaker 14 сен 2010 в 07:45

Ок, просто Paul Irish для меня очень серьезный человек и ему я привык доверять.

developer 28 фев 2011 в 16:30

так перечеркните или в статью комент внесите

Mercury13 14 сен 2010 в 07:43

А что это за смайлик, который служит хаком для IE?

mythmaker 14 сен 2010 в 07:50

Подробно об этом смайлике можно прочитать вот тут.

set 14 сен 2010 в 08:11

зашёл по ссылке, поводил по серым полям слева и справа страницы, забыл зачем пришёл :))

obiwanus 14 сен 2010 в 08:40

О, теперь можно быстро модную шапку сайта нарисовать)

Vik_Sol 14 сен 2010 в 12:45

Кто-нибудь знает как это сделано? Хочу сделать нечто подобное, голова тупит как спросить у гугля.

Devgru 15 сен 2010 в 14:42

это Harmony вроде

Vik_Sol 17 сен 2010 в 11:10

Спасибо, буду смотреть как его прикрутить

Denai 14 сен 2010 в 14:48

А что там такого? я чего-то не понимаю или браузер не тот =(

Vik_Sol 15 сен 2010 в 06:22

Движение мыши оставляет на фоне страницы след. Причем вид следа зависит от угла и скорости движения. Очень забавная фенька. Работает в хроме под виндой точно.

Denai 15 сен 2010 в 06:27

В хроме действительно забавно, но FF не воспринимает это искусство

porohnya 14 сен 2010 в 08:02

Мне кажется в данный момент Cufon куда актуальней

НЛО прилетело и опубликовало эту надпись здесь

aubt 14 сен 2010 в 08:07

блин, ну не надо, я вас очень прошу, пожалуйста.
я не хочу качать (мобильником тем более) мегабайт шрифтов, чтобы прочитать 100 байт информации.

Serator 14 сен 2010 в 08:13

OperaMini в помощь, а иначе смысл открывать браузер с поддержкой всего и вся (по сути)? Да и шрифты не факт, что мегабайты весить будут…

aubt 14 сен 2010 в 08:18

да побойтесь бога, говорить такие вещи, ну же!
я всегда полагал, что задача дизайнера — делать жизнь людей удобнее и проще, а не заставлять пользоваться какими-то ни было инструментами для подчеркивания его, дизайнера, никому не интересной индивидуальности.

а смысал открывать такой браузер — в доступной функциональности, а не дизайнерских «клевых»© штучках.

Serator 14 сен 2010 в 08:57

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

В наше время народ (не конкретно вы) любит вешать jquery и т.п. на всекую хрень, решаемую кроссбраузерно в пару строчек кода, зато возмущается из-за якобы страшного веса подключаемых шрифтов…

aubt 14 сен 2010 в 09:21

Еще раз подчеркну, если сразу не достаточно понятно объяснил: подключенный jquery добавляет функциональности (читай: удобства), дополнительные шрифты — ничего, кроме повышения чсв дизайнера, не делают в 99% случаев.

Serator 14 сен 2010 в 09:35

jquery я привел как пример того, что тоже имеет свой вес и порой используется не по назначению только лишь из-за того, что некотрые индивиды (опять же без намеков на кого-то определенного) практикуют метод «копировать / вставить». Шрифты, как и графика, и оформление в целом, доводят до пользователя то, что задумал дизайнер.

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

aubt 14 сен 2010 в 10:06

доводят до пользователя то, что задумал дизайнер

Вот именно! :)

shai_hulud 14 сен 2010 в 13:08

А ведь aubt прав. Скрипты несут функциональность и решают проблемы юзабилити, картинки несут информацию. Шрифт — ничего, кроме пожиранию ресурсов не дает.

OneManStartup 16 окт 2010 в 18:14

удобочитаемость.

developer 28 фев 2011 в 17:31

Вы технарь и 90% людей на хабре технари, но есть еще и гуманитарии, я как истенный технарь тоже считаю гумонитариев челокеками с огр. возм., однако вынужден считаться с их наличием. Кому-то так важен функционал (табы, или еще что-то), а кому-то важно качество типографики, кому-то важно что заголовок выглядт ахрененно красиво. У меня в студии, например, есть такой термин — функциональный дизайн. Это когда frontend программист и верстальщик деалет страницу функционально — чтобы все работало, с минимум «рюшичек», по мне такие штуки ужасно удобны и практичны, но ниодна из них в таком виде не уходит в продакшен. Почему? да потому что пользуются этим другие люди с другими эстетическими особенностями и говорить что «мне не нужен шрифт» глупо, ведь вы делаете не для себя, а для своих пользователей. Если тема реально для вас важна, то используйте тестирование: Сделайте версию от дизайнера с использованием шрифтов, и сделайте версию без их использования и посмотрите где конверт выше — это правильный подход. удачи.

mythmaker 14 сен 2010 в 08:18

Кэширование еще никто не отменял.

aubt 14 сен 2010 в 08:25

То что вы так говорите — это ужасно.

Deepwalker 14 сен 2010 в 08:24

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

whynot 14 сен 2010 в 08:25

Шрифты после удаления лишних наборов символов и самих символов весят совсем немного, к тому же хорошу гзапятся. так что какой-нибудь Calibri весит примерно 40-50 кбайт.

charon 14 сен 2010 в 09:11

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

FlexIDK 14 сен 2010 в 09:19

У меня была проблема в Опере, на одном компе — работает, на другом нет…
А было еще: в 10 работает, а в 10.5 уже нет =(((

crwin 14 сен 2010 в 09:31

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

mythmaker 14 сен 2010 в 10:18

По соседству появился отличный топик в тему.

Naps 14 сен 2010 в 10:33

Огромное спасибо за статью. Но есть небольшая проблема, пытаюсь прикрутить шрифт, англиские буковки отображаются как и должны, русские — нет.

mythmaker 14 сен 2010 в 10:41

Вполне может быть, что этот шрифт не поддерживает русские символы.

Naps 14 сен 2010 в 10:49

Поддерживает, шрифт HeliosCondensed.
Вчера побывал прикрутить с помощью typeface.neocracy.org/ но выходит плохо.

MFD 8 дек 2011 в 11:01

после конвертации у меня почему-то буква «М» прыгает…

Naps 14 сен 2010 в 10:43

Начинаю догадываться в чём дело. Конвертер плохо конвертирует, уже в получившихся файлах шрифтов кириллица отсутствует.
Посоветуйте конвертер OTF в EOT, TTF, SWG, WOFF.

Naps 15 сен 2010 в 09:23

Сам спросил, сам отвечаю. Для того чтобы в конечных файлах шрифтов была кириллица нужно: прейти в режим эксперта, в настройка subsetting поставить Custom Subsetting. B uалочками отметить что именно нам нужно.