Фильтр по:
  

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

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

  • Страница 1 из 2
  • 1
  • 2
  • »
Модератор форума: likbezz  
Скрипты и коды для юкоз - Форум аццкого кодера » Раздел для начинающих » Оптимизация дизайна сайта под различные браузеры ... » Встраиваемые шрифты ... с помощью @font-face (Встраиваемые шрифты ... с помощью @font-face)
Встраиваемые шрифты ... с помощью @font-face
Дата: Воскресенье, 14.11.2010, 11:46 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 levinson,
Quote (levinson)
Пробовал и полный путь к шрифту, и через /, в стилях через id (#), в тексте через SPAN, H1, P. Всю ерунду с разметкой перебрал, и шрифт менял другой пробовал, не прет!

- Не ... тут ты что-то точно напутал .... Но, опять же - нужно разбираться.... ヅ ... а мне - в “лом”...
Quote (levinson)
В коде то все в порядке?!

- ヅ - нет. Не всё.
☑ Пример .....
...
Скрины: Как я вижу ....

Мозилла



Опера:



Safari



Хром




MSIE

ИЕ6:



ИЕ:7


ИЕ:8

....
Quote (levinson)
Может кто пробовал реализовывать свой шрифт на сайте?

- Может и «кто-то пробовал» .... ヅ ...

На тему:

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

«Каталог шрифтов» или «Как быстро подобать шрифт для сайта/блога»

«Нестандартный шрифт на сайт. Cufon»
Прикрепления: 7137640.png (23.8 Kb) · 3647992.png (18.2 Kb) · 8737465.png (18.7 Kb) · 8465830.png (32.5 Kb) · 8980372.png (14.2 Kb) · 6416075.png (15.7 Kb) · 1151815.png (17.8 Kb)

 
Дата: Воскресенье, 14.11.2010, 13:30 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 levinson,
Quote (levinson)
В моем варианте не хватало шрифта .woff

.?. ... Ну ... и это тоже...
Вообще, поддерживаются следующие форматы: eot, ttf, otf, svg, woff.
eot - Для - ИЕ5+.
woff - Для ИЕ9, FF3,6, Хром.
ttf - Для ИЕ9, FF3.5, Хром4+, Safari3.1+, Opera10+.
Так что, по сути, хватило бы eot, ttf ....
....
Quote (levinson)
и как в этот формат перевести шрифт?

Я пользуюсь - @font-face Generator ....

Quote (levinson)
А что такое src:local('☺') в CSS?

- Это, ヅ как всегда, грабли для ИЕ ... ヅ ...
...

 
Дата: Среда, 17.11.2010, 14:56 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Miss_Esq,
Quote (Miss_Esq)
levinson, fflesh, Тени не совместимы с подгружаемыми шрифтами ......

.... Да что вы говорите .... Откуда такое заблуждение? ...
... *Так, ... грибов не хавал, траву не курил ... выспался ... Странно ...* ...
- Видимо у меня глюки ... по невыясненным причинам ....

Скриншоты:

Мозила:

Хром:

Opera:

Safari:

MSIE:

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

Прикрепления: 9808148.png (46.1 Kb) · 8007595.png (48.0 Kb) · 8267880.png (46.1 Kb) · 6784302.png (42.6 Kb) · 5156043.png (32.3 Kb)

 
Дата: Среда, 17.11.2010, 14:56 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Miss_Esq,
Quote (Miss_Esq)
Internet Explorer ни в одной версии не поддерживает text-shadow , как упоминела ранее у IE " свои тени " ...

... Как написано в посте 89 ... вами же, если не забыли ...


- вы утверждаете о несовместимости подгружаемых шрифтом и свойства text-shadow.
То, что это CSS3 свойство не поддерживается обозревателем ИЕ - даже ёжик знает. С рождения.
...

Quote (Miss_Esq)
И вообще , применение теней на примере My WebPage даёт весьма неоднозначные результаты ....
Что позволяет сказать о сомнительной поддержке данного стиля всеми обозревателями ........

... Про ваш пример «My WebPage» ....
Про «все» никто и не говорит.
Я говорю, только про: Mozilla, Chrome, Opera, Safari, Flock.
...
Quote (Miss_Esq)
как упоминела ранее у IE " свои тени " ...

... ヅ ... Эти «свои тени» называются фильтрами ... Так, чтобы знали.
...
Quote (Miss_Esq)
Internet Explorer ни в одной версии не поддерживает text-shadow , как упоминела ранее у IE " свои тени " ...

... А что это за скриншот?

... Насколько помню - примера с тенями, я не выкладывал ..... Или вы так торопились ответить, что и не удосужились взглянуть на то, что скриншотите? .... Шикарно .... Красноречивее любых слов.
...
Прикрепления: 0319300.png (52.9 Kb) · 8091336.png (102.8 Kb)

 
Дата: Понедельник, 26.03.2012, 20:38 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown
Quote (bandjuk)
В стандартном ослике этот шрифт не отображается! Интересно - почему??

Для ослика нужен костытыль:
Code
src:local('☺')

Типа:
Code
@font-face{
  font-family:'Lombardina';
  src:url('/_example/_rest/font-face/p1/Lombardina_Initial_One.eot');
  src:local('☺'),url('/_example/_rest/font-face/p1/Lombardina_Initial_One.woff') format('woff'),
  url('/_example/_rest/font-face/p1/Lombardina_Initial_One.ttf') format('truetype');
}


☑ Шрифт - Lombardina Initial One. Для веб ...
...

 
Дата: Суббота, 31.03.2012, 17:07 |
bandjuk
Генерал-майор
Группа: Пользователи
Сообщений: 290
Награды: 1
Репутация: 22
Статус: Offline


 likbezz, Привет, братишь! ))
Всё работает, шрифт отображается во всех браузерах, кроме Оперы версия 11.61. Не подскажешь как исправить?
И ещё вопросик http://fotki.ucoz.ua/tests мой чат, в Опере фона (где сообщения) нет, а в ИЕ есть белый фон! Не подскажеш как его убрать?

 
Дата: Суббота, 31.03.2012, 23:08 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 bandjuk,
Quote (bandjuk)
Всё работает, шрифт отображается во всех браузерах, кроме Оперы версия 11.61

А в примере что я писал шрифт в опере отображается? Нет у меня под рукой версии 11.61 ...
Добавь строчку:
Code
url('/_example/_rest/font-face/p1/Lombardina_Initial_One.svg#LombardinaInitialOneRegular') format('svg')



...
А вообще, у оперы глюк, если в пути до профиля есть кириллица, то бишь имя пользователя русскими буквами.
...
Прикрепления: 1340400.png (25.6 Kb)

 
Дата: Суббота, 31.03.2012, 23:46 |
bandjuk
Генерал-майор
Группа: Пользователи
Сообщений: 290
Награды: 1
Репутация: 22
Статус: Offline


 likbezz,
Quote
А в примере что я писал шрифт в опере отображается? Нет у меня под рукой версии 11.61 ...

нет!
Quote
Добавь строчку:

скачал у тебя, залил себе и добавил в ксс строку, вышло так:
Code

@font-face{
  font-family:'Lombardina';
  src:url('http://fotki.ucoz.ua/faily/Lombardina_Initial_One.eot');
  src:local('☺'),url('http://fotki.ucoz.ua/faily/Lombardina_Initial_One.woff') format('woff'),
  url('http://fotki.ucoz.ua/faily/Lombardina_Initial_One.ttf') format('truetype');
url('http://fotki.ucoz.ua/faily/Lombardina_Initial_One.svg#LombardinaInitialOneRegular') format('svg')
}

не помогло.

Quote
А вообще, у оперы глюк, если в пути до профиля есть кириллица, то бишь имя пользователя русскими буквами

какого пользователя? Это тут при чём? wacko wacko

 
Дата: Суббота, 31.03.2012, 23:59 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 bandjuk,
Quote (bandjuk)
скачал у тебя, залил себе и добавил в ксс строку, вышло так:

Ну ты молодец, закрыл строку, потом что-то дописал ... Кто ж так делает? ... Ты что, запятых не видишь?
Code
@font-face{
    font-family:'Lombardina';
    src:url('/_example/_rest/font-face/p1/Lombardina_Initial_One.eot');
    src:local('☺'),
    url('/_example/_rest/font-face/p1/Lombardina_Initial_One.woff') format('woff'),
    url('/_example/_rest/font-face/p1/Lombardina_Initial_One.svg#LombardinaInitialOneRegular') format('svg'),
    url('/_example/_rest/font-face/p1/Lombardina_Initial_One.ttf') format('truetype');
}

Именно в такой последовательности ...
...

Quote (bandjuk)
Это тут при чём?

У того, кто смотрит сайт.
...
Quote (bandjuk)
Это тут при чём?

Вот такой глюк есть у оперы.
...

 
Дата: Воскресенье, 01.04.2012, 00:53 |
bandjuk
Генерал-майор
Группа: Пользователи
Сообщений: 290
Награды: 1
Репутация: 22
Статус: Offline


 likbezz,
Quote
Ты что, запятых не видишь?

biggrin biggrin biggrin Тупанул!
Сделал всё как ты написал, заработало! Блин, ну до чего же ты всё таки продвинутый!

 
Дата: Воскресенье, 13.05.2012, 02:13 |
ebuilder
Рядовой
Группа: Зарегистрированные
Сообщений: 7
Награды: 0
Репутация: 0
Статус: Offline


 Приветствую!

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

Дело вот как, нужно использовать на сайте шрифт "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

Буду очень признателен, спасибо

 
Дата: Воскресенье, 13.05.2012, 02:25 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 ebuilder,
Quote (ebuilder)
Дело вот как, нужно использовать на сайте шрифт "Droid Sans", подгружаю, в опере не правильно отображает, в IE тоже! В FF норм.

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

 
Дата: Воскресенье, 13.05.2012, 02:45 |
ebuilder
Рядовой
Группа: Зарегистрированные
Сообщений: 7
Награды: 0
Репутация: 0
Статус: Offline
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 все работает как надо

Реально всю голову сломал, готов оплатить консультацию если сможете разобраться в вопросе

 
Дата: Воскресенье, 13.05.2012, 04:03 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 ebuilder,
Quote (ebuilder)
Реально всю голову сломал, готов оплатить консультацию если сможете разобраться в вопросе

Ссылку на сайт где это все не работает предоставьте.
...

Quote (ebuilder)
если сможете разобраться в вопросе

- Это типа прикол ))) - Не хочу показаться хвастуном, но слово «если» в вопросах по HTML/CSS ко мне практически неприменимо )))
...

 
Дата: Воскресенье, 13.05.2012, 12:38 |
ebuilder
Рядовой
Группа: Зарегистрированные
Сообщений: 7
Награды: 0
Репутация: 0
Статус: Offline
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
 
Скрипты и коды для юкоз - Форум аццкого кодера » Раздел для начинающих » Оптимизация дизайна сайта под различные браузеры ... » Встраиваемые шрифты ... с помощью @font-face (Встраиваемые шрифты ... с помощью @font-face)
  • Страница 1 из 2
  • 1
  • 2
  • »
Поиск:


Мобильная версия