font@face for firefox - HTML и CSS

Luara · 18.05.2015, 14:52

Все добрый день.

Помогите, пожалуйста, разобраться вот с чем.

Есть шрифт: http://www.fonts2u.com/code-light.font

Подключаю его так:

Код:

@font-face {
	font-family: "CODE Light";
	src: url('../fonts/CODE_Light.eot');
    src: url('../fonts/CODE_Light.eot?#iefix') format('embedded-opentype'),
         url('../fonts/CODE_Light.woff2') format('woff2'),
         url('../fonts/CODE_Light.woff') format('woff'),
         url('../fonts/CODE_Light.ttf') format('truetype'),
         url('../fonts/CODE_Light.svg#latolight') format('svg');
	font-weight:normal;
	font-style:normal;
....

#caption h2 {
		color: #82574b;
		font-size: 100px;
		line-height: 150px; 
		font-family: "CODE Light", sans-serif;
		text-transform: uppercase; 
		font-weight: normal;
		float: left;
		margin: 0 30px 0 0;
		}
....
}

В firefox выглядит вот так: http://prntscr.com/76k4fk

А должен вот так: http://prntscr.com/76k4kb

Помогите, пожалуйста, разобраться и решить эту проблемку.
Спасибо.

SQLPowerUser · 19.05.2015, 09:49

Скачал я шрифт http://www.fonts2u.com/download/code-light.font-face
Английские буквы - ОК, а русские буквы не хочет нормально отображать. Проверял в последних версиях Оперы, Мозиллы

Код HTML:

<!DOCTYPE HTML>
<html>
<head>
<title>Пример Code-Light @font-face kit</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
@font-face {
  font-family:"Code-Light";
  src:url("CODE_Light.eot?") format("eot"),
  url("CODE_Light.woff") format("woff"),url("CODE_Light.ttf") format("truetype"),url("CODE_Light.svg#Code-Light") format("svg");
  font-weight:normal;font-style:normal;
}
p {
  margin:5px; padding:5px;
  background:#4682b4; color:#fff;
  font-family:"Code-Light";
  font-size:30px;
}
</style>
</head>
<body>
<p>My name is Oliver Queen</p>
<p>Меня зовут Оливер Куин</p>
</body>
</html>

Luara · 19.05.2015, 11:29

Спасибо Вам за ответ.

Цитата:

Сообщение от SQLPowerUser

Скачал я шрифт http://www.fonts2u.com/download/code-light.font-face
Английские буквы - ОК, а русские буквы не хочет нормально отображать. Проверял в последних версиях Оперы, Мозиллы

У меня как раз не работает ни при каких условиях именно в Мозилле.
То, что русские буквы не отображает для меня не критично, так как используется этот стиль только для названия на английском языке.

Цитата:

Сообщение от SQLPowerUser

Код HTML:

<!DOCTYPE HTML>
<html>
<head>
<title>Пример Code-Light @font-face kit</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
@font-face {
  font-family:"Code-Light";
  src:url("CODE_Light.eot?") format("eot"),
  url("CODE_Light.woff") format("woff"),url("CODE_Light.ttf") format("truetype"),url("CODE_Light.svg#Code-Light") format("svg");
  font-weight:normal;font-style:normal;
}
p {
  margin:5px; padding:5px;
  background:#4682b4; color:#fff;
  font-family:"Code-Light";
  font-size:30px;
}
</style>
</head>
<body>
<p>My name is Oliver Queen</p>
<p>Меня зовут Оливер Куин</p>
</body>
</html>

Вместо charset=utf-8 "стояло" charset=windows-1251". При замене на utf-8 заработало в ИЕ.
При использовании непосредственно в стилях

Код HTML:

p {
  ...
  font-family:"Code-Light";
  ...
}

названия "Code-Light" перестало работать в ИЕ. Работает только при:

Код HTML:

font-family: "CODE Light"...

Вот так.

Но в Мозилле не работает.

У меня, конечно есть еще две идеи:
1. (не правильная) Использовать картинку.
2. Подключить куфон. Не знаю поможет ли.

SQLPowerUser · 19.05.2015, 11:41

Я привел скрин как раз из Мозиллы

(у меня версия 38.0.1)
А если через !important?

Luara · 19.05.2015, 13:12

Цитата:

Сообщение от SQLPowerUser

Я привел скрин как раз из Мозиллы

(у меня версия 38.0.1)
А если через !important?

Везет Вам))

