Как подключить семейство шрифтов css
Перейти к содержимому

Как подключить семейство шрифтов css

  • автор:

Системные шрифты, подключение шрифтов к сайту

Подключение шрифтов

Шрифты — это неотъемлемая и очень важная часть дизайна сайта, подчеркивающая его индивидуальность. В статье пойдет речь о подключении стандартных шрифтов к веб странице, их еще называют системными, а в следующей статье подробно рассмотрим выбор и подключение шрифтов от Google Fonts к сайту WordPress.

Системные, стандартные, безопасные шрифты

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

А безопасными шрифтами их называют, потому что с большой вероятностью они отобразятся в браузере у большенства посетителей сайта.

Но вся проблема заключается в том, что в разных операционных системах устанавливаются разные наборы шрифтов. Посмотреть наборы поставляемых шрифтов вместе с операционной системой можно на официальных страницах Windows, Mac OS. А в Unix/Linux вообще нет стандартного набора.

Для того, чтобы интернет страничка отображалась в соответствии с задумкой дизайнера, в CSS установили свойство шрифтов, которое называется font-family

Свойство шрифтов font-family

Свойство font-family — семейства шрифтов, сгруппированные по определенным признакам.

Родовые семейства:

  • serif — шрифты с засечками на концах;
  • sans-serif — шрифты без засечек;
  • cursive — шрифты курсивного начертания;
  • fantasy — декоративные шрифты;
  • monospace — моноширинный шрифт(с буквами одинаковой ширины).

Таким образом просто подбираются похожие шрифты из разных операционных систем и через запятую подключаются к интернет странице.

Вот как пример, просто для визуального восприятия. К этому примеру мы еще вернемся, когда будет рассматриваться непосредственно подключение шрифтов.

Просто проследите логику и все станет предельно ясно.

body

  • OC Windows — Arial;
  • OC Mac OS — Helvetica CY;
  • OC Unix/Linux — Nimbus Sans L;
  • Родовое семейство — sans-serif.

Так называемые безопасные шрифты

На основе OC Windows был составлен список из нескольких безопасных шрифтов.

  1. Arial
  2. Arial Black
  3. Comic Sans MS
  4. Courier New
  5. Georgia
  6. Impact
  7. Times New Roman
  8. Trebuchet MS
  9. Verdana

Все эти шрифты установлены на Mac OS X, Windows, и у многих пользователей Unix/Linux, у которых установлен пакет Core fonts for the Web.

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

Таблица соответствия и принадлежности шрифтов к определенному семейству:

Windows Mac OS Unix/Linux Родовое семейство
Arial Black Helvetica CY Nimbus Sans L Sans-serif
Arial Helvetica CY Nimbus Sans L Sans-serif
Comic Sans MS Monaco CY * (см. ниже) cursive
Courier New * (см. ниже) Nimbus Mono L Monospace
Georgia * (см. ниже) Century Schoolbook L Serif
Impact Charcoal CY * (см. ниже) Sans-serif
Times New Roman Times CY Nimbus Roman No9 L Serif
Trebuchet MS Helvetica CY * (см. ниже) Sans-serif
Verdana Geneva CY DejaVu Sans Sans-serif

* При подключении шрифтов, можете смело опираться на нее. Таблица поддерживает кириллические символы, русский алфавит.
Саму таблицу я взял в этой статье .

Подключение системных шрифтов к сайту

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

Подключение шрифтов в CSS файле

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

body < font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* подлючаем шрифт к всему документу */ font-size: 16px; /* дополнительно устанавливаем размер шрифта */ font-weight: 400; /* устанавливаем жирность шрифта, либо вместо 400, ставим значение — normal */ >

Назначаем шрифт для заголовков H1, H2, H3, H4, H5, H6, (здесь аналогично, только устанавливаем значение жирности, для выделения заголовков):

h1,h2,h3,h4,h5,h6< font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* подлючаем шрифт к заголовкам */ font-weight: 600; /* устанавливаем жирность шрифта, либо вместо 600, ставим значение — bold */ >

Присваиваем шрифт только параграфам:

Что-бы присвоить шрифт только к определенному параграфу, или блоку, нужно сначала в HTML документе назначить класс этому блоку

Здесь параграф с назначаемым шрифтом

А в таблице CSS прописать следующий код:

