Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > проблема с загрузкой своего шрифта

Автор: pythonwin 20.2.2008, 13:40

Всем привет!
скажите, пожалуйста в чем может быть причина - не работает подгрузка своего шрифта
измененный пример из http://loc.stack.ru/projects/CSS2/fonts.html#font-selection

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Тестирование шрифтов</TITLE>
    <STYLE TYPE="text/css" MEDIA="screen, print">
      @font-face {
        font-family: "Coronet";
        src: url("Coronet.ttf")
      }
      H1 { font-family: "Coronet"}
    </STYLE>
  </HEAD>
  <BODY>
    <H1> Этот заголовок отображается шрифтом Robson Celtic</H1>
  </BODY>
</HTML>

шрифт во вложении - по-тестируйте, пожалуйста.

Автор: ilyaILF 20.2.2008, 14:26

Шрифт должен быть в формате .eot :
<style type="text/css">
@font-face {
font-family: "My_font";
src: url(some_font_file.eot);
}
BODY {font-family: "My_font", Arial}
</style>
Программу для конвертации шрифтов в этот формат можно скачать отсюда http://www.microsoft.com/typography/web/embedding/weft3/
Работать это все будет только в броузерах семейства IE, так, что сейчас с этим уже никто старается не связываться.

Автор: pythonwin 20.2.2008, 14:28

Цитата(ilyaILF @ 20.2.2008, 17:26

)

Работать это все будет только в броузерах семейства IE, так, что сейчас с этим уже никто старается не связываться.

а как быть в фф и опере?

Автор: NDenis 20.2.2008, 14:31

Цитата(pythonwin @ 20.2.2008, 14:28

)

а как быть в фф и опере?

По возможности не использовать не стандартные шрифты. Если все-таки такой возможности нет, тогда использовать картинки

Автор: ilyaILF 20.2.2008, 14:37

Есть возможность подгружать свои шрифты с помошью флэш-ролика http://flash-mx.ru/url_fonts, только по-моему для оформления текста должен будет использоваться сам флэш.

Автор: pythonwin 20.2.2008, 14:48

Цитата(ilyaILF @ 20.2.2008, 17:37

)

а менее извратный способ есть?

Автор: ilyaILF 21.2.2008, 11:21

Использовать стандартные семейства шрифтов:
serif - Georgia, Times, Times New Roman, Garamond Century, Schoolbook.
sans-serif - Verdana, Arial, Helvetica, Trebuchet, Tahoma.
monospace - Courier, MS Corier New, Prestige.
cursive - Lucida Handwriting, Zapf-Chancery.
fantasy - Comic Sans, Whimsey, Critter, Cottonwood.

Автор: pythonwin 22.2.2008, 07:31

Цитата(ilyaILF @ 21.2.2008, 14:21

)

Использовать стандартные семейства шрифтов:
serif - Georgia, Times, Times New Roman, Garamond Century, Schoolbook.
sans-serif - Verdana, Arial, Helvetica, Trebuchet, Tahoma.
monospace - Courier, MS Corier New, Prestige.
cursive - Lucida Handwriting, Zapf-Chancery.
fantasy - Comic Sans, Whimsey, Critter, Cottonwood.

всё правильно, но например у меня линукс и у меня соответственно нет этих шрифтов?
а на маках я их тоже не видел...

Автор: frik8th 25.2.2008, 14:54

Цитата(ilyaILF @ 20.2.2008, 14:26)

расскажи пожалуйста как этой прогой из ttf в eot конвертировать, по моему там в eot можно только из вебдокумента конвертировать?

Автор: ilyaILF 25.2.2008, 15:12

Не совсем понятно мне в чем проблема использования этой программы... Сначала вы скачиваете себе дистрибутив WEFT со страницы http://www.microsoft.com/typography/web/embedding/weft3/weft01.htm устанавливаете себе ее на компьютер. Далее запускаете мастера который по шагам (их всего 6) будет проводить вас к созданию необходимого файла шрифта *.eot Да, он спрашивает адрес странички, можно задать даже адрес с локального диска, даже просто создать любую индексную страничку *.html и указать ее (перед этим на ней надо конечно же подключить все необходимые "экзотические" шрифты), далее программа сама создаст необходимые файлы *.eot со всеми используемыми на вашей страничке шрифтами и подключит их в файле *.html Дальше вы можете их (*.eot) использовать по своему усмотрению.

Автор: frik8th 25.2.2008, 16:28

Цитата(ilyaILF @ 25.2.2008, 15:12)

создать любую индексную страничку *.html и указать ее (перед этим на ней надо конечно же подключить все необходимые "экзотические" шрифты)

можешь привети пример такой странички? smile

Автор: pythonwin 25.2.2008, 17:22

попробуй

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
  <title></title>
  <meta name="GENERATOR" content="Quanta Plus">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>


</body>
</html>

Автор: ilyaILF 25.2.2008, 19:03

Сохраните на Рабочий стол например такую страничку:

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css">
p {font-family: "Book Antiqua";}
span {font-family: "Franklin Gothic Medium";}
a {font-family: "Lucida Console";}
</style>
</head>
<body>
<p>Пример, пример, пример, пример, пример, пример, пример, пример, пример, пример, пример</p>
<span>Пример, пример, пример, пример, пример, пример, пример, пример, пример, пример, пример</span>
<a>Пример, пример, пример, пример, пример, пример, пример, пример, пример, пример, пример, пример</a>
</body>
</html>

И запустите WEFT, далее выберите этот сохраненный файл на определенном шаге мастера WEFT и он вам сгенерирует на этом же рабочем столе файлы *eot. Шрифты я взял произвольные, которые у меня были в системе, обязательно позаботьтесь о том, чтобы шрифты были у вас в системе, прежде чем запускать WEFT, иначе ему просто не из чего будет создавать файлы *.eot

Автор: frik8th 25.2.2008, 21:57

Целый день голову ломал и вот научился! ilyaILF, спасибо за пример smile

Автор: pythonwin 27.2.2008, 10:09

а есть ресурсы где выложены уже созданные eot?

PS гугле не помог

ilyaILF, спасибо за помощь +=1

Автор: dr.ZmeY 22.3.2010, 12:54

Понимаю, что это никрофелия, но все же...

Код


<style type="text/css">
@font-face {
 font-family: MyCustomFont;
 src: url("Europe_Ext_Normal.eot") /* EOT file for IE */
}
@font-face {
 font-family: MyCustomFont;
 src: url("Europe_Ext_Normal.Ttf") /* TTF file for CSS3 browsers */
}
</style>

Все работает smile