|
Результаты поиска
|
|
| [1 | Тема: Встраиваемые шрифты ... с помощью @font-face] ebuilder [13.05.2012, 02:13] |
Приветствую!
Набрел на Вашу тему из поиска, как раз мучаюсь с данным вопросом, помогите если сможете
Дело вот как, нужно использовать на сайте шрифт "Droid Sans", подгружаю, в опере не правильно отображает, в IE тоже! В FF норм.
Если шрифт локально присутствует, то во всех браузерах видится...
Шрифт сконвертил во все основные форматы, их подгружаю.
шаблон - http://weisseberg.image-service.ru/
шрифты - http://weisseberg.image-service.ru/tpl/fonts/
css - http://weisseberg.image-service.ru/tpl/style.css
Буду очень признателен, спасибо |
|
| [2 | Тема: Встраиваемые шрифты ... с помощью @font-face] ebuilder [13.05.2012, 02:45] |
Quote (likbezz) данная тема полностью раскрыта.. про баг с оперой тоже упоминается здесь.
У вас описана другая проблема.
Code
@font-face{
font-family:'DroidSans';
src: url('fonts/droidsans-regular.eot');
src: url('fonts/droidsans-regular.ttf') format('truetype'),
url('fonts/droidsans-regular.otf') format('opentype'),
url('fonts/droidsans-regular.woff') format('woff'),
url('fonts/droidsans-regular.svg#Droid Sans') format('svg');
}
Смотрю на 3х машинах, везде разная картина, только в FF все работает как надо
Реально всю голову сломал, готов оплатить консультацию если сможете разобраться в вопросе |
|
| [3 | Тема: Встраиваемые шрифты ... с помощью @font-face] ebuilder [13.05.2012, 12:38] |
Quote (likbezz) Не хочу показаться хвастуном, но слово «если» в вопросах по HTML/CSS ко мне практически неприменимо )))
Ни сколько не сомневаюсь, надеюсь вы найдете мой вопрос интересным и занимательным)
Вот что имеем:
страница - http://weisseberg.image-service.ru/
шрифты - http://weisseberg.image-service.ru/tpl/fonts/
css - http://weisseberg.image-service.ru/tpl/style.css
Мысли такие:
1. В Firefox все хорошо, т.к. он использует формат .WOFF или .TTF
2. В IE терпимо, он использует .EOT
3. В Opera и Chrom - все плохо, они читают SVG (помоиму другие форматы еще не понимают)
4. Опера исправляется, если .SVG шрифт поставить выше всех других объявленных форматов, однако плывут отступы..
Подозрение на плохой SVG - хотя конвертировал его в разных местах...
Сообщение отредактировал ebuilder - Воскресенье, 13.05.2012, 13:48 |
|
| [4 | Тема: Встраиваемые шрифты ... с помощью @font-face] ebuilder [13.05.2012, 15:09] |
В FF - Все как надо, в IE тоже
В Opera и Хроме - берет TrueType походу, и все символы рваные с шагренью
Одно условие, что работаем под виндами и шрифта нет в системе
Firefox
opera
opera _v2
Сообщение отредактировал ebuilder - Воскресенье, 13.05.2012, 15:34 |
|
| [5 | Тема: Встраиваемые шрифты ... с помощью @font-face] 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 - очень плохо |
|
| [6 | Тема: Встраиваемые шрифты ... с помощью @font-face] ebuilder [13.05.2012, 17:02] |
На скриншоте на кнопках Arial, в теле рваный Droid
Quote (likbezz) Да, есть такое, и межбуквенный интерлиньяж тоже нужно будет ... мельчит по умолчанию )
ага)
Quote (likbezz) Какая версия хрома?
последняя 18.0.1025.168 |
|
| [7 | Тема: Встраиваемые шрифты ... с помощью @font-face] ebuilder [13.05.2012, 18:51] |
Резюме такое,
в настоящее время адекватный механизм включения внешних шрифтов под windows реализован только в браузере FireFox, благодаря .WOFF формату.
Opera, Chrom не догоняют.
Под MAC все работает одинаково хорошо.
Будем ждать когда разработчики наконец договорятся, пока довольствуемся тем что есть...
Спасибо likbezz, за помошь в разборе конкретного примера. |
|