.font< font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* подлючаем шрифт к определенным параграфам, можно применять к отдельным спискам li, блокам div, формам form и другим элементам */ font-weight: normal; /* устанавливаем жирность шрифта, либо вместо 600, ставим значение — bold */ font-size: 16px; /* дополнительно устанавливаем размер шрифта параграфам */ >

Теперь, каждому тегу — элементу html с классом .font (называйте как вам угодно), будет присвоен шрифт Arial, с нормальной (400), жирностью и размером 16 пикселей.
Аналогично можно присвоить разные шрифты к спискам li , таблицам table , к целым блокам div , к отдельным словам, или словосочетаниям.

Подключение шрифтов в HTML документе

Непосредственно в HTML документ шрифты подключаются аналогично CSS файлу, разница лишь в синтаксисе. Можно подключит шрифты в заголовке документа — между тегами (аналогично CSS файлу) , либо inline — присвоение свойств напрямую к html тегам.

Подключаем шрифты в заголовке, между тегами . Для этого в html документ добавьте такой код:

    

Здесь я повторяться не буду. Все аналогично подключению в CSS файле.

Подключение шрифтов inline, непосредственно к элементам сайта. Приведу несколько примеров:

Подключаем шрифт к параграфу

Здесь параграф с текстом

Выделяем жирным шрифтом отдельное слово и присваиваем отдельный от основного шрифт

Здесь параграф с текстом, а это слово, которое нужно выделить жирным

Выделяем жирным шрифтом ссылку и присваиваем отдельный от основного шрифт

Аналогично назначаем шрифты любому html тегу.

Но все же лучше всего и рекомендовано присваивать стили элементам через файл CSS. Во-первых, в CSS нужно прописать стили один лишь раз и потом назначать в HTML лишь нужный класс. Во-вторых, прописывая стили inline создаются дубли контента. Эти свойства и классы, вроде как, индексируются поисковиками и слышал, что в W3C хотят вообще отменить inline. Хотя иногда так прописывать стили проще.

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

Лучший способ отблагодарить автора

Похожие по Тегам статьи

В данной статье идет речь о создании video background — фоновой видео заставки HTML 5 веб страницы

Публикую несколько примеров оформления текста в HTML. Выноски Callout нужны для заострения внимания читателя…

Мне не раз приходилось наблюдать такую картину, что в некоторых шаблонах WordPress не задан…

Разделы сайта
  • HTML СSS в примерах
  • Безопасность WordPress
  • Внешний вид и Функционал WP
  • Выбираем домен и хостинг
  • Оптимизация и продвижение
  • Перенос сайта из HTML в WordPress
  • Плагины WordPress
  • Сборник интересных скриптов
  • Сервисы и программы
  • Шаблоны WordPress
  • Юзаем Bootstrap

Как подключить семейство шрифтов, которые все в разных файлах?

У меня есть шрифт ttf, который разделен на отдельные файлы. Жирный шрифт в отдельном файле, курсив в отдельном и так далее. Пробовал подключать все файлы и у каждого шрифта задавать парамтеры. Но когда у элемента указываешь font-family: ‘Мойшрифт’, sans-serif; font-weight: 400 то грузится почему-то тот который указан последним в

@font-face < font-family: 'Мойшрифт'; src: url('fonts/Мойшрифт-Regular.ttf'); font-style: normal; font-weight: 400; >@font-face < font-family: 'Мойшрифт'; src: url('fonts/Мойшрифт-Bold.ttf'); font-style: normal; font-weight: 800; >

Так должно работать(грузится тот файл который указан последним, не зависимо от параметров которые указаны у шрифта) или я не правильно понял как подключать семейство шрифтов?

Отслеживать
123k 24 24 золотых знака 127 127 серебряных знаков 305 305 бронзовых знаков
задан 6 сен 2016 в 11:06
434 4 4 серебряных знака 19 19 бронзовых знаков

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Нет, всё должно работать. У гугла же работает:

  

Just a bit of text.

Just a bit of text.

Just a bit of text.

Или в развёрнутом варианте с содержимым файла:

/* latin-ext */ @font-face < font-family: 'Lato'; font-style: normal; font-weight: 100; src: local('Lato Hairline'), local('Lato-Hairline'), url(https://fonts.gstatic.com/s/lato/v11/eFRpvGLEW31oiexbYNx7Y_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; >/* latin */ @font-face < font-family: 'Lato'; font-style: normal; font-weight: 100; src: local('Lato Hairline'), local('Lato-Hairline'), url(https://fonts.gstatic.com/s/lato/v11/GtRkRNTnri0g82CjKnEB0Q.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; >/* latin-ext */ @font-face < font-family: 'Lato'; font-style: normal; font-weight: 400; src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v11/UyBMtLsHKBKXelqf4x7VRQ.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; >/* latin */ @font-face < font-family: 'Lato'; font-style: normal; font-weight: 400; src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v11/1YwB1sO8YE1Lyjf12WNiUA.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; >/* latin-ext */ @font-face < font-family: 'Lato'; font-style: normal; font-weight: 900; src: local('Lato Black'), local('Lato-Black'), url(https://fonts.gstatic.com/s/lato/v11/R4a6fty3waPci7C44H8AjvY6323mHUZFJMgTvxaG2iE.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; >/* latin */ @font-face < font-family: 'Lato'; font-style: normal; font-weight: 900; src: local('Lato Black'), local('Lato-Black'), url(https://fonts.gstatic.com/s/lato/v11/tI4j516nok_GrVf4dhunkg.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; >

 

Just a bit of text.

Just a bit of text.

Just a bit of text.

Как подключить целое семейство шрифтов?

или как правильно, чтоб браузер подбирал шрифт относительно font-weight
При использовании vue cli, могу ли я поставить етот шрифт в папку assets/fonts/OpenSans
и вместе с файлами шрифта поставить туда scss (в котором будет только font-face) а потом просто импортировать его чтоб не писать подключение на каждой странице, будет ли етот файл виден пользователю?

  • Вопрос задан более двух лет назад
  • 75 просмотров

118. Семейство шрифтов в CSS

Из урока узнаете, какие бывают семейства шрифтов в CSS и как с ними работать. Теперь посмотрим, какие семейства шрифтов есть в CSS.

  • Шрифт с засечками (serif) – это шрифты, буквы которых имеют разную ширину (а и ш имеют разную ширину) и у этих букв есть засечки.
  • Рубленые шрифты (sans-serif) – пропорциональные (буквы имеют разную ширину) без засечек шрифты.
  • Моноширинные шрифты (monospace) – непропорциональные, то есть все буквы одинаковой ширины. Чаще всего такой шрифт используют для кода. Код становится читать намного проще, если он написан моноширинным шрифтом.
  • Рукописные (cursive) – шрифты, которые имитируют человеческий почерк. Например, буквы более круглые, имеют какие-то дополнительные штрихи и т.д.

Рассмотрим пример первый, где мы указываем для абзаца моноширинный шрифт. Браузер сам выберет моноширинный шрифт, который есть у пользователя. То есть мы указываем только то, что нам нужен моноширинный шрифт и все.

Пример 1, HTML

Моноширинный абзац

Пример 1, CSS

p font-family: monospace;
>

Задание конкретного семейства шрифтов

Теперь мы будем задавать конкретное семейство шрифтов, например, Arial или Tahoma. Смотрим пример второй.

Пример 2, CSS

p font-family: Tahoma;
>

Теперь абзац написан шрифтом Tahoma, но не стоит забывать, что пользователю должен быть доступен шрифт Tahoma. Tahoma является стандартным шрифтом, поэтому, он есть у многих.

Обратите внимание, что мы используем все тоже свойство – font-family . font-family универсальный, например, можем мы писать как в третьем примере.

Пример 3, CSS

p font-family: Tahoma, serif;
>

То есть если браузер не найдет шрифт Tahoma на компьютере, то будет использован какой-то шрифт с засечками. Далее смотрим на четвертый пример.

Пример 4, CSS

p font-family: Tahoma, Arial, 'PT Mono';
>

В четвертом примере показано, что если не будет найден шрифт Tahoma, то будет использован шрифт Arial, но если не будет найден и шрифт Arial, то будет использован шрифт PT Mono. Обычно указывают похожие шрифты. Обратите внимание, что последний шрифт я взял в кавычки, это потому что в имени данного шрифта есть пробел. Любой шрифт, в имени которого есть какой-то отличный от букв и цифр знак, должен быть взят в кавычки.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *