Проблема с @font-face

Chervontsev · December 15, 2009

Добрый день

Вроде как много где пишут, про использование любых шрифтов через стиль @font-face. Но вот чего-то в Opera 9, 10 не работает

Может я делаю что-то не так?

@font-face {
  font-family: "Vesna";
  src: url(../font/Vesna.eot); /* for IE6-8 */
  src: local("Vesna"), url(../font/Vesna.ttf) format("truetype"); /* for Firefox 3, Safari */
}
html, body {
  font:normal 23px "Vesna";
}

Вот сайт: Посетить мою домашнюю страницу

Edited December 15, 2009 by Chervontsev

rus · December 15, 2009

Есть еще и не стандартные решения (под стандартными понимается примерно то, что написано выше автором топика).

ссылка №1

ссылка №2

ссылка №3

Ну третья ссылка более похожа на вашу проблему.

psywalker · December 15, 2009

Добрый день
Вроде как много где пишут, про использование любых шрифтов через стиль @font-face. Но вот чего-то в Opera 9, 10 не работает
Может я делаю что-то не так?
@font-face {
  font-family: "Vesna";
  src: url(../font/Vesna.eot); /* for IE6-8 */
  src: local("Vesna"), url(../font/Vesna.ttf) format("truetype"); /* for Firefox 3, Safari */
}
html, body {
  font:normal 23px "Vesna";
}
Вот сайт: Посетить мою домашнюю страницу

А вот тебе мой пример, как то было дело, посмотри, протести

http://psywalker.ru/Forum/Font-face/main.html

Chervontsev · December 15, 2009

Есть еще и не стандартные решения (под стандартными понимается примерно то, что написано выше автором топика).
ссылка №1
ссылка №2
ссылка №3
Ну третья ссылка более похожа на вашу проблему.

Помогло сделать 2 формата шрифта: EOT для IE и TTF для FF, Safari. Но вот Опера пока не поддается

Chervontsev · December 15, 2009

А вот тебе мой пример, как то было дело, посмотри, протести
http://psywalker.ru/Forum/Font-face/main.html

Сгенерил через http://www.fontsquirrel.com/fontface/generator такой код:

@font-face {
	font-family:'VesnaRegular';
	src: url('Vesna.eot');
	src: local('Vesna Regular'), 
	local('Vesna'), 
	url('Vesna.woff') format('woff'), 
	url('Vesna.ttf') format('truetype'), 
	url('Vesna.svg#Vesna') format('svg');
}

У тебя на страничке:

@font-face {
	font-family: 'Acquest Script Regular';
	src: url('acquestscript.eot');
	src: local('Acquest Script Regular'),
	local('AcquestScript'),
	url('acquestscript.woff') format('woff'),
	url('acquestscript.ttf') format('truetype'),
	url('acquestscript.svg#AcquestScript') format('svg');
}

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

Edited December 15, 2009 by Chervontsev

psywalker · December 15, 2009

1) Хороший генератор, всё за тебя делает, очень удобно

2) Насчёт оперы, вообще странная ведь, а у меня наоборот в ней НЕ отображается))

mishka · December 15, 2009

http://cssing.org.ua/2009/10/24/font-face/

Тут все неплохо рассписанно, должно помочь.

Chervontsev · December 15, 2009

После перезагрузки компа, в Опере вроде бы все всталоо на место

Походу кэш

Теперь все работает с кодом, сгенерированном на http://www.fontsquirrel.com/fontface/generator:

@font-face {
	font-family:'VesnaRegular';
	src: url('../Vesna.eot');
	src: local('Vesna Regular'), local('Vesna'), url('../Vesna.woff') format('woff'), url('../Vesna.ttf') format('truetype'), url('../Vesna.svg#Vesna') format('svg');
}
html, body {
	font-family:'VesnaRegular';
}

Протестировал в: IE6-8, Firefox 3.5, Opera 10, Safari 4, Chrome 3 - все ОК

Edited December 15, 2009 by Chervontsev

