Шрифты на сайте. (Тема 4)

Сентябрь 7, 2022

Главная
Алгебра
Шрифты на сайте. (Тема 4)

Содержание

2. План Использование сторонних шрифтов на сайте. Способ подключения. Способ использования. Семейства шрифтов, и как с ними
3. Использование сторонних шрифтов на сайте Все браузеры изначально поддерживают ряд шрифтов, таких как: Arial; Times New
4. Использование сторонних шрифтов на сайте На сегодняшний день, мы используем сторонние шрифты, которые подключаем к документу,
5. Способ подключения Для подключения шрифта использую специальную конструкцию, благодаря которой в дальнейшем мы можем работать со
6. Способ использования Красным цветов подмечено название шрифта, которое в дальнейшем будет использовано для подключения к элементам
7. Способ использования Задание 1 Откройте папку с заданием 1; Подключите шрифт к своему домашнему заданию; Подключите
8. Семейства шрифтов, и как с ними работать С периодом времени разработчикам шрифтов стало ясно, что необходимо
9. Конвертация шрифтов для максимальной точности их отображения Что бы использованные шрифты корректно отображались во всех браузерах,
10. Конвертация шрифтов для максимальной точности их отображения Результатом конвертации будет Список шрифтов различных типов, Файл CSS
11. Семейства шрифтов и конвертация Задание 2 Откройте папку с заданием 2; Сконвертируйте при помощи transfonter шрифты
13. Скачать презентацию

Слайд 2

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

и как с ними работать.
Конвертация шрифтов для максимальной точности их отображения.

Слайд 3

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

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

Слайд 4

Использование сторонних шрифтов на сайте
На сегодняшний день, мы используем сторонние шрифты,

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

Слайд 5

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

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

Слайд 6

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

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

Шрифты на сайте. (Тема 4)

Содержание

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

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

Использование сторонних шрифтов на сайтеНа сегодняшний день, мы используем сторонние шрифты,

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

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

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

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

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

Конвертация шрифтов для максимальной точности их отображенияРезультатом конвертации будет Список шрифтов

Семейства шрифтов и конвертация Задание 2Откройте папку с заданием 2;Сконвертируйте при

Похожие презентации