CSS-свойство font-family. Выбор и подключение веб-шрифтов
Опубликованно 24.09.2018 17:20
Содержание текста является важной частью сайта. Посетители должны курьезные издания, интересные статьи или новости, рецепты, торты. Одним словом, то, что они могут читать. Но текст должен быть в состоянии оформить правильно. Никто не хочет читать вашу статью, если шрифт отвратительно выбрали, и буквы слишком маленькие. Выбор шрифта
Быстрый способ повысить привлекательность контента-это выбрать красивый шрифт, или CSS-свойство font-family:
h1{ font-family: Verdana; }
Во-первых, вы укажите селектора, для которой применяется свойство. В этом примере это заголовок первого уровня <h1>. После font-family кишки и напишите название шрифта, который вы хотите использовать на вашем сайте. Но посетители страницы будут видеть этот шрифт, что в случае, если он предварительно установлена на их компьютере, или телефоне.
Есть группы шрифтов, которые доступны на устройствах каждого пользователя. Например, Arial, Helvetica, конечно, Times New Roman. Дизайнеры разделяют на четыре типа. Четыре семейства шрифтов
Первый-это антенна, или шрифт с засечками. Идеально подходит для длинных статей. Маленькие штрихи на концах «связывают» буквы и делают текст приятным для глаз и легко читается. Эта группа включает в себя: Times, Garamond, Баскервиль, Грузии.
Если вы не знаете, какое сочетание выбрать, то попробуйте в следующей серии таблиц стилей CSS font-family:
font-family: Баскервиль, Palatino Linotype, Times, serif;
Следующая большая группа шрифтов без засечек, или рубленые) и шрифты. Они не имеют характера, они не выглядят так богато, что антона, но ясно и понятно. Всегда используйте для заголовков. Самых популярных представителей CSS font-family: Arial, Tahoma, Arial и Verdana.
Не так часто, как два предыдущих типа используют моноширинные шрифты и декоративные. Фиксированной ширины шрифта ширина символов, и они похожи на буквы печатных механических машин. Нужно для отображения кода, например, CSS. В font-family шрифтов включают Courier, Copperplate Light, Copperplate Gothic Light.
Шрифты внимание. Чрезмерное количество оформление текста с веб-страницы, справедливой торговли, без воды. Но если невтерпеж, внешний вид должен соответствовать контексту. Заголовок с CSS font-family: Comic Sans MS было бы смешно посмотреть на сайте пилы.
Веб-шрифты
Интернет был бы очень скучным местом, если бы каждый заголовок был набран в Arial, и каждая статья в Times New Roman. Радость дизайнерам современные браузеры поддерживают веб-шрифтов. Различные настольные (устанавливаются на компьютер в формате. Для настольных приложений, таких как “Photoshop”, “Word”, “Illustrator”, использует файлы с расширением .otf .ttf или .ps1. Интернет нужен форматов TrueType, WOFF, EOT и SVG.
Таким образом, веб-типографика разработан для дизайнеров и отсканированные письма в нужный формат, которые подключаются с помощью внешних ссылок на источник, или правила CSS font-face:
@font-face{ font-family: 'Roboto'; src: url('../fonts/roboto_family/Roboto/Roboto-Italic.woff'); font-style: italic; font-weight: normal; }
В всемирной паутине множество ресурсов, все виды платной и бесплатной типографики. Самый простой, свободный и иногда, лучшее решение-это использовать Google Fonts. Перейдите на сайт, fonts.google.com и выбирайте то, что вам нравится. Рядом с именем красную кнопку "+", нажмите на нее, и выбранного шрифта. Не можете ограничить себя и добавить сразу пять или десять семей.
В нижней части экрана находится всплывающее окно черного цвета с надписью family selected. Включите его, и вы получите ссылки как:
<link href="https://fonts.googleapis.com/css?family=Notable/Open+Без" rel="stylesheet">
И отдельных записей, выбранных семей:
font-family: 'Open Sans', sans-serif; font-family: 'Знатный', sans-serif;
Ссылку вставить HTML-код в разделе <head>:
<!doctype html> <html> <head> <title>Значение</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="sign".css"> <link href="https://fonts.googleapis.com/css?family=Notable/Open+Без" rel="stylesheet"> </head> <body> </body> </html>
Затем, используйте шрифты в CSS. Font-family отобраны в Google Font, назначаются выбора элементов с текстом. Например, у вас есть несколько абзацев текста и заголовок:
p{ font-family: 'Open Sans', sans-serif; } h1{ font-family: 'Знатный', sans-serif; } Правило @font-face
Если вы не хотите, чтобы производительность вашего сайта зависит от внешних ресурсов, подключите оформление через @font-face. Во-первых, скачать файлы на локальной машине. Поместите их в рабочий каталог сайта, лучше в папку fonts. Откройте CSS и изменить правила @font-face. В font-family имя шрифта в src путь к файлам.
@font-face { font-family: 'League Gothic'; src: url('fonts/League_Gothic-webfont.eot'); src: url('fonts/League_Gothic-webfont.eot?#iefix') format('embeddedopentype'), url('fonts/League_Gothic-webfont.woff2') format('woff2'), url('fonts/League_Gothic-webfont.woff') format('woff'), url('fonts/League_Gothic-webfont.ttf') format('truetype'), url('fonts/League_Gothic-webfont.svg') format('svg'); }
Теперь введите подключенные шрифты ваш текст. Когда вы скачать шрифты, проверьте, чтобы разрешить кириллицу. Автор: Уверен, Что Ася 22 Сентября 2018 Года
Категория: Гаджеты
