Ссылки и подключение шрифтов - HTML и CSS

gryllus · 28.09.2017, 21:36

Добрый вечер! Ни когда раньше не приходилось подключать шрифты с "Google fonts" или каких либо других бесплатных ресурсов в интернете.
Ну, сделать абсолютную ссылку не составило труда, скопировал ссылки для html и css и вставил их соответственно htm между тегами <head></head>, а css в классе котором нужен данный шрифт. Я конечно недавно в этом варюсь, но логически понял, что данные ссылки будут тормозить загрузку документа. Это даже видно не выкладывая в интернет, поэтому решил скачать шрифты и установить их не посредственно в папку сайта. Скачать не составило труда, но с установкой через @font-face(относительная ссылка css) пропарился довольно долго.
Понял вот что, не надо до того как вы не убедились что шрифт действительно работает в документе устанавливать его на компьютер. Во многих браузерах показывает, что шрифт применился хотя это не так( меня Opera выручила, показала, что шрифт по ссылке не установился.)
Далее непосредственно ссылки:

Код:

<link rel="stylesheet" type="text/css" href="../bigben/style/fonts.css"/>

и вот другая из файла fonts.css(вывел ссылки в отдельный файл css):

Код:

@font-face {
font-family: Bad Script;
src: url(../fonts/BadScript-Regular.ttf);

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

Код:

.name{
	border-radius:7px;
	text-align:center;
	text-shadow:1.5px 1.5px 2px white, 3px 3px 2px green, 4.5px 4.5px 2px white, 6px 6px 2px green;
	box-shadow:inset 0 0 60px 5px rgb(99, 146, 28), 0 0 20px 20px rgb(254, 254, 34); 
	word-spacing:10px;
	font-family: 'Bad Script', cursive;
	font-size:550%;
	font-weight:600;
	color:#008000;
	flex:2.5 0 0;
	bottom:5%;
}

и как файл BadScript-Regular.ttf... Почему так?
Особенно поразили конечно ссылки... Что, в css надо указывать на одну папку меньше?
С Наилучшими пожеланиями!

[QUOTE]"Все Мысли О смерти нужны для жизни!"
Л. Н. Толстой[/QUOTE]

Alex11223 · 28.09.2017, 21:54

Цитата:

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

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

Дык не выкладывая понятно, что локальный файл быстрее взять.
А пользователю ж в интернете в любом случае придется грузить откуда-то, и с какого сервера (вашего или гугловского) получится быстрее сложно сказать. Скорее всего разница несущественна + закешируется после 1 запроса.

Цитата:

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

Особенно поразили конечно ссылки... Что, в css надо указывать на одну папку меньше?

где лежит, туда и надо.
Что и где у вас лежит?

gryllus · 28.09.2017, 22:26

Цитата:

где лежит, туда и надо.
Что и где у вас лежит?

В том-то и дело, что у меня лежит всё в одной папке... Рабочий стол => папка сайта => папка fonts => файл шрифта и в html аналогично, а в кодах всё не так.

Alex11223 · 28.09.2017, 22:28

Так а css файл где лежит?

gryllus · 28.09.2017, 22:31

Цитата:

Так а css файл где лежит?

Рабочий стол => папка сайта => папка style => файл со стилями...

Alex11223 · 28.09.2017, 22:51

А зачем тогда .. в html? Почему не просто "style/fonts.css"?

pompiduskus · 28.09.2017, 23:08

Цитата:

Особенно поразили конечно ссылки... Что, в css надо указывать на одну папку меньше?

Это не так =))

Код:

background: url('/root/of/my/site/png');

Код:

var fp = new Audio(); 
fp.src = '/root/of/my/site/file.mp3';

gryllus · 29.09.2017, 15:28

Цитата:

А зачем тогда .. в html? Почему не просто "style/fonts.css"?

У меня шрифты находятся в отдельном файле CSS <link rel="stylesheet" type="text/css" href="../bigben/style/fonts.css"/> (красным выделен путь к файлу CSSсо шрифтами) который подключаем в HTML. Где видно, что папка которая мне нужна лежит: рабочий стол => далее папка сайта bigben => далее папка с файлами CSS style => и непосредственно сам файл CSS со шрифтами.

А вот как выглядит путь к шрифту через @font-face - вот так src: url(../fonts/BadScript-Regular.ttf); ПОЧЕМУ КОРОЧЕ???Хотя файл находится точно по такому же пути как подключение файла CSS в HTML - рабочий стол => далее папка сайта bigben => далее папка с файлами TTF fonts => и непосредственно сам файл TTF со шрифтом[/COLOR].

Цитата:

Это не так =))

У вас вас указан путь к фоновому рисунку.

А у меня к шрифтам, вы говорите не так вот код рядом друг с другом:

Код:

href="../bigben/style/fonts.css"/

Код:

src: url(../fonts/BadScript-Regular.ttf)

Alex11223 · 29.09.2017, 15:42

.. это перейти на уровень выше.

Если вы уже в bigben, то .. это рабочий стол. Соответственно "../bigben/" не нужно если HTML и папка style лежат в bigben.

gryllus · 29.09.2017, 16:00

Цитата:

Если вы уже в bigben, то .. это рабочий стол. Соответственно "../bigben/" не нужно если HTML и папка style лежат в bigben.

Да я уже понял, что /bigben/ не нужно... Вопрос-то был - почему? А теперь мне кажется я понял: мы в HTML подключали файл CSS FONTS со шрифтами в котором мы уже указали /bigben/ и так как файл CSS является неотъемлемой частью документа HTML как стилей, то в CSS FONTS при указании пути к файлу TTF он уже по умолчанию находится в папке /bigben/... УФ... По моему не запутался))) ПРАВИЛЬНО?

28.09.2017, 21:36	#1
gryllus Пользователь Регистрация: 27.08.2017 Сообщений: 99	Ссылки и подключение шрифтов Добрый вечер! Ни когда раньше не приходилось подключать шрифты с "Google fonts" или каких либо других бесплатных ресурсов в интернете. Ну, сделать абсолютную ссылку не составило труда, скопировал ссылки для html и css и вставил их соответственно htm между тегами <head></head>, а css в классе котором нужен данный шрифт. Я конечно недавно в этом варюсь, но логически понял, что данные ссылки будут тормозить загрузку документа. Это даже видно не выкладывая в интернет, поэтому решил скачать шрифты и установить их не посредственно в папку сайта. Скачать не составило труда, но с установкой через @font-face(относительная ссылка css) пропарился довольно долго. Понял вот что, не надо до того как вы не убедились что шрифт действительно работает в документе устанавливать его на компьютер. Во многих браузерах показывает, что шрифт применился хотя это не так( меня Opera выручила, показала, что шрифт по ссылке не установился.) Далее непосредственно ссылки: Код: `<link rel="stylesheet" type="text/css" href="../bigben/style/fonts.css"/>` и вот другая из файла fonts.css(вывел ссылки в отдельный файл css): Код: `@font-face { font-family: Bad Script; src: url(../fonts/BadScript-Regular.ttf);` Кто нибудь может сказать почему путь к ссылкам разный, а находятся они в одной папке? И обратите внимание как называется шрифт Код: `.name{ border-radius:7px; text-align:center; text-shadow:1.5px 1.5px 2px white, 3px 3px 2px green, 4.5px 4.5px 2px white, 6px 6px 2px green; box-shadow:inset 0 0 60px 5px rgb(99, 146, 28), 0 0 20px 20px rgb(254, 254, 34); word-spacing:10px; font-family: 'Bad Script', cursive; font-size:550%; font-weight:600; color:#008000; flex:2.5 0 0; bottom:5%; }` и как файл BadScript-Regular.ttf... Почему так? *Особенно поразили конечно ссылки... Что, в css надо указывать на одну папку меньше?* С Наилучшими пожеланиями! [QUOTE]"Все Мысли О смерти нужны для жизни!" Л. Н. Толстой[/QUOTE]

28.09.2017, 22:28	#4
Alex11223 Старожил Регистрация: 12.01.2011 Сообщений: 19,500	Так а css файл где лежит? Ушел с форума, https://www.programmersforum.rocks, alex.pantec@gmail.com, https://github.com/AlexP11223 ЛС отключены Аларом.

28.09.2017, 22:51	#6
Alex11223 Старожил Регистрация: 12.01.2011 Сообщений: 19,500	А зачем тогда .. в html? Почему не просто "style/fonts.css"? Ушел с форума, https://www.programmersforum.rocks, alex.pantec@gmail.com, https://github.com/AlexP11223 ЛС отключены Аларом.

29.09.2017, 15:42	#9
Alex11223 Старожил Регистрация: 12.01.2011 Сообщений: 19,500	.. это перейти на уровень выше. Если вы уже в bigben, то .. это рабочий стол. Соответственно "../bigben/" не нужно если HTML и папка style лежат в bigben. Ушел с форума, https://www.programmersforum.rocks, alex.pantec@gmail.com, https://github.com/AlexP11223 ЛС отключены Аларом.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Подключение нестандартных шрифтов к сайту ?	alex_tomsk	HTML и CSS	3	02.08.2011 01:54
Кроссбраузерность шрифтов	4e4en	HTML и CSS	1	29.11.2010 14:25
Отображение шрифтов в ие.	SVed	WordPress и другие CMS	1	03.02.2010 13:11
Установка шрифтов	Ренат Садыков	Общие вопросы Delphi	1	07.11.2008 16:32