psywalker · December 15, 2009

После перезагрузки компа, в Опере вроде бы все всталоо на место
Походу кэш
Теперь все работает с кодом, сгенерированном на http://www.fontsquirrel.com/fontface/generator:
@font-face {
	font-family:'VesnaRegular';
	src: url('../Vesna.eot');
	src: local('Vesna Regular'), local('Vesna'), url('../Vesna.woff') format('woff'), url('../Vesna.ttf') format('truetype'), url('../Vesna.svg#Vesna') format('svg');
}
html, body {
	font-family:'VesnaRegular';
}
Протестировал в: IE6-8, Firefox 3.5, Opera 10, Safari 4, Chrome 3 - все ОК

А кинь плиз ссылку с рабочим примером посмотреть

Torner · January 4, 2010

Помогите понять, почему шрифт абсолютно не отображается в Chrome. Автор этого топика пишет, что у него в Хроме 3 все нормально, но у меня по сути код такой же, а в Хроме не пашет. И еще в Опере жирное начертание не работает. В остальных браузерах все нормально. Я, кстати, заходил на сайт автора Хромом, все отображается нормально. А моя страница не пашет, хотя код такой же))

@font-face {
	font-family: "Graublau Web";
	src: url("fonts/GraublauWeb.eot");
	src: local("Graublau Web"), local("Graublau Web Regular"), local("GraublauWebRegular"), local("GraublauWeb-Regular"), url("fonts/GraublauWeb.woff") format("woff"), url("fonts/GraublauWeb.otf") format("opentype"), url("fonts/GraublauWeb.svg#GraublauWeb") format("svg");
}

@font-face {
	font-family: "Graublau Web";
	font-weight: bold;
	src: local("Graublau Web Bold"), local("GraublauWebBold"), local("GraublauWeb-Bold"), url("fonts/GraublauWebBold.otf") format("opentype");
}

html {
	font-size: 100.01%;
}

body {
	font: normal 0.625em/1.2 "Graublau Web", Verdana, sans-serif;
}

Если шрифт задавать в пикселях или ставить одинарные кавычки вместо двойных, то это ничего не меняет))

Edited January 4, 2010 by Torner

hf3 · March 26, 2010

В опере 10.50 фонт Фэйс сломали.

Кто нибудь знает - это возможно излечить?

Edited March 26, 2010 by hf3

mishka · March 26, 2010

в опере 10.51 все ок

Думаю в 10.50 тожн все ок, ошибка гдето не там.

Кстати опера капризна насчет font-face

Edited March 26, 2010 by mishka2

hf3 · March 26, 2010

у меня тоже 10.51

http://psywalker.ru/Forum/Font-face/main.html не работает

локальные странички не работают

http://www.fontsquirrel.com/fontface/generator тоже не работает

Хотя переодически всё таки срабатывает, но после обновления снова все разваливается.

з.ы. Нашел решение - в svg шрифте. он вроде срабатывает всегда, но и весит больше всех.

psywalker · March 26, 2010

Кстати так-же в опере косяк, не работает почему-то, хотя заметил такую хрень, что многие по разному говорят, у кого работает, а у кого нет и не понятно, от чего это зависит

hf3

Если нашёл решение, выкладывай и объясняй, почему

hf3 · March 26, 2010

, почему

Потому что суровые норвежские браузеростроители так торопились выпустить Оперу к дате выхода обновления в Европе, в котором предлагается сделать выбор браузеров, что клепали 5 релиз кандидатов в сутки.

Само собой это сказалось на качестве продукта. Выражаю своё “фи” и негодую!

А если по сути - то они сломали подержку формата .ttf , который отлично работал в Опере 10.10 .

Но поддержку .svg шрифтов вроде не сломали - так что

@font-face {
	font-family: 'AcquestScriptRegular';
	src: url('acquestscript.eot');
	src: local('Acquest Script'), local('AcquestScript'), url('acquestscript.woff') format('woff'), url('acquestscript.ttf') format('truetype'), url('acquestscript.svg#AcquestScript') format('svg');
}

