Как узнать точно название шрифта, которое нужно ввести?

@Lexansan · Регистрация: 15.08.2014

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

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

У меня вопрос базового понимания и второй технический.
1) Вот шрифт (вложил суда в скрепочку "Вложения", пока не вижу где) Я не понимаю конкретно название чего я должен писать в формулу font-family. Шрифт хранится в файле"Prikolnui.ttf" Открывая его написано название шрифта AsylbekM29.kz . Так ничего не вышло: font-family:AsylbekM29.kz; (но это же его название?

) так тоже:
font-family:Prikolnui; Нашел увидел, что другие его называют AsylbekMereke. Вписал: font-family:AsylbekMereke; И шрифт заработал!!!
Вопрос, как узнать точно название, которое нужно ввести? Они внутри другое совсем пишут. А снаружи название файла, как я понял, значения не имеет. Как точное название в нем найти?
2) Я пользовался вот такой работающей формулой:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> </title>
<link href="css/style3.css" type="text/css" rel="stylesheet">
<style>
 @font-face {
    font-family:AsylbekMereke; 
    src: url(Files/Prikolnui.ttf);
   }
   p, h1 {
    font-family: AsylbekMereke;
   }
  </style>
</head>
<body>

И шрифт норм видно. Но я захотел задавать шрифты только в СSS. Я кинул этот файл через панель управления в папку шрифтов. В Ворде он распрекрасно себе "тогрует фейсом" c названием AsylbekM29.kz (а не AsylbekMereke

)
Потом прописал в css

CSS
1
2
3
4
.new6 { 
font-family:AsylbekMereke;
font-size:200%;
}

- НЕ ОТОБРАЖАЕТ!
потом

CSS
1
2
3
4
.new6 { 
font-family:AsylbekM29.kz;
font-size:200%;
}

- ТОЖЕ НЕ ОТОБРАЖАЕТ!

Выходит в браузере дело, но ведь через @font-face { -отображало. Как отобразить?

@fol · 08.09.2014, 00:58

локально шрифты подключаются так: кладется файл со шрифтом в папку сайта, например, fonts и в css прописывается код ниже

@font-face {
font-family: свое_название_шрифта(можно написать все, что угодно);
src: url(путь_до_шрифта/название_файла_шрифта.ttf);
}
p, h1 {
font-family: свое_название (которое было задано выше);
}

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

@prudkiy · 08.09.2014, 01:01

Называть шрифт можно как угодно, дело ваше. Формула такова для создания -

CSS
1
2
3
4
5
@font-face {
    font-family: myFont;
    src: url(fonts/pompadur.eot);
    src: local(pompadur), url(fonts/pompadur.ttf);
   }

Как видите здесь указан путь к двум шрифтам, так как возможно что браузер не поймет формат ttf или eot.
Название данного шрифта в стилях определяете вы, все что нужно это иметь эти шрифты и написать к ним правильный путь. Если у вас есть только ttf то не проблема его конвертировать, сейчас хватает таких on-line сервисов. Ну и подключение к элементу как обычно -

CSS
1
p {font-family: myFont;}

@Lexansan · 08.09.2014, 19:01 **[ТС]**

Спасибо, интересный материал.

CSS
1
2
3
4
5
6
7
@font-face {
font-family: свое_название_шрифта(можно написать все, что угодно); 
src: url(путь_до_шрифта/название_файла_шрифта.ttf);
}
p, h1 {
font-family: свое_название (которое было задано выше);
}

1)Я вас не понял, " свое_название_шрифта" - это название файлика со шрифтом, который я могу называть как захочу?
Например, есть файлик с шрифтом "Ekaterina Velikaya Two" - я переименовываю этот файл в "штопор". И отныне на него ссылаться только "штопор"?
2)"название_файла_шрифта.ttf" - это ТОЧНО ТОЖЕ "свое_название_шрифта"только с припиской .ttf ???
Тогда почему

CSS
1
2
font-family: myFont;
    src: url(Files/Prikolnui.eot);

названия в font-family и (Files/ -разные???
3)Тогда! Попробуем и так и так! Прописываю первый font-face тупо не понимая почему эти строки не совпадают. Кладу в .new1
А второй font-face , где совпадают 2 строки, кладу в .new2
Еще для проверки прописываю ,недавно втиснутый в панели управления в папку шрифты, шрифт "Ekaterina Velikaya Two" Для проверки отображется ли в принципе.
И потом просто тупо строчка.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
p {
line-height:300%;
}
@font-face {
    font-family: myFont;
    src: url(Files/Prikolnui.eot);
    src: local(Prikolnui), url(Files/Prikolnui.ttf);
   }
@font-face {
    font-family:Lombardina Initial One;
    src: url(Files/Lombardina Initial One.eot);
    src: local(Lombardina Initial One), url(Files/Lombardina Initial One.ttf);
   }
   
.new1 {
font-family:myFont;
}
.new2 {
font-family:Lombardina Initial One;
}
.new3 {
font-family:Ekaterina Velikaya Two;
}

HTML5
1
2
3
4
<p class="new1">Съешь еще этих мягких французких булок, да выпей чаю</p>
<p class="new2">Съешь еще этих мягких французких булок, да выпей чаю</p>
<p class="new3">Съешь еще этих мягких французких булок, да выпей чаю</p>
<p>Съешь еще этих мягких французких булок, да выпей чаю</p>

