CSS-свойство font-family. Выбор и подключение веб-шрифтов
Опубликованно 07.10.2018 09:30
Содержание текста является важной частью сайта. Посетители должны любопытные публикации, статьи интересные или новые рецепты пирогов. Слова из того, что можно читать. Но текст должен быть в состоянии хорошо оформить. Никто не хочет читать ваши статьи, если источник отвратительно собран, и буквы слишком мелкие. Выбор марки
Быстрый способ увеличить привлекательность контента-это выбрать красивый шрифт, стиль или CSS-свойство font-family:
h1{ font-family: Verdana; }
Сначала указывается селектор, для которого применяется это свойство. В этом примере-это заголовок первого уровня <h1>. После font-family и двоеточия введите имя шрифта, который вы хотите использовать на сайте. Но посетители вашей страницы будут видеть этот блок только в случае, если появляется у них на компьютере или телефоне.
Существует группа источников, которые находятся на устройствах каждого пользователя. Например, Arial, Helvetica, конечно, Times New Roman. Дизайнеры делятся на четыре типа. Четыре семейства шрифтов
Первое, так что не, или шрифт с засечками. Идеально подходит для длинных статей. Мелкие детали, на концах "объединиться" буквы и делают текст приятным для глаз и легко читается. К этой группе относятся: Times, Garamond, Baskerville, Грузии.
Если вы не знаете, какое сочетание выбрать, попробуйте следующий набор CSS font-family:
font-family: Baskerville, Palatino Linotype, Times, serif;
Следующая большая группа шрифтов без засечек, или рубленые шрифты. В них нет верхушки, они, кажется, не так витиевато, как так что я, но четко и понятно. Всегда используйте для заголовков. Наиболее популярными являются представителями CSS font-family: Arial, Tahoma, Helvetica и Verdana.
Не так часто, как два предыдущих вида, используют табличный и декоративные шрифты. У Монро не стиль такой же ширины символов, и они похожи на буквы печатных механических машинок. Нужны для отображения специального кода, например, CSS. В font-family такие источники носят Courier, Copperplate Light, Copperplate Gothic Light.
Декор источников, будьте осторожнее. Избыточное количество декоративный текст из веб-странице дома на шкафу. Но если эта рыба, внешний вид должен соответствовать контексту. Название CSS font-family Comic Sans MS, будет нелепо выглядеть на сайте о циркулярных пилах.
Веб-шрифты
Интернет был бы очень скучным местом, если бы каждый заголовок был набран в Arial, каждая статья в Times New Roman. Радость дизайнеры, современные браузеры поддерживают веб-источников. Отличаются от направлений (установленный на компьютере) формат. Для настольных приложений, таких как "Photoshop", "word", "Иллюстратор", используются файлы с расширением .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+Sans" rel="stylesheet">
И отдельных записей, отобранных коллекций:
font-family: 'Open Sans', sans-serif; font-family: 'Замечательный', sans-serif;
Ссылку вставьте в HTML-разметку в раздел <head>:
<!doctype html> <html> <head> <title>Signification</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="sign.css"> <link href="https://fonts.googleapis.com/css?family=Notable/Open+Sans" 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 года
Категория: Мобильная техника
