Давайте обсудим проблемы шрифтов и сервисы их генерации

[Zverushka]

В последнее время шрифты вынесли мне все мозги.

Давайте запишем сюда все, что мы знаем о проблемах со шрифтами.

1) Вебкит некоторые шрифты криво рендерит - выход, заставить его отображать первым svg

2) firefox не понимает svg, и когда он начинает криво рендерить - почти безвыходная ситуация, хотя мне удалось подключить otf формат, но шрифт выглядел мягко сказать иначе, но зато без зазубрин и обрезания.

3) сервис font-squirrel в режиме оптимизации генерит шрифты без кириллицы (а может лишь некоторые и тогда это баг).

4) Некоторые сервисы, в число которых входит фонт сквиррел криво генеряет eot - выход, генерить с помощью программы на вашем компьютере.

5) Если вы поставили шрифт, а его не видно - скорее всего шрифт не содержит кириллицу.

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

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

http://www.google.com/fonts

http://www.xfont.ru/ - много шрифтов, содержащих кирриллицу.

Генераторы

http://www.fontsquir...bfont-generator

http://www.font-face-generator.com/

http://everythingfon...ce#.Ui9YpMbIb3Q - может кушать otf

Edited October 15, 2013 by Zverushka

[Kronus]

Проблема обычно в том, что http://www.fontsquirrel.com иногда отказывается принимать платные шрифты. Но в целом это самый нормальный генератор.

Есть еще http://www.font2web.com платность шрифтов ему не помеха, но генерит хуже, одни буквы ниже других получаются.

сервис font-squirrel в режиме оптимизации генерит шрифты без кириллицы (а может лишь некоторые и тогда это баг).

Странно, обычно всегда нормально кириллицу выдавал. В режиме эксперта в Custom Subsetting выбирали нужный язык?

[Zverushka]

Я просто залила с настройками по умолчанию шрифт - он съел его. Потом не могла понять, почему не отображается. Пропала кириллица, хотя в скармливаемом ему шрифте - она была. Видимо проблема с конкретным шрифтом. Потом решила поставить генерацию без оптимизации и все заработало!

Edited October 6, 2013 by Zverushka

[SelenIT]

От корявости рендеринга в Хроме мне иногда помогала подгонка X-height Matching (к сожалению, только методом тыка и не всегда, но со значениями порядка 105-108% результат может получиться намного приятнее). Откат на SVG-шрифты — имхо, последний патрон для себя вариант на ультракрайний случай, проблем от них больше, чем пользы (особенно с точки зрения Win-юзера, привыкшего к четкому рендерингу). Для всего современного woff рулит (ну ладно, для всего, кроме Андроидов, им ttf ), а старья, не понимающего woff, но понимающего svg, осталось так мало, что их резоннее посылать на изящную деградацию (с «Опером-в-Мини» за компанию).

Ну и насчет сервисов — как-то странно даже на этом форуме не вспомнить http://webfont.ru/ ...

[klierik]

Авто топика явно не изучил интерфейс Белки, который достаточно прост.

Вот как включить кирилицу: http://screencast.com/t/t2Oa0D5TO

Естественно она будет по умолчанию выключена, ибо львиная часть пользователей ею не пользуется вообще.

[Zverushka]

Авто топика явно не изучил интерфейс Белки, который достаточно прост.

Вот как включить кирилицу: http://screencast.com/t/t2Oa0D5TO

Естественно она будет по умолчанию выключена, ибо львиная часть пользователей ею не пользуется вообще.

Угу, сегодня пробовала - только в эксперт моде получилось киррилицу не потерять. Хотя раньше просто заливала не дума я и вставляла шрифт, и все работало.

Селенит - а какие проблемы генерируют свг шрифты? Мне уже не нравится эта фраза). Пока их минус в том, что жирное начертание им не задать - они как влитые. Ну и весят больше.

[SelenIT]

В основном я и имел в виду, что весят больше, а рисуются слишком уж замыленными (по крайней мере с точки зрения виндоюзера, для маковода, возможно, оно не так). Плюс у меня бывали необъяснимые странности с выравниванием их по вертикали.

[klierik]

Пока их минус в том, что жирное начертание им не задать - они как влитые.

для кастомных шрифтов жирность задается не через font-weight а через font-family.

например:

    font-family: "Dispatch Bold", 'Arbutus Slab', serif; 
    font-size:14px; 
    font-weight: normal; 

[SelenIT]

Насколько я понимаю, тогда придется везде, где эти шрифты используются, задавать им font-weight: normal, иначе для заголовков и т.п. (где по умолчанию bold) браузеры будут пытаться сделать их еще жирнее. Имхо, для таких шрифтов лучше и внутри @font-face указывать font-weight: bold, чтобы текст оставался жирным и в случае деградации.

[Zverushka]

Пока их минус в том, что жирное начертание им не задать - они как влитые.

для кастомных шрифтов жирность задается не через font-weight а через font-family.

например:

font-family: "Dispatch Bold", 'Arbutus Slab', serif;
font-size:14px;
font-weight: normal;

Речь о том, что если вставить например, ттф шрифт как нормал (в фонт-фемили). а потом задать ему случайно начертание bold - то он станет жирнее, а с svg форматом не изменится ничего. Так то понятно, что жирное начертание нужно тоже через ффа вставлять.

Selenit - не знаю, у меня такой проблемы нет. Если шрифт вставлен нестандартный нужно всегда указывать соотвествующую ему ширину или использовать резетер стилей, если забываешь перееопределять начертания. Кстати у меня свг шрифт не выглядит размыленным (у меня винда), а наоборот выглядит как шрифт задумывался изначально без всяких искажений. С высотой линии уже не помню, кажется были косяки...

[SelenIT]

От самих шрифтов, видмимо, сильно зависит. Когда я экспериментировал с SVGшками, у меня они все выглядели «мылом», с тех пор стараюсь обходиться без них везде, где получается.

[Softlink]

Пока их минус в том, что жирное начертание им не задать - они как влитые.

для кастомных шрифтов жирность задается не через font-weight а через font-family.

например:

font-family: "Dispatch Bold", 'Arbutus Slab', serif;
font-size:14px;
font-weight: normal;

Мы долго спорили об этом в чате, кстати, в итоге сошлись на том, что логичнее оперировать font-weight

[Zverushka]

Проблема второго способа — невозможность задать в IE <=8 больше четырех «ключей» для одного font-family.

Это как? Что за ключи?

[klierik]

Мы долго спорили об этом в чате, кстати, в итоге сошлись на том, что логичнее оперировать font-weight

Видимо я пропустил спор... Хм, возьму в общем на заметку, мне так тоже больше нравится )

Удобнее и логичнее )

Спасибо

[bvvell]

Для IE c такой ошибкой :"CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable."

есть решение вот здесь: http://carnage-melon.tom7.org/embed/

[1121990]

Не знаю как у вас, у меня шрифты вечная проблема. Пытаюсь подключить cricket. Сразу белка не принимала ttf, сконвертил через ont2web, пытался подключить. Потом белка приняла otf, тоже сконвертил подключил и толку ноль.

[SelenIT]

Что за ключи?

Как я понял, комбинации font-family/font-weight/font-style, каждой из которых можно сопоставить свой шрифтовой файл. Норм. браузеры понимают 9 значений font-weight, а IE8 — только 2 (normal, который 400, и bold, который 700), поэтому одновременно подключить, скажем, Light- и Medium-версии шрифта (font-weight: 300 и 500 соотв-но) с одним и тем же font-family в нем не получится.

[Zverushka]

Не знаю как у вас, у меня шрифты вечная проблема. Пытаюсь подключить cricket. Сразу белка не принимала ttf, сконвертил через ont2web, пытался подключить. Потом белка приняла otf, тоже сконвертил подключил и толку ноль.

Тоже самое. Вот сейчас верстаю макет, шрифт калибри. Почему-то некоторые шрифт, хоть и того же 18го размера выглядит будто жирным. В настройках ничего не изменено, никаких функций не применено. Я не понимаю почему он так выглядит? А мой шрифт на сайте выглядит довольно тонким.

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

Ну и помимо этого, дизайнер везде поставил шрифту va -70 и кажется сжал по вертикали на 95% - могу ошибаться. Как мне это адаптировать - ума не приложу. Завтра заказчик посмотрит и начнет придираться, почему шрифты выглядят совсем по-другому.

Edited October 9, 2013 by Zverushka

[SelenIT]

дизайнер везде поставил шрифту va -70 и кажется сжал по вертикали на 95%

За такое посадить дизайнера под замок и заставить работать в фотошопе 5.0 (не CS!) под Win95, пока не осознает всю степень и глубину. До какой-то степени можно, конечно, поправить дело CSS-трансформациями...

Но вот калибри (и подобная проприетарщина, для которой фиг с ходу подберешь свободный аналог) — это да, сурово. Я обычно сразу говорю, что точно такой шрифт реализовать невозможно, и предлагаю подобрать подходящий аналог, но если макет уже утвержден заказчиком... Сочувствую, держитесь!

[Zverushka]

В плане калибри платный шрифт и его тяжело достать?

Фух, хорошо. что мне это удалось...

Edited October 9, 2013 by Zverushka

[SelenIT]

В плане лицензии на него шибко ограничивающие, даже в случае покупки. Например, Микрософт говорит следующее:

Q. Что я могу делать со шрифтами, поставляемыми с продуктами Микрософта?

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

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

[Zverushka]

Обнаружила еще одну фишку.

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

Только что исправила так проблему с бендером. На 21 пиксель верхний край смотрелся непропорционально жирным. Сделала 22 и исправилось.

Edited October 15, 2013 by Zverushka

[SelenIT]

Да, бывает полезно подвигать на пиксель туды-сюды. Не всегда коррелирует с четностью (у меня, если ничего не путаю, однажды было наоборот, когда лучше всего смотрелись 15px, а хуже всего 12 и 14).

[Zverushka]

Маюсь с myriadpro cond и condbold - блин почему-то после любого генератора они выглядит достаточно кривова-то , я уже по 10 раз наверное где только не генерила шрифт, заново скачивала с других источников... Я верстальщик или шрифто-генератор? =(.. Мне вот делать больше нечего в своей жизни, как шрифты мучать? Что же делать.

Может у кого-то есть готовая коллекция веб-шрифтов, которые поставил и они хорошо смотрятся?

Edited October 31, 2013 by Zverushka

[Softlink]

Все известные конвертеры так или иначе портят исходные шрифты. Ко всему этому еще прибавляется разнородный рендеринг шрифтов браузерами.

Вменяемый результат можно получить, если использовать оригинальный файл ttf для всех браузеров, а для ие конвертировать в eot. Конвертированный woff вообще не использовать. Оригинальные файлы могут быть значительно тяжелее, но ttf довольно неплохо гзипуется.