Результат- НИФИГА! Только "Ekaterina Velikaya Two" поменялась(((
Что-то не то....

Добавлено через 3 минуты
скрин

Как узнать точно название шрифта, которое нужно ввести?

Добавлено через 11 минут
Спасибо за ответ
Почему строки:
font-family: myFont;
src: url(fonts/pompadur.eot);
Не совпадают?
Почему не :

CSS
1
2
font-family:pompadur;
 src: url(fonts/pompadur.eot);

???

@fol · 08.09.2014, 19:58

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

Не совпадают?
Почему не :
Код CSS
font-family: pompadur;
*src: url(fonts/pompadur.eot);

еще раз:

CSS
1
2
3
4
@font-face {
font-family: свое_название_шрифта(можно написать все, что угодно); /*тут произвольное название шрифта, его потом указывать в свойстве font-family у нужного класса*/
src: url(путь_до_шрифта/название_файла_шрифта.ttf);  /*тут название файла. я предпочитаю, например, переименовать файл, заместив пробелы в названии шрифта подчеркиваниями или дефисами */
}

если презенташка от яндекса просмотрена, то все должно быть понятно

@Lexansan · 08.09.2014, 21:29 **[ТС]**

CSS
1
2
@font-face {
font-family:

Я правильно понял, что мы такой формулой ПРИСВАИВАЕМ имя?

@fol · 08.09.2014, 22:04

мы не присваиваем имя, мы пишем запрос, в котором в строке "font-family" пишем все, что придет в голову без пробела, между словами подчеркивания, а во второй строке "src: url..." пишем путь до файла (указывая разрешение файла)

@Lexansan · 09.09.2014, 11:46 **[ТС]**

Какой это запрос, если пишем все, что придет в голову. Запрос должен быть четкий. Вы суть вопрос не поняли.
Суть вопроса: Влияние события Б на событие А. А вы мне говорите: "яблоко круглое, а трава зеленая".

@fol · 09.09.2014, 16:27

Запросом, а точнее правилом, которое указывается точным образом, называется конструкция @font-face{}. Внутри же этой конструкции в строке font-family мы пишем то название, которое нам удобно будет, т.е. то, что захочется. Это как в программировании: все переменные программист называет так, как ему будет удобно, чаще всего из логических соображений. Например, resizeWindow (и записываем результат действия функции ресайза окна) или getFormInfo (в переменную записывается информация, отправленная через форму). С фонт-фэйс также: если подключаем шрифт Roboto-web-regular, то можно написать так (с учетом того, что файл шрифта лежит в папке fonts):

CSS
1
2
3
4
5
6
7
@font-face {
font-family: 'Roboto-web-regular';
src: url(fonts/Roboto-web-regular.ttf);
}
p, h1 {
font-family: Roboto-web-regular;
}

а можно так:

CSS
1
2
3
4
5
6
@font-face {
font-family: 'this is my font';
src: url(fonts/Roboto-web-regular.ttf);
p, h1 {
font-family: 'this is my font';
}

@Lexansan · 10.09.2014, 18:13 **[ТС]**

Вопрос решился так! Точное название шрифта- это вторая строка "Шрифт:" в открытом файле шрифта. Все приписки, будь то Жирный или Курсив- в игнор.
А через @font-face {
font-family: мы задаем ему новое название, только для этого документа, шрифт будет каждый раз подключаться при упоминании нового названия. Моя ошибка в этом случае была в том, что я неправильно указал папку нахождения файла!!! Я писал код в CSS, а папки указывал исходя из того, что код прописан в html. Вот и все. Я тут вообщем-то сам разобрался. Но все равно, всем спасибо за старания

@Lena-T-1981 · 15.09.2014, 00:06

Спасибо, пригодится.

Новые блоги и статьи Все статьи Все блоги /
AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .
Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .

@fol 511 / 485 / 161 Регистрация: 08.07.2013 Сообщений: 1,714 Записей в блоге: 1
	08.09.2014, 00:58
	локально шрифты подключаются так: кладется файл со шрифтом в папку сайта, например, fonts и в css прописывается код ниже @font-face { font-family: свое_название_шрифта(можно написать все, что угодно); src: url(путь_до_шрифта/название_файла_шрифта.ttf); } p, h1 { font-family: свое_название (которое было задано выше); } нужно не забывать, что это работает только для современных браузеров, для ИЕ и старых версий нужны другие расширения шрифтов. а еще можно глянуть эту презенташку про кастомные шрифты 1

@fol 511 / 485 / 161 Регистрация: 08.07.2013 Сообщений: 1,714 Записей в блоге: 1
	08.09.2014, 22:04
	мы не присваиваем имя, мы пишем запрос, в котором в строке "font-family" пишем все, что придет в голову без пробела, между словами подчеркивания, а во второй строке "src: url..." пишем путь до файла (указывая разрешение файла) 1

@Lexansan 3 / 3 / 0 Регистрация: 15.08.2014 Сообщений: 73
	09.09.2014, 11:46 [ТС]
	Какой это запрос, если пишем все, что придет в голову. Запрос должен быть четкий. Вы суть вопрос не поняли. Суть вопроса: Влияние события Б на событие А. А вы мне говорите: "яблоко круглое, а трава зеленая". 0

@Lexansan 3 / 3 / 0 Регистрация: 15.08.2014 Сообщений: 73
	10.09.2014, 18:13 [ТС]
	Вопрос решился так! Точное название шрифта- это вторая строка "Шрифт:" в открытом файле шрифта. Все приписки, будь то Жирный или Курсив- в игнор. А через @font-face { font-family: мы задаем ему новое название, только для этого документа, шрифт будет каждый раз подключаться при упоминании нового названия. Моя ошибка в этом случае была в том, что я неправильно указал папку нахождения файла!!! Я писал код в CSS, а папки указывал исходя из того, что код прописан в html. Вот и все. Я тут вообщем-то сам разобрался. Но все равно, всем спасибо за старания 0

@Lena-T-1981 5 / 5 / 0 Регистрация: 12.09.2014 Сообщений: 22
	15.09.2014, 00:06
	Спасибо, пригодится. 0