Шрифт-семьи CSS свойство. Выбор и подключение веб-шрифтов
Опубликованно 12.10.2018 00:42
Текстовый контент является важной частью сайта. Посетители нужны любопытные публикации, интересные статьи и новые рецепты пирогов. Одним словом, что они могут прочитать. Но текст нужно уметь правильно сделать. Никто не хочет читать ваши статьи, если выбранный шрифт отвратителен, и буквы слишком мелкие. Выбор шрифта
Быстрый способ повысить привлекательность контента выбрать красивый шрифт, или CSS свойство font-семьи:
Н1{ семейство шрифтов: шрифты Verdana; }
Во-первых, можно указать селектор, для которой применяется свойство. В данном примере первый заголовок <Н1>. После купел-семья, и двоеточия напишите название шрифта, который вы хотите использовать на вашем сайте. Но посетители этой страницы увидите шрифт только в том случае, если он установил их на компьютер или телефон.
Есть группы шрифтов, которые доступны на устройствах каждого пользователя. Например, Arial, Helvetica, и раз конечно, новый роман. Дизайнеры делятся на четыре вида. Четыре семейства шрифтов
Первый-это сурьма, или шрифт с засечками. Отлично подходит для длинных статей. Маленькие штрихи на концах ссылке "" письма и сделать текст приятным для глаз и легко читается. В эту группу входят: время, Гарамонд, Баскервиль, Грузия.
Если вы не знаете, какое сочетание выбрать, попробовать следующий набор CSS для купел-семья:
шрифт-семьи: Баскервиль, Палатино линотип, раз, засечек;
Следующий крупный шрифт группы – без засечек или заблокировать шрифты. Они не тикают, они выглядят не столь четкими, как antikvarnyi, но ясно и понятно. Всегда используйте их для заголовков. Наиболее популярные представители семейства шрифтов в CSS Ариал, Тахома, шрифт Helvetica и Verdana.
Не так часто, как два предыдущих типа, использовать моноширинный шрифт и декоративные шрифты. Моноширинный шрифта имеют одинаковую ширину символов, и они похожи на печатные буквы механических пишущих машинок. Нужно показать специальный код, такие как CSS. Шрифт-семейство таких шрифтов включают Курьер, медная лампа, медная готический свет.
С декоративные шрифты, будьте осторожны. Чрезмерное количество декоративных текста на веб-странице ярмарочные зазывалы. Но если невтерпеж, то внешний вид должен соответствовать контексту. Заголовок семейства шрифтов в CSS комикс Санс МС будет нелепо выглядеть на сайте о циркулярных пил.
Веб-шрифты
Интернет был бы очень скучным местом, если бы каждый заголовок был набран шрифтом Arial, но каждая статья в Таймс Нью Роман. К радости дизайнеров, современные браузеры поддерживают веб-шрифты. Отличается от рабочего стола (установленная на компьютере) формат. Для настольных приложений, таких как “фотошоп”, “палата”, “иллюстратор” использует файлы с расширением .ОТФ .или ТТФ .пс1. Для нужен интернет форматы TrueType шрифты, WOFF и EOT и SVG-графики.
Поэтому веб-типографика разработан дизайнерами оцифрованных буквы нужного размера, которые соединены через внешние ссылки на источник, или CSS шрифта:
шрифт-лицо @{ семейство шрифтов: 'робото'; ГНЦ: адрес URL('../шрифты/roboto_family/робото/робото-Курсив.вуф'); стиль шрифта: курсив; шрифт-вес: нормальный; }
Всемирная паутина изобилует ресурсами из различных платных и бесплатных типографии. Самый простой, бесплатный и иногда лучше всего будет использовать шрифты Google. Перейти на сайт fonts.google.com и выбрать, что вам нравится. Рядом с именем есть кнопка в красной "+", нажмите на нее и выбранного шрифта. Можете не ограничивать себя и добавить пять или десять семей.
В нижней части экрана находится всплывающее окно черного цвета с выбранной надписью семья. Активируйте его и вы увидите ссылку типа:
<ссылки с href="https://fonts.googleapis.com/css?family=Notable/Open+Санса" отн="стилей">
И отдельная запись выбранных семей:
семейство шрифтов: 'открыть Sans', Санс-Сериф; шрифт-семья: "заметных", без засечек;
Ссылка для вставки HTML-разметки в раздел <head>:
<!элемент DOCTYPE HTML> и <HTML> и тег <head> <название>значение</название> <мета кодировка="UTF-8" не> <ссылка отн="стилей" тип="текст/CSS в" с href="знак.в CSS"> <ссылки с href="https://fonts.googleapis.com/css?family=Notable/Open+Санса" отн="стилей"> тегом </head> в <тело> </тело> тегом </HTML>
Затем использовать шрифты в CSS. Семейство шрифтов, выбранных в шрифт Google, назначаются выбора элементов. Например, у вас есть несколько абзацев текста и заголовка:
п{ семейство шрифтов: 'открыть Sans', Санс-Сериф; } Н1{ шрифт-семья: "заметных", без засечек; } Шрифт-лицо @правила
Если вы не хотите, чтобы доступность вашего сайта зависит от внешних ресурсов, подключение через типографика шрифт-лицо@. Сначала скачать файл на локальный компьютер. Поместите их в рабочий каталог сайта, то лучше отдельной папке "шрифты". Открыть CSS и тип шрифта-лицо @правило. В семейство шрифтов указать шрифт по пути src для файлов.
шрифт-лицо @{ семейство шрифтов: 'Лига Готика'; в src: Url-адрес (шрифты/League_Gothic-webfont.СРВ'); в src: Url-адрес (шрифты/League_Gothic-webfont.СРВ?#формат iefix') ('embeddedopentype'), URL-адрес (шрифты/League_Gothic-webfont.формат woff2') ('woff2'), URL-адрес (шрифты/League_Gothic-webfont.формате WOFF') ('кино'), URL-адрес (шрифты/League_Gothic-webfont.формат TTF') ('скрыли'), URL-адрес (шрифты/League_Gothic-webfont.формат SVG') ('СВГ'); }
Теперь назначить подключенных шрифтов для вашего текста. Когда вы скачать шрифты, убедитесь, что они поддерживают кириллицу. Автор: Cherchenko Ася 22 сентября, 2018
Категория: обо всём
