Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Как сделать font-face? (https://javascript.ru/forum/xhtml-html-css/26865-kak-sdelat-font-face.html)

kozhilya 25.03.2012 22:02

Как сделать font-face?
 
Здравствуйте. Как сделать так, что бы текст написался правильным шрифтом? Вот ссылка на песочницу:
http://learn.javascript.ru/play/z2MZjc

bot87 25.03.2012 23:40

все работает:)

FINoM 26.03.2012 01:39

kozhilya,
Может быть ваш браузер не поддерживает этот формат шрифта. Погуглите онлайн конвертеры.

Tim 26.03.2012 04:07

Кст, о шрифтах. Вот недавно нашёл на хабре: Что нам стоит font построить?

kozhilya 26.03.2012 10:11

Цитата:

Сообщение от bot87 (Сообщение 164964)
все работает:)

У меня IE9 и MF7. Не работает.

Цитата:

Сообщение от FINoM (Сообщение 164978)
kozhilya,
Может быть ваш браузер не поддерживает этот формат шрифта. Погуглите онлайн конвертеры.

Погуглил вчера, вышло это:
http://learn.javascript.ru/play/gg1L6b
Всё равно не работает.

Цитата:

Сообщение от Tim (Сообщение 164983)
Кст, о шрифтах. Вот недавно нашёл на хабре: Что нам стоит font построить?

Это совсем не то. Мне не значки ставить надо, а готовый ttf-шрифт

Gozar 26.03.2012 17:46

Цитата:

Сообщение от kozhilya (Сообщение 164997)
У меня IE9 и MF7. Не работает.

И не будет.

Цитата:

Сообщение от kozhilya (Сообщение 164997)
Это совсем не то. Мне не значки ставить надо, а готовый ttf-шрифт

ttf шрифты не работают в IE. Сконвертируй в eot и подключай.

Вот кроссбраузерный(Кроме Опера*) пример:

Цитата:

@font-face {
font-family: "MyFont";
src: url("font/MyFont.eot");
src: local(""),
url("font/MyFont.woff") format("woff"),
url("font/MyFont.ttf") format("truetype"),
url("font/MyFont.svg#MyFont") format("svg");
}

h1 { font-family: "MyFont", serif;}
* В Опера поставленной на винду имя пользователя которого содержит кирилицу работать не будет ни один из способов. Этот баг никто не исправил, вроде.

Nanto 26.03.2012 18:50

http://www.fontsquirrel.com/fontface/generator

kozhilya 26.03.2012 22:12

Nanto,
Вот что пишет: ITC has requested that their font Papyrus ru Regular be blacklisted by the Generator. You will not be able to convert this font.

Gozar,
Вот пробная страничка: http://kozhilya.userforum.ru/pages/experiments
И вот её код:
<style type="text/css">
@font-face {
  font-family: "PapyrusRu";
  src: url("http://kozhilya2012.narod2.ru/PAPYRUS_en_ru_bloh24.eot");
  src: local(""),
url("http://kozhilya2012.narod2.ru/PAPYRUS_en_ru_bloh24.woff") format("woff"),
url("http://kozhilya2012.narod2.ru/PAPYRUS_en_ru_bloh24.ttf") format("truetype"),
url("http://kozhilya2012.narod2.ru/PAPYRUS_en_ru_bloh24.svg#PAPYRUS_en_ru_bloh24") format("svg");
}
.demo
{
	font-family: 'PapyrusRu', Sans-Serif;
	width:800px;
	margin:10px auto;
	text-align:left;
	border:1px solid #666;
	padding:10px;
}
</style>
<div class="demo" style="font-size:25px">
	The quick brown fox jumps over the lazy dog. <br>
        Съешь ещё этих мягких французских булочек, да выпейже чаю.
</div>

Почему это не работает?!

P.S. Итоговый шрифт должен быть таким же, как и в на картинке в шапке форума.

Gozar 26.03.2012 22:50

Цитата:

Сообщение от kozhilya (Сообщение 165100)
Nanto,
Вот что пишет: ITC has requested that their font Papyrus ru Regular be blacklisted by the Generator. You will not be able to convert this font.

Бугага, он просто посоветовал тебе говносервис. Не пользуюсь им. Найди себе локальный конвертер.

Укоротим скрипт:
<html><head><style type="text/css">
@font-face {
font-family: "bloh";
src: url("http://kozhilya2012.narod2.ru/PAPYRUS_en_ru_bloh24.eot"),
url("http://kozhilya2012.narod2.ru/PAPYRUS_en_ru_bloh24.ttf") format("truetype");
}
.demo {
	font: 25px 'bloh' ;
	width:800px;
	border:1px solid #666;
	padding:10px;
}
</style></head><body>
<div class="demo">
	The quick brown fox jumps over the lazy dog. <br>
        Съешь ещё этих мягких французских булочек, да выпейже чаю.
</div></body></html>

У меня такое работает, только не с твоим шрифтом. Может у тебя шрифт битый? или загрузиться не может с левого урла.

kozhilya 26.03.2012 22:55

Цитата:

Сообщение от Gozar (Сообщение 165108)
Бугага, он просто посоветовал тебе говносервис. Не пользуюсь им. Найди себе локальный конвертер.

Укоротим скрипт:
<html><head><style type="text/css">
@font-face {
font-family: "bloh";
src: url("http://kozhilya2012.narod2.ru/PAPYRUS_en_ru_bloh24.eot"),
url("http://kozhilya2012.narod2.ru/PAPYRUS_en_ru_bloh24.ttf") format("truetype");
}
.demo {
	font: 25px 'bloh' ;
	width:800px;
	border:1px solid #666;
	padding:10px;
}
</style></head><body>
<div class="demo">
	The quick brown fox jumps over the lazy dog. <br>
        Съешь ещё этих мягких французских булочек, да выпейже чаю.
</div></body></html>

У меня такое работает, только не с твоим шрифтом. Может у тебя шрифт битый? или загрузиться не может с левого урла.

Скорее второе... А куда залить файлы можно, не подскажешь??


Часовой пояс GMT +3, время: 20:55.