У меня все-равно не работает ((

SQLPowerUser · 19.05.2015, 15:30

И через !important не работает?

Luara · 19.05.2015, 15:46

Цитата:

Сообщение от SQLPowerUser

И через !important не работает?

Нет, не работает.
Самое интересное, что и куфон подключенный не отображает так, как надо(

SQLPowerUser · 19.05.2015, 17:18

Я пользуюсь очень хорошим и понятным отладчиком в Мозилле.
Правой кнопкой мыши щелкаем в нужный нам элемент или текст, далее в меню выбираем пункт Исследовать элемент
Появится Инспектор, а в правой части экрана будут кнопки Правила, Вычислено, Шрифты, Блоковая модель, Анимации.
Нажмите кнопку Шрифты, и там будет показано, какой шрифт используется у данного элемента. Возможно, нужный нам шрифт просто не подхватился.
Также внизу будет кнопка, которая на всякий случай выведет все шрифты на странице...

Luara · 19.05.2015, 17:37

Понимаете, мне нужно что бы этот заработал.
И если бы там еще было написано, что нужно сделать для того, что бы он подключился, то для меня бы не было большего счастья))

SQLPowerUser · 19.05.2015, 17:51

Новый пример со скрином из Мозиллы. Я переименовал шрифт в MyFont

Код:

<!DOCTYPE HTML>
<html>
<head>
<title>Пример Code-Light @font-face kit</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
@font-face {
  font-family:"MyFont";
  src:url("CODE_Light.eot?") format("eot"),
  url("CODE_Light.woff") format("woff"),url("CODE_Light.ttf") format("truetype"),url("CODE_Light.svg#Code-Light") format("svg");
  font-weight:normal;font-style:normal;
}
p {
  margin:5px; padding:5px;
  background:#4682b4; color:#fff;
  font-family:"MyFont";
  font-size:30px;
}
</style>
</head>
<body>
<p>My name is Oliver Queen</p>
</body>
</html>

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

18.05.2015, 14:52	#1
Luara Пользователь Регистрация: 14.04.2015 Сообщений: 29	font@face for firefox Все добрый день. Помогите, пожалуйста, разобраться вот с чем. Есть шрифт: http://www.fonts2u.com/code-light.font Подключаю его так: Код: @font-face { font-family: "CODE Light"; src: url('../fonts/CODE_Light.eot'); src: url('../fonts/CODE_Light.eot?#iefix') format('embedded-opentype'), url('../fonts/CODE_Light.woff2') format('woff2'), url('../fonts/CODE_Light.woff') format('woff'), url('../fonts/CODE_Light.ttf') format('truetype'), url('../fonts/CODE_Light.svg#latolight') format('svg'); font-weight:normal; font-style:normal; .... #caption h2 { color: #82574b; font-size: 100px; line-height: 150px; font-family: "CODE Light", sans-serif; text-transform: uppercase; font-weight: normal; float: left; margin: 0 30px 0 0; } .... } В firefox выглядит вот так: http://prntscr.com/76k4fk А должен вот так: http://prntscr.com/76k4kb Помогите, пожалуйста, разобраться и решить эту проблемку. Спасибо.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Проблема с веб-шрифтами (@font-face)	ALьT	HTML и CSS	4	02.11.2011 07:54
Кроссбраузерный @font-face	dprzrv	HTML и CSS	1	31.10.2011 13:31
font-face - может кто сталкивался?	DmitS	HTML и CSS	2	19.09.2011 10:12
font-face не работает! как подключить шрифт по другому	Drek	HTML и CSS	3	13.02.2011 21:36

19.05.2015, 11:41	#4
SQLPowerUser Форумчанин Регистрация: 19.01.2015 Сообщений: 158	Я привел скрин как раз из Мозиллы (у меня версия 38.0.1) А если через !important?

19.05.2015, 15:30	#6
SQLPowerUser Форумчанин Регистрация: 19.01.2015 Сообщений: 158	И через !important не работает?

19.05.2015, 17:18	#8
SQLPowerUser Форумчанин Регистрация: 19.01.2015 Сообщений: 158	Я пользуюсь очень хорошим и понятным отладчиком в Мозилле. Правой кнопкой мыши щелкаем в нужный нам элемент или текст, далее в меню выбираем пункт Исследовать элемент Появится Инспектор, а в правой части экрана будут кнопки Правила, Вычислено, Шрифты, Блоковая модель, Анимации. Нажмите кнопку Шрифты, и там будет показано, какой шрифт используется у данного элемента. Возможно, нужный нам шрифт просто не подхватился. Также внизу будет кнопка, которая на всякий случай выведет все шрифты на странице...

19.05.2015, 17:37	#9
Luara Пользователь Регистрация: 14.04.2015 Сообщений: 29	Понимаете, мне нужно что бы этот заработал. И если бы там еще было написано, что нужно сделать для того, что бы он подключился, то для меня бы не было большего счастья))