Jump to content
  • 0

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


Chervontsev
 Share

Question

Добрый день

Вроде как много где пишут, про использование любых шрифтов через стиль @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 by Chervontsev
Link to comment
Share on other sites

  • Answers 51
  • Created
  • Last Reply

Top Posters For This Question

Recommended Posts

  • 0

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

ссылка №1

ссылка №2

ссылка №3

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

Link to comment
Share on other sites

  • 0
Добрый день

Вроде как много где пишут, про использование любых шрифтов через стиль @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

Link to comment
Share on other sites

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

ссылка №1

ссылка №2

ссылка №3

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

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

Link to comment
Share on other sites

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

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 by Chervontsev
Link to comment
Share on other sites

  • 0

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

Походу кэш

Теперь все работает с кодом, сгенерированном на 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 by Chervontsev
Link to comment
Share on other sites

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

Походу кэш

Теперь все работает с кодом, сгенерированном на 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 - все ОК

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

Link to comment
Share on other sites

  • 0

Помогите понять, почему шрифт абсолютно не отображается в 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 by Torner
Link to comment
Share on other sites

  • 0

у меня тоже 10.51

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

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

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

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

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

Link to comment
Share on other sites

  • 0

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

hf3

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

Link to comment
Share on other sites

  • 0
, почему

Потому что суровые норвежские браузеростроители так торопились выпустить Оперу к дате выхода обновления в Европе, в котором предлагается сделать выбор браузеров, что клепали 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');
}

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

Link to comment
Share on other sites

  • 0

Все! Сдаюсь.

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

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

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

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

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

Сдаюсь.

Link to comment
Share on other sites

  • 0

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

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

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

Edited by mishka2
Link to comment
Share on other sites

  • 0

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

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

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

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

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

Edited by hf3
Link to comment
Share on other sites

  • 0

Версия:10.51

Сборка:3315

Платформа:Win32

Система:Windows XP

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

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

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

Edited by mishka2
Link to comment
Share on other sites

  • 0

версия 10.51

Windows 7

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

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

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

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

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

Link to comment
Share on other sites

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

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

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

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

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

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

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

Edited by hf3
Link to comment
Share on other sites

  • 0

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

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

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

в 10.5

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy