Не отображается присоединенный к CSS шрифт

@Ellinist · Регистрация: 05.09.2017

Студворк — интернет-сервис помощи студентам

Добрый день. Есть проблемка. Пытаюсь подключить TTF шрифт к CSS - результат нулевой.
Вот текст HTML (лишнее убрал):

HTML5
1
2
3
4
<div id="header">
    <h1 id="logo">Созвездие</h1>
    <h2 id="slogan">Описание сайта (краткое)</h2>
  </div>

Вот текст CSS:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
@font-face{
    font-family: Isabella-Decor;
    src:url("fonts/Isabella-Decor.ttf") format('truetype');
}
 
#header h1#logo {
font-family: Isabella-Decor;
position: absolute;
margin: 10px 0 0 10px;
padding: 0;
/* font: normal 2.5em 'lucida sans', 'Trebuchet MS', Arial, Sans-serif; */
letter-spacing: 3px;
text-transform: none;
top: 0; left: 5px;  
 
#header h2#slogan {
position: absolute;  
top:30px; left: 90px;
color: #eee;
text-indent: 0px;
font: bold 11px 'lucida sans', Tahoma, 'trebuchet MS', Sans-serif; 
text-transform: none;   
}
 
p {
padding: 10px 15px 10px 15px;
}
h1 {    
font-family: Isabella-Decor;    
padding: 20px;
font-size: 300%;
letter-spacing: 3px;
color:  #FB8D2D;
background: transparent;
}
h2 {font-family:  helvetica, "Trebuchet MS", tahoma, "lucida sans", sans-serif;
margin-left:10px;
padding: 15px;
font-size: 150%;
letter-spacing: 3px;
color:  #FB8D2D;
background: transparent;
}

В общем - текст "Созвездие" не отображается правильным шрифтом. Используется подстановочный. Шрифт Isabella-Decor намеренно не устанавливал в системе, чтобы не нарушать картину - но - не подгружается.
Что я делаю не так? Заранее спасибо...

@AlexZaw · 15.10.2017, 10:27

Проверьте путь до файла шрифтов, проблема в нем скорее всего, так как все правильно прописано, или очистите кеш браузера

@Ellinist · 15.10.2017, 10:35 **[ТС]**

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

Проверьте путь до файла шрифтов, проблема в нем скорее всего, так как все правильно прописано, или очистите кеш браузера

Да с путем-то все нормально. Если я прописываю указание принять шрифт в разделе Header (заголовок) - то все отображается. Но мне нужно, чтобы шрифт отображался только для строки "Созвездие". Вот в чем проблема...

Добавлено через 5 минут
Разобрался сам. Прошу прощения за беспокойство - просто для тега h1 я не указывал семейство шрифта в кавычках, а просто писал текст. А в Header - было в кавычках.

@AlexZaw · 15.10.2017, 10:37

Странно конечно, но у меня работает именно ваш код (только путь к шрифтам прописал), и именно так как вам надо, кеш сбрасывали? Ну или просто ctrl+f5 в браузере.

@Ellinist · 15.10.2017, 10:41 **[ТС]**

Когда я прописываю вот так:

CSS
1
font-family: Isabella-Decor;

ничего не работает...
А когда вот так:

CSS
1
font-family: 'Isabella-Decor';

все работает, как часы.
А насчет кэша - я думаю, он здесь ни при чем. Хотя... Попробовал - разницы нет.

@AlexZaw · 15.10.2017, 10:51

Вообще в кавычки название шрифта нужно заключать если оно содержит пробелы, если же пробелов нет то и кавычки не обязательны. Странное у вас поведение браузера, но надо запомнить на всякий случай, вдруг столкнусь с подобным

@Ellinist · 15.10.2017, 10:57 **[ТС]**

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

Странное у вас поведение браузера, но надо запомнить на всякий случай, вдруг столкнусь с подобным

Я пользовался FireFox-ом. На других пока не проверял.

@AlexZaw · 15.10.2017, 11:07

Проверял в ie, opera, chrome, firefox, везде работает без кавычек. У вас никаких препроцессоров, минификаторов и т.п. не стоит? Может они как то не так компилируют имя шрифта без кавычек?

@Ellinist · 15.10.2017, 11:08 **[ТС]**

Нет, ничего такого не стоит. Ладно - спасибо за участие - буду сейчас эксперименты проводить - о результатах напишу.

Протестировал. Все работает и без кавычек - в чем была проблема - не могу в толк взять. Видимо, все-таки, кэш.

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	15.10.2017, 10:27
	Проверьте путь до файла шрифтов, проблема в нем скорее всего, так как все правильно прописано, или очистите кеш браузера 0

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	15.10.2017, 10:37
	Странно конечно, но у меня работает именно ваш код (только путь к шрифтам прописал), и именно так как вам надо, кеш сбрасывали? Ну или просто ctrl+f5 в браузере. 0

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	15.10.2017, 10:51
	Вообще в кавычки название шрифта нужно заключать если оно содержит пробелы, если же пробелов нет то и кавычки не обязательны. Странное у вас поведение браузера, но надо запомнить на всякий случай, вдруг столкнусь с подобным 1

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	15.10.2017, 11:07
	Проверял в ie, opera, chrome, firefox, везде работает без кавычек. У вас никаких препроцессоров, минификаторов и т.п. не стоит? Может они как то не так компилируют имя шрифта без кавычек? 0

@Ellinist 8 / 8 / 0 Регистрация: 05.09.2017 Сообщений: 81
	15.10.2017, 11:08 [ТС]
	Нет, ничего такого не стоит. Ладно - спасибо за участие - буду сейчас эксперименты проводить - о результатах напишу. Протестировал. Все работает и без кавычек - в чем была проблема - не могу в толк взять. Видимо, все-таки, кэш. 0