Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 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

Помогите, пожалуйста, разобраться и решить эту проблемку.
Спасибо.
Luara вне форума Ответить с цитированием
Старый 19.05.2015, 09:49   #2
SQLPowerUser
Форумчанин
 
Аватар для SQLPowerUser
 
Регистрация: 19.01.2015
Сообщений: 158
Восклицание Для кириллицы не работает

Скачал я шрифт 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>
Изображения
Тип файла: png q.PNG (6.9 Кб, 31 просмотров)
SQLPowerUser вне форума Ответить с цитированием
Старый 19.05.2015, 11:29   #3
Luara
Пользователь
 
Регистрация: 14.04.2015
Сообщений: 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. Подключить куфон. Не знаю поможет ли.
Luara вне форума Ответить с цитированием
Старый 19.05.2015, 11:41   #4
SQLPowerUser
Форумчанин
 
Аватар для SQLPowerUser
 
Регистрация: 19.01.2015
Сообщений: 158
По умолчанию

Я привел скрин как раз из Мозиллы (у меня версия 38.0.1)
А если через !important?
SQLPowerUser вне форума Ответить с цитированием
Старый 19.05.2015, 13:12   #5
Luara
Пользователь
 
Регистрация: 14.04.2015
Сообщений: 29
По умолчанию

Цитата:
Сообщение от SQLPowerUser Посмотреть сообщение
Я привел скрин как раз из Мозиллы (у меня версия 38.0.1)
А если через !important?

Везет Вам))

У меня все-равно не работает ((
Luara вне форума Ответить с цитированием
Старый 19.05.2015, 15:30   #6
SQLPowerUser
Форумчанин
 
Аватар для SQLPowerUser
 
Регистрация: 19.01.2015
Сообщений: 158
Стрелка

И через !important не работает?
SQLPowerUser вне форума Ответить с цитированием
Старый 19.05.2015, 15:46   #7
Luara
Пользователь
 
Регистрация: 14.04.2015
Сообщений: 29
По умолчанию

Цитата:
Сообщение от SQLPowerUser Посмотреть сообщение
И через !important не работает?
Нет, не работает.
Самое интересное, что и куфон подключенный не отображает так, как надо(
Luara вне форума Ответить с цитированием
Старый 19.05.2015, 17:18   #8
SQLPowerUser
Форумчанин
 
Аватар для SQLPowerUser
 
Регистрация: 19.01.2015
Сообщений: 158
По умолчанию

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

Понимаете, мне нужно что бы этот заработал.
И если бы там еще было написано, что нужно сделать для того, что бы он подключился, то для меня бы не было большего счастья))
Luara вне форума Ответить с цитированием
Старый 19.05.2015, 17:51   #10
SQLPowerUser
Форумчанин
 
Аватар для SQLPowerUser
 
Регистрация: 19.01.2015
Сообщений: 158
Стрелка

Новый пример со скрином из Мозиллы. Я переименовал шрифт в 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>
Если этот пример не заработает, но наверное лучше картинкой...
Изображения
Тип файла: jpg q.jpg (26.2 Кб, 122 просмотров)

Последний раз редактировалось SQLPowerUser; 19.05.2015 в 18:05.
SQLPowerUser вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблема с веб-шрифтами (@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