Встраиваемые шрифты ... с помощью @font-face

likbezz

2012-05-13Дата: Воскресенье, 13.05.2012, 14:59 | Сообщение # 16

Аццкий кодер

Группа: Администраторы

Сообщений: 9093

Награды: 23

Репутация: 459

Статус: Unknown

ebuilder,

Quote (ebuilder)

3. В Opera и Chrom - все плохо, они читают SVG (помоиму другие форматы еще не понимают)

Не знаю, у меня везде кажет.
А вообще, я слабо вижу разницу между этим фонтом и обычным sans-serif ...
Для определения ))))) воткнул другой ...

Quote (ebuilder)

Подозрение на плохой SVG - хотя конвертировал его в разных местах...

Я сам перегнал в нужные форматы.

Наблюдаем, где что не отображается у вас ...

☑ Оборудование для автосервиса - Вайссберг GMBH
...

ebuilder

2012-05-13Дата: Воскресенье, 13.05.2012, 15:09 | Сообщение # 17

Рядовой

Группа: Зарегистрированные

Сообщений: 7

Награды: 0

Репутация: 0

Статус: Offline

В FF - Все как надо, в IE тоже

В Opera и Хроме - берет TrueType походу, и все символы рваные с шагренью

Одно условие, что работаем под виндами и шрифта нет в системе

Firefox
opera
opera _v2

Сообщение отредактировал ebuilder - Воскресенье, 13.05.2012, 15:34

likbezz

2012-05-13Дата: Воскресенье, 13.05.2012, 16:25 | Сообщение # 18

Аццкий кодер

Группа: Администраторы

Сообщений: 9093

Награды: 23

Репутация: 459

Статус: Unknown

ebuilder,
http://likbezz.ru/_content/_work/weisseberg/weisseberg_3.html
Скрин вот этого под оперой оперой сделайте
...

ebuilder

2012-05-13Дата: Воскресенье, 13.05.2012, 16:49 | Сообщение # 19

Рядовой

Группа: Зарегистрированные

Сообщений: 7

Награды: 0

Репутация: 0

Статус: Offline

Quote (likbezz)

http://likbezz.ru/_content/_work/weisseberg/weisseberg_2.html
Скрин вот этого под оперой оперой сделайте

opera v3

Здесь вот что получается - шрифт стал Arial а не "DroidSans"

Кстати, вот что выяснилось - если .svg поставить над всеми шрифтами, то Opera лечится (но слетают padding - шрифт плывет только в Opera)

Chrom, никак не лечится(

Пример кода костыля Opera:

Code

     font-family:'DroidSans';
     src: url('fonts/droidsans-regular.eot');
     src: local('☺'),
          url('fonts/droidsans-regular.svg#DroidSans') format('svg'),
          url('fonts/droidsans-regular.woff') format('woff'),
          url('fonts/droidsans-regular.ttf') format('truetype');
     }
@font-face{
     font-family:'DroidSans-bold';
     src: url('fonts/droidsans-bold.eot');
     src:local('☺'),
          url('fonts/droidsans-bold.svg#DroidSans-Bold') format('svg'),
          url('fonts/droidsans-bold.woff') format('woff'),
          url('fonts/droidsans-bold.ttf') format('truetype');
     font-weight: bold;
     }

Итого имеем:
FF - отлично,
IE - отлично,
Opera - криво, придется добовлять отдельные стили для отступов текста,
Chrom - очень плохо

likbezz

2012-05-13Дата: Воскресенье, 13.05.2012, 16:52 | Сообщение # 20

Аццкий кодер

Группа: Администраторы

Сообщений: 9093

Награды: 23

Репутация: 459

Статус: Unknown

ebuilder,

Quote (ebuilder)

http://likbezz.ru/_content/_work/weisseberg/weisseberg_2.html

Я поправил, там косяк был: http://likbezz.ru/_content/_work/weisseberg/weisseberg_3.html

likbezz

2012-05-13Дата: Воскресенье, 13.05.2012, 16:54 | Сообщение # 21

Аццкий кодер

Группа: Администраторы

Сообщений: 9093

Награды: 23

Репутация: 459

Статус: Unknown

Quote (ebuilder)

Chrom, никак не лечится(

Странно

Опера:

...

Quote (ebuilder)

придется добовлять отдельные стили для отступов текста,

- Да, есть такое, и межбуквенный интерлиньяж тоже нужно будет ... мельчит по умолчанию )
..

Quote (ebuilder)

очень плохо

Какая версия хрома?
...

Прикрепления: 9245116.png (23.7 Kb) · 5940709.png (33.3 Kb)

ebuilder

2012-05-13Дата: Воскресенье, 13.05.2012, 17:02 | Сообщение # 22

Рядовой

Группа: Зарегистрированные

Сообщений: 7

Награды: 0

Репутация: 0

Статус: Offline

Quote (likbezz)

Странно

На скриншоте на кнопках Arial, в теле рваный Droid

Quote (likbezz)

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

ага)

Quote (likbezz)

Какая версия хрома?

последняя 18.0.1025.168

likbezz

2012-05-13Дата: Воскресенье, 13.05.2012, 17:59 | Сообщение # 23

Аццкий кодер

Группа: Администраторы

Сообщений: 9093

Награды: 23

Репутация: 459

Статус: Unknown

ebuilder,

Quote (ebuilder)

На скриншоте на кнопках Arial

Так туда никто и не прописывал )

Quote (ebuilder)

в теле рваный Droid

На скринштах такого не вижу или не туда сморю. Сморю по центру, на тестовые блоки. )

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

Пропиши вот так:

Code

#container{font-family: DroidSans, Arial, sans-serif;}

и вот так:

Code

.menubutton{font-family:DroidSansRegular, Arial,sans-serif;}

...

ebuilder

2012-05-13Дата: Воскресенье, 13.05.2012, 18:51 | Сообщение # 24

Рядовой

Группа: Зарегистрированные

Сообщений: 7

Награды: 0

Репутация: 0

Статус: Offline

Резюме такое,

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

Opera, Chrom не догоняют.

Под MAC все работает одинаково хорошо.

Будем ждать когда разработчики наконец договорятся, пока довольствуемся тем что есть...

Спасибо likbezz, за помошь в разборе конкретного примера.

likbezz

2012-05-14Дата: Понедельник, 14.05.2012, 05:51 | Сообщение # 25

Аццкий кодер

Группа: Администраторы

Сообщений: 9093

Награды: 23

Репутация: 459

Статус: Unknown

ebuilder,

Quote (ebuilder)

в настоящее время адекватный механизм включения внешних шрифтов под windows реализован только в браузере FireFox,

Подключаются-то, адекватно или нет - это не особо важно, они почти везде, а во обрабатываются, в том числе и апаратное сглаживание фрифтов, по разному.
Возможно это зависит от настроек браузера клиента.
...

Quote (ebuilder)

Opera, Chrom не догоняют.

Не знаю на счёт самых последних версий, но предпоследний хором нормально читает и обрабатывает.
В опере есть косяки связанные с кириллицей в имени пользователя, с путём до файла, и некорректном интерлиньяже подключаемого фонта.
Кроме того есть некоторые ошибки при обработки hover, focus, active события, например для смены цвета шрифта.
...

ХАН

2012-05-28Дата: Понедельник, 28.05.2012, 16:49 | Сообщение # 26

Рядовой

Группа: Зарегистрированные

Сообщений: 2

Награды: 0

Репутация: 0

Статус: Offline

likbezz, привет!
Расскажи пожалуйста как встроить в текст такой шрифт как например PerfoOval! Что то вроде не большой инструкции.
а вот что я хочу сделать:

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

likbezz

2012-05-28Дата: Понедельник, 28.05.2012, 17:48 | Сообщение # 27

Аццкий кодер

Группа: Администраторы

Сообщений: 9093

Награды: 23

Репутация: 459

Статус: Unknown

ХАН,

Quote (ХАН)

Что то вроде не большой инструкции.

Вся эта тема - одна инстркуция, причём большая.

Quote (ХАН)

а вот что я хочу сделать:

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

ХАН

2012-05-28Дата: Понедельник, 28.05.2012, 19:15 | Сообщение # 28

Рядовой

Группа: Зарегистрированные

Сообщений: 2

Награды: 0

Репутация: 0

Статус: Offline

likbezz, хорошо здесь я воспользуюсь картинками, а другом случае вдруг я захочу использовать @font-face и не буду знать как, и все равно сюда напишу! тут нет не одной инструкций, только споры, всего 1,5 страницы, все читал, одна ерунда.
а вообще что лучше использовать картинки или @font-face? что грузит браузер больше?
может все таки напишешь что к чему?

Сообщение отредактировал ХАН - Понедельник, 28.05.2012, 19:17

likbezz

2012-05-28Дата: Понедельник, 28.05.2012, 23:07 | Сообщение # 29

Аццкий кодер

Группа: Администраторы

Сообщений: 9093

Награды: 23

Репутация: 459

Статус: Unknown

ХАН,

Quote (ХАН)

тут нет не одной инструкций, только споры, всего 1,5 страницы, все читал, одна ерунда.

Хорошо, отсортирую мух от котлет, чуть поправлю и сделаю «Инструкцию» )
...

Quote (ХАН)

а вообще что лучше использовать картинки или @font-face? что грузит браузер больше?

1 картинка весит 500b
100 картинок с текстом 50 kb.

1 шрифт в формате ttf весит примерно от 250 kb до > 1 mb

Встраиваемые шрифты ... с помощью @font-face - Страница 2

Оптимизация дизайна сайта под различные браузеры ...

Страница 2 из 2 « 1 2
Модератор форума: likbezz

Возможно будет интересно
	Тема	Обновления