Шрифты на сайте. (Тема 4) - презентация, доклад, проект скачать

Нажмите для полного просмотра!

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему Шрифты на сайте. (Тема 4). Доклад-сообщение содержит 12 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1

Описание слайда:

Шрифты на сайте

Слайд 2

Описание слайда:

План Использование сторонних шрифтов на сайте. Способ подключения. Способ использования. Семейства шрифтов, и как с ними работать. Конвертация шрифтов для максимальной точности их отображения.

Слайд 3

Описание слайда:

Использование сторонних шрифтов на сайте Все браузеры изначально поддерживают ряд шрифтов, таких как: Arial; Times New Roman; Calibri; Т.д. Но т.к. все браузеры индивидуальны, то каждый из них имеет дополнительные шрифты, которые хорошо поддерживает, но такие шрифты зачастую не актуальны. Для реализации необходимого дизайна, придумали способ использования индивидуальных шрифтов.

Слайд 4

Описание слайда:

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

Слайд 5

Описание слайда:

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

Слайд 6

Описание слайда:

Способ использования Красным цветов подмечено название шрифта, которое в дальнейшем будет использовано для подключения к элементам HTML. P{ font-family: ‘ACLineRegular’; } Синим и зелёным подкрашены условия использования данного шрифта: В текущем случае – если у элемента font-style и font-weight присвоено normal (т.е. стили элемента являются исходными, но это не касается тэга <b> - font-weight: bold ,<i> - font-style: italic ).

Слайд 7

Описание слайда:

Способ использования Задание 1 Откройте папку с заданием 1; Подключите шрифт к своему домашнему заданию; Подключите данный шрифт к ссылке. Ваша ссылка должна стать вида: Жирный шрифт.

Слайд 8

Описание слайда:

Семейства шрифтов, и как с ними работать С периодом времени разработчикам шрифтов стало ясно, что необходимо так же рисовать и жирный шрифт и наклонные. Данное решение легко объяснить – преобразование шрифтов в жирный, наклонные, тонкий, … происходит путём обработки браузером исходного шрифта, в результате чего получается не корректный или «ломаный» шрифт. Поэтому проще использовать заранее нарисованный шрифт для различных случаев.

Слайд 9

Описание слайда:

Конвертация шрифтов для максимальной точности их отображения Что бы использованные шрифты корректно отображались во всех браузерах, то их необходимо конвертировать в наборы шрифтов разного формата для разных браузеров. Что бы видели на слайде ранее (Слайд 5, жёлтый цвет). Один из таких online сервисов – это transfonter. Один из необходимых параметров для максимально точного отображения – это конвертация в формат SVG.

Слайд 10

Описание слайда:

Конвертация шрифтов для максимальной точности их отображения Результатом конвертации будет Список шрифтов различных типов, Файл CSS для подключения шрифтов, и demo.html файл для просмотра отображения шрифтов.

Слайд 11

Описание слайда:

Семейства шрифтов и конвертация Задание 2 Откройте папку с заданием 2; Сконвертируйте при помощи transfonter шрифты bold, thin, italic, regular; Подключите данные шрифты в домашнее задание; Создайте отдельные классы для преобразования текста в определённый шрифт (.bold { font-weight: bold; }); Присвойте для различных текстов различные классы. В результате шрифты должны видоизменить тексты в ваших страницах.

Слайд 12

Описание слайда:

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