|
Встраиваемые шрифты ... с помощью @font-face
|
|
| [16] likbezz [13.05.2012, 14:59] |
ebuilder, Quote (ebuilder) 3. В Opera и Chrom - все плохо, они читают SVG (помоиму другие форматы еще не понимают)
Не знаю, у меня везде кажет.
А вообще, я слабо вижу разницу между этим фонтом и обычным sans-serif ...
Для определения ))))) воткнул другой ...
Quote (ebuilder) Подозрение на плохой SVG - хотя конвертировал его в разных местах...
Я сам перегнал в нужные форматы.
Наблюдаем, где что не отображается у вас ...
☑ Оборудование для автосервиса - Вайссберг GMBH
... |
|
| [17] ebuilder [13.05.2012, 15:09] |
В FF - Все как надо, в IE тоже
В Opera и Хроме - берет TrueType походу, и все символы рваные с шагренью
Одно условие, что работаем под виндами и шрифта нет в системе
Firefox
opera
opera _v2
Сообщение отредактировал ebuilder - Воскресенье, 13.05.2012, 15:34 |
|
| [18] likbezz [13.05.2012, 16:25] |
ebuilder,
http://likbezz.ru/_content/_work/weisseberg/weisseberg_3.html
Скрин вот этого под оперой оперой сделайте
... |
|
| [19] ebuilder [13.05.2012, 16:49] |
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 - очень плохо |
|
| [20] likbezz [13.05.2012, 16:52] |
ebuilder, Quote (ebuilder) http://likbezz.ru/_content/_work/weisseberg/weisseberg_2.html
Я поправил, там косяк был: http://likbezz.ru/_content/_work/weisseberg/weisseberg_3.html |
|
| [21] likbezz [13.05.2012, 16:54] |
Quote (ebuilder) Chrom, никак не лечится(
Странно
Опера:
...
Quote (ebuilder) придется добовлять отдельные стили для отступов текста,
- Да, есть такое, и межбуквенный интерлиньяж тоже нужно будет ... мельчит по умолчанию )
..
Quote (ebuilder) очень плохо
Какая версия хрома?
...
|
|
| [22] ebuilder [13.05.2012, 17:02] |
На скриншоте на кнопках Arial, в теле рваный Droid
Quote (likbezz) Да, есть такое, и межбуквенный интерлиньяж тоже нужно будет ... мельчит по умолчанию )
ага)
Quote (likbezz) Какая версия хрома?
последняя 18.0.1025.168 |
|
| [23] likbezz [13.05.2012, 17:59] |
ebuilder, Quote (ebuilder) На скриншоте на кнопках Arial
Так туда никто и не прописывал )
Quote (ebuilder) в теле рваный Droid
На скринштах такого не вижу или не туда сморю. Сморю по центру, на тестовые блоки. )
У тебя этот шрифт реально прописан только к цифрам в правом блоке, к заголовкам. Ко всему боди не пишут.
Пропиши вот так:
Code #container{font-family: DroidSans, Arial, sans-serif;}
и вот так:
Code .menubutton{font-family:DroidSansRegular, Arial,sans-serif;}
... |
|
| [24] ebuilder [13.05.2012, 18:51] |
Резюме такое,
в настоящее время адекватный механизм включения внешних шрифтов под windows реализован только в браузере FireFox, благодаря .WOFF формату.
Opera, Chrom не догоняют.
Под MAC все работает одинаково хорошо.
Будем ждать когда разработчики наконец договорятся, пока довольствуемся тем что есть...
Спасибо likbezz, за помошь в разборе конкретного примера. |
|
| [25] likbezz [14.05.2012, 05:51] |
ebuilder, Quote (ebuilder) в настоящее время адекватный механизм включения внешних шрифтов под windows реализован только в браузере FireFox,
Подключаются-то, адекватно или нет - это не особо важно, они почти везде, а во обрабатываются, в том числе и апаратное сглаживание фрифтов, по разному.
Возможно это зависит от настроек браузера клиента.
...
Quote (ebuilder) Opera, Chrom не догоняют.
Не знаю на счёт самых последних версий, но предпоследний хором нормально читает и обрабатывает.
В опере есть косяки связанные с кириллицей в имени пользователя, с путём до файла, и некорректном интерлиньяже подключаемого фонта.
Кроме того есть некоторые ошибки при обработки hover, focus, active события, например для смены цвета шрифта.
... |
|
| [26] ХАН [28.05.2012, 16:49] |
likbezz, привет!
Расскажи пожалуйста как встроить в текст такой шрифт как например PerfoOval! Что то вроде не большой инструкции.
а вот что я хочу сделать:
это будет информер. т.е. данный шрифт нужно использовать всего 3 раза. но все же мне это необходимо.
спс, буду ждать. |
|
| [27] likbezz [28.05.2012, 17:48] |
ХАН, Quote (ХАН) Что то вроде не большой инструкции.
Вся эта тема - одна инстркуция, причём большая.
Quote (ХАН) а вот что я хочу сделать:
Если там, как на картинке, только три слова, то лучше (проще и грамотней) сделать их картинками, даже одной картинкой с 3-10 надписями ...
Другое дело если бы это были разные, периодически меняющиеся надписи, то да. Тут лучше фонтом. А у тебя три слова ...
Сделай картинками. |
|
| [28] ХАН [28.05.2012, 19:15] |
likbezz, хорошо здесь я воспользуюсь картинками, а другом случае вдруг я захочу использовать @font-face и не буду знать как, и все равно сюда напишу! тут нет не одной инструкций, только споры, всего 1,5 страницы, все читал, одна ерунда.
а вообще что лучше использовать картинки или @font-face? что грузит браузер больше?
может все таки напишешь что к чему?
Сообщение отредактировал ХАН - Понедельник, 28.05.2012, 19:17 |
|
| [29] likbezz [28.05.2012, 23:07] |
ХАН, Quote (ХАН) тут нет не одной инструкций, только споры, всего 1,5 страницы, все читал, одна ерунда.
Хорошо, отсортирую мух от котлет, чуть поправлю и сделаю «Инструкцию» )
...
Quote (ХАН) а вообще что лучше использовать картинки или @font-face? что грузит браузер больше?
1 картинка весит 500b
100 картинок с текстом 50 kb.
1 шрифт в формате ttf весит примерно от 250 kb до > 1 mb |
|
