Javascript-форум - Как сделать font-face?

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>

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

Gozar

26.03.2012 23:00

Цитата:

Сообщение от kozhilya (Сообщение 165109)

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

Подскажу. Положи шрифт рядом с файлом style.css у себя на хостинге, откуда ты грузишь сам сайт. С вероятностью в 99% все заработает.

kozhilya

27.03.2012 10:04

Цитата:

Сообщение от Gozar (Сообщение 165110)

Проблема только 1. Я работаю с форумами mybb, и там нет возможности загрузить файлы с расширениями ttf и eot.

Gozar

27.03.2012 11:14

Цитата:

Сообщение от kozhilya (Сообщение 165158)

Проблема только 1. Я работаю с форумами mybb, и там нет возможности загрузить файлы с расширениями ttf и eot.

Никакой фантазии, научись думать головой, если они проверяют файл по .ext совпадению, то прокатит следующее:

url("/font/MyTTFFont.svg") format("truetype");

kozhilya

27.03.2012 12:21

Цитата:

Сообщение от Gozar (Сообщение 165166)

Никакой фантазии, научись думать головой, если они проверяют файл по .ext совпадению, то прокатит следующее:

url("/font/MyTTFFont.svg") format("truetype");

Ох ты ж ё... Работает О_О
Большое спасибо!!!

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