Вот вроде работает везде.

hf3 · March 26, 2010

Все! Сдаюсь.

3 часа ночи! Посылаю лучи ненависти на всю Норвергию!

Облазил пол интернета. Весь их блог разработчиков - они там там заявляют что все работает.

Находил много сайтов в вебшрифтами - в двух или 3 работало. Почему я так и не понял.

Пробовал все варианты - даже с кодированием шрифта алгоритмом Base64 и последующим встраиванием его в ХТМЛ страничку - толку - 0.

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

Сдаюсь.

mishka · March 26, 2010

локально никогда проблем в опере с font-face не возникало!

В чем у тя проблемма?

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

Edited March 26, 2010 by mishka2

hf3 · March 26, 2010

http://hart-flamov.ru/begin1/as/demo.html

ну вот для примера. Работает во всех ИЕ, хроме, файрфоксе, опере 10.10

В Опере 10.50 не хочет.

Пути незамысловатые - все файлы шрифтов в той же директории. Русских символов нет. При открытии на локальном диске того же каталога - все работает отлично.

з.ы. На локальном сервере - тоже не работает. Только при открытии файла напрямую.

Edited March 26, 2010 by hf3

mishka · March 26, 2010

Версия:10.51

Сборка:3315

Платформа:Win32

Система:Windows XP

нормально работает font-face.

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

Вот сейчас открыл эту ссылку в одной вкладке, потом сразу еще в одной - работает в обоих, только закрываю одну из них - в другой сразу перестает работать.

Edited March 26, 2010 by mishka2

hf3 · March 26, 2010

версия 10.51

Windows 7

снес оперу почистил кэш, установил с 0 - не работает на моем сайте.

Зато к примеру тут - http://lovtsevich.com/wp-content/examples/...ad-v-budushhee/

Все работает хоть 1 вкладка, хоть 5.

psywalker · March 27, 2010

Вот и как тут понимать, где логика?

hf3 · March 27, 2010

Навеное это зависит от погоды на обратной стороне луны…

hf3 · March 27, 2010

УРАААА!!! Проблема наполовину мною решена

http://hart-flamov.ru/as/cs/demo.html

svg шрифт все таки подключил правда выглядит он не ахти в некоторых случаях - но все таки это прогресс!

Проблема решается включением на сервере файлов .svg c mime типом font/svg+xml

В IIS по умолчанию он не включен. Возможно в других серверах тоже.

Возможно из за этого не работает и ttf но я не нашел с каким mime типом он заработает, хотя перепробовал их массу

Может кто что предложит?

psywalker · March 27, 2010

УРАААА!!! Проблема наполовину мною решена
http://hart-flamov.ru/as/cs/demo.html
svg шрифт все таки подключил правда выглядит он не ахти в некоторых случаях - но все таки это прогресс!
Проблема решается включением на сервере файлов .svg c mime типом font/svg+xml
В IIS по умолчанию он не включен. Возможно в других серверах тоже.
Возможно из за этого не работает и ttf но я не нашел с каким mime типом он заработает, хотя перепробовал их массу
Может кто что предложит?

Выложи вариант решения, рабочий, залитый на хост сразу, если можешь.

hf3 · March 27, 2010

http://hart-flamov.ru/begin1/as/cs/acquestscript.zip - вот архив

http://hart-flamov.ru/begin1/as/cs/demo.html - демо.

+ на сайте возможно понадобится включить отдачу файлов .svg

Напишите пожалуйста баг репорт разрабам оперы, а то у меня проблемы с английским

Edited March 27, 2010 by hf3

bridge2web · April 14, 2010

столкнулся с такой же проблемой

поначалу может отображается нормально,

но потом , все сбивается, рендерится стандартным фонтом

в 10.5

мне кажется проблема с mime типом для ttf, как упоминали выше

но не знаю как решить это

Sign In

Проблема с @font-face

Question

Link to comment

Share on other sites

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

51 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information