Разница между Serif и Sans-serif шрифтами
CSS Семейство Шрифтов
В CSS, существует два типа имен семейства шрифтов:
- Стандартные семейства — группа семейств шрифтов с похожим видом ("Serif" или "Monospace")
- Семейство шрифтов — конкретный шрифт ( "Times New Roman" или "Arial")
| Стандартные семейства | Семейство шрифтов | Описание |
|---|---|---|
| Serif | Times New Roman Georgia |
Шрифты с засечками имеют небольшие линии на концах некоторых букв |
| Sans-serif | Arial Verdana |
"Sans" без засечек — шрифты не имеют засечки на концах букв |
| Monospace | Courier New Lucida Console |
Моноширинный шрифт все буквы имеют одинаковую ширину |
Семейство Шрифтов
Семейство шрифта текста определяется свойством font-family.
Свойство font-family следует установить несколько названий шрифтов в качестве "запасного варианта" для системы. Если браузер не поддерживает первый шрифт, он пробует следующий шрифт и так далее.
Начнем с шрифтов, которые Вы хотите установить, стандартные семейства, чтобы разрешить браузеру подобрать похожий шрифт в стандартные семейства, если нет доступных других шрифтов.
Примечание: Если название семейства шрифта более одного слова, оно должно быть в кавычках: "Times New Roman".
Более одного семейства шрифтов указывать через запятую:
Для часто используемых сочетаний шрифта, посмотрите на наши Безопасные Комбинации Веб Шрифтов.
Стиль Шрифта
Свойство font-style в основном используется для установки курсивного текста.
Свойство имеет три значения:
- normal — Текст отображается нормально
- italic — Текст отображается курсивом
- oblique — Текст отображается "наклонным" (наклонным очень похож на курсив, но менее поддерживается браузерами)
Размер Шрифта
Свойство font-size
устанавливает размер текста.
Имея возможность управлять размером текста важно в веб-дизайне. Однако, Вы не должны использовать регулировку размера шрифта, чтобы параграфы выглядели как заголовки, а заголовки были похожи на параграфы.
Всегда используйте правильные теги HTML, <h1> — <h6> для заголовка и <p> для параграфа.
Значение свойства font-size может быть размер абсолютный или относительный
Абсолютный размер:
- Задает указанный размер текста
- Не позволяет пользователю менять размер шрифта во всех браузерах (плохо по соображениям доступности)
- Абсолютные величины полезны, когда известен результат физического размера
Относительный размер:
- Задает размер относительно окружающих элементов
- Позволяет пользователю менять размер шрифта в браузерах
Размер Шрифта в Пикселях
Настройка размера текста с пикселями дает Вам полный контроль над размером текста:
Совет: Если Вы используете пиксели, тогда можете использовать инструмент масштабирования, чтобы изменить размер всей страницы.
Размер Шрифта в em
Чтобы разрешить пользователям изменять размер текста (в меню браузера), многие разработчики использовать em вместо пикселей.
Размер в em рекомендуется консорциумом W3C.
1em равен текущему размеру шрифта. Размер текста по умолчанию в браузерах 16px. Значит, размер по умолчанию 1em составляет 16 пикселов.
Размер может быть вычислен из пикселей в em, используя эту формулу: пиксел / 16 = em
В приведенном выше примере размер текста в em такое же, как и в предыдущем примере в пикселях. Однако, размер текста можно регулировать во всех браузерах.
К сожалению, есть еще проблема с более старыми версиями IE. Текст становится не предсказуемым, больше или меньше, чем надо.
Используйте сочетание процентов и em
Решение, которое работает во всех браузерах, установить размер шрифта по умолчанию в процентах для елемента <body>:
Наш код теперь работает отлично! Показывает тот же самый размер текста во всех браузерах и все браузера позволяют увеличить или изменить размер текста!
Полнота Шрифта
Свойство font-weight задает полноту шрифта:
Вариант Шрифта
Свойство font-variant указывает, должен ли текст отображаться в малом прописном шрифте.
Значение small-caps шрифта, устанавливает все строчные буквы в большом прописном шрифте. Тем не менее, заглавные буквы будут выглядеть на размер больше, тем оригинальней будут выглядеть заглавные буквы в тексте.
Еще Примеры
Все свойства шрифта в одном объявлении
В этом примере показано, как использовать свойство сокращения для установки всех свойств шрифта в одном объявлении.
Проверьте себя с помощью упражнений!
Упражнение 1 » Упражнение 2 » Упражнение 3 » Упражнение 4 » Упражнение 5 »
Все свойства шрифтов CSS
| Свойство | Описание |
|---|---|
| font | Устанавливает все свойства шрифта в одном объявлении |
| font-family | Задает шрифт для текста |
| font-size | Задает размер шрифта текста |
| font-style | Задает стиль шрифта для текста |
| font-variant | Указывает, должен ли текст должен отображаться в малым прописным шрифтом |
| font-weight | Задает полноту шрифта |
schoolsw3.com
Безопасные шрифты на примере CSS
При создании сайтов, одним из основных элементов является используемый шрифт. Частенько вебмастера любят применять на сайте экзотические шрифты. Это конечно может смотреться круто, но нужно, чтобы данные шрифты были также установлены и у посетителя сайта, обычно на компьютерах у всех имеются лишь стандартные шрифты.
Поэтому, в данной статье мы рассмотрим основные шрифты, которые имеются практически на каждом компьютере. Также приведём примеры, как нужно размещать имена шрифтов, чтобы текст показался в любом случае, даже если данный шрифт отсутствует на компьютере пользователя.
Шрифты в языке CSS, назначаются элементам с помощью свойства font-family
.
Список безопасных шрифтов (21 штука) и их примеры:
font-family: Arial, Helvetica, sans-serif; font-family: 'Arial Black', Gadget, sans-serif; font-family: 'Bookman Old Style', serif; font-family: 'Comic Sans MS', cursive; font-family: Courier, monospace; font-family: 'Courier New', Courier, monospace; font-family: Garamond, serif; font-family: Georgia, serif; font-family: Impact, Charcoal, sans-serif; font-family: 'Lucida Console', Monaco, monospace; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-family: 'MS Sans Serif', Geneva, sans-serif; font-family: 'MS Serif', 'New York', sans-serif; font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; font-family: Symbol, sans-serif; font-family: Tahoma, Geneva, sans-serif; font-family: 'Times New Roman', Times, serif; font-family: 'Trebuchet MS', Helvetica, sans-serif; font-family: Verdana, Geneva, sans-serif; font-family: Webdings, sans-serif; font-family: Wingdings, 'Zapf Dingbats', sans-serif;
Обратите внимание, что сначала идёт распространённый шрифт (например Arial), если его на компьютере посетителя нет, то идёт более распространённый и похожий на него (например Helvetica), и в конце если оба эти шрифта отсутствуют, подключается serif, sans-serif, monospace
или
cursive (данные способы начертания шрифта есть всегда).
gabdrahimov.ru
Абсолютный способ
Этот способ по сравнению со следующим удобнее, но его использование может привести к несоответствию при отображении одной и той же страницы в различных браузерах.
Данный способ позволяет задавать размер шрифта в абсолютных единицах таких как: пиксели (px) или проценты (%).
Относительный способ
Данный способ помогает избежать проблем с несоответствием при отображении страницы в разных браузерах, так как все размеры устанавливаются относительно.
Для задания размера шрифта данным способом используются единицы em. 1em эквивалентен размеру шрифта в браузере по умолчанию и равен 16px.
Обратите внимание: W3C рекомендует для задания шрифта использовать именно этот способ.
Обратите внимание: не используйте свойство font-size для того, чтобы оформлять абзацы как заголовки. Всегда используйте для определения абзацев тэги p, а для заголовков h1-h6.
Свойство font-style позволяет сделать шрифт HTML элемента курсивным.
Свойство font-weight позволяет изменять толщину шрифта.
www.wisdomweb.ru
Безопасные веб-шрифты
В CSS стиле для выбора типа шрифта применяется свойство font-family, в котором указывается интересующий Вас шрифт. Предположим, что вы хотите применить для абзацев страницы шрифт Courier. В этом случае Вам необходимо будет создать, например, селектор типа и воспользоваться свойством font-family:
p { font-family : Courier; /* устанавливаем тип шрифта – Courier */ }
Главная особенность данного способа заключается в том, что он будет работать, при условии, что у посетителя установлен подобный шрифт, иначе, страница будет отображена с использованием шрифта «встроенного» в браузер.
Так как вы заранее не знаете, есть у пользователя тот, или иной шрифт, то рекомендуется указывать не только основной шрифт, но и пару запасных (альтернативных) шрифтов, для того случая если у пользователя отсутствует основной шрифт.
Рекомендуется последним в списке шрифтов указывать и семейство шрифта (generic-family). Если у пользователя по каким-то причинам отсутствуют все перечисленные Вами шрифты, то в этом случае страница будет отображена хотя бы шрифтом того же семейства, а не шрифтом «встроенным» в браузер.
Давайте рассмотрим следующий пример:
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>Свойство font-family</title> <style> .times { font-family: "Times New Roman", serif; /* определяем основной шрифт "Times New Roman", альтернативный serif (с засечками)*/ } .courier { font-family: Courier, monospace; /* определяем основной шрифт "Courier", альтернативный monospace (семейство моноширинных шрифтов) */ } </style> </head> <body> <p class = "times">Параграф, отображаемый шрифтом "Times New Roman".</p> <p class = "courier">Параграф, отображаемый шрифтом "Courier".</p> </body> </html>
В данном примере для первого абзаца браузер проверит, есть ли в наличии у пользователя основной шрифт, если нет, то установит шрифт из семейства serif (с засечками). Для второго абзаца был задействован моноширинный шрифт Courier, а как альтернатива семейство моноширинных шрифтов (буквы имеют одинаковую ширину).
Шрифты, которые содержат в названии более одного слова, либо цифры, необходимо обязательно помещать в кавычки.
Результат нашего примера:
Ниже я перечислю некоторые часто используемые комбинации безопасных веб-шрифтов, которые с большой вероятностью присутствуют на любом компьютере:
Типы веб-шрифтов и их поддержка браузерами
Все современные браузеры поддерживают использование определённых веб-шрифтов. Происходит это следующим образом: браузер пользователя загружает шрифт с указанного сервера и применяет его для отображения текущей страницы. В настоящее время существуют следующие виды веб-шрифтов:
- TTF/OTF (True Type и Open Type Fonts) — эти шрифты имеют широкую поддержку. Разработаны Microsoft совместно с Adobe, с целью применения в различных операционных системах.
- WOFF (Web Open Font Format) — сжатая версия шрифтов TTF/OTF. Формат включает в себя метаданные, в которые автор шрифта может добавить информацию об использовании шрифта. WOFF-формат имеет широкую поддержку со стороны браузеров.
- WOFF2 (Web Open Font Format 2) — спецификация была разработана, чтобы обеспечить улучшенное сжатие и тем самым снизить использование пропускной способности сети, в то же время, позволяя быстро производить декомпрессию даже на мобильных устройствах.
- SVG (Scalable Vector Graphic) – способ создания векторной графики. SVG-формат имеет очень ограниченную поддержку (IOS/Safari). Планируется, что он перестанет использоваться в Chrome.
- EOT (Embedded Open Type) – шрифты, которые поддерживаются только в Internet Explorer/Edge (разработаны компанией Microsoft для использования в качестве встроенных шрифтов на веб-страницах).
Ответственность и поиск веб-шрифтов
Сразу хочу обратить Ваше внимание на то, что многие шрифты создаются с целью заработать на них деньги и соответственно распространяются на коммерческой основе.
Чтобы не сталкиваться с любыми правовыми вопросами, связанными с использованием «платных» шрифтов на бесплатной основе, я рекомендую Вам, пользоваться службами шрифтов, например, такой как Google Fonts или, крупными коллекционными порталами, например, Webfont.ru. На начальном этапе Вам этого хватит «за глаза».
Добавление веб-шрифта на страницу
Для добавления шрифта на страницу Вам необходимо:
- использовать правило CSS @font-face, которое сообщает браузеру пользователя, откуда необходимо загружать шрифт и какое имя шрифта при этом используется. При работе с правилом @font-face важным моментом является размещение его в начале вашей таблицы стилей, это позволит вашему браузеру сразу преступить к обработке необходимого шрифта.
- использовать CSS свойство font-family, чтобы указать имя задействованного шрифта и применить к интересующему Вас фрагменту текста (по аналогии работы с локальными шрифтами).
Давайте рассмотрим пошаговое подключение сторонних шрифтов, на примере использования службы Google Fonts.
- Переходим на сайт службы Google Fonts.
- Выбираем понравившийся нам шрифт, я остановился на шрифте без засечек Roboto, Вы можете найти его в поиске, либо выбрать любой другой:
- После этого необходимо добавить его в коллекцию (у Вас должен быть создан аккаунт Google):
- После добавления шрифта в коллекцию, для Вас будет доступна возможность скачать его:
- Распакуйте архив со шрифтами в директорию, из которой они будут подключаться к Вашей веб-странице, либо страницам:
Как Вы можете заметить, в архиве содержится 12 различных шрифтов. Исходя из названий можно установить, что, например, Roboto-Italic предназначен для курсивного стиля шрифта, Roboto-Bold для жирного начертания шрифта, Roboto-BoldItalic для курсивного жирного начертания и так далее.
Еще раз обращаю Ваше внимание, что один файл шрифта содержит:
- одну плотность шрифта.
- один стиль для этого шрифта.
Обратите внимание на важный момент — если Вам необходимо получить полужирные и курсивные шрифты, то необходимо подгружать их отдельно (использовать правило CSS @font-face для данного типа шрифта)!
Конечно в том случае, если они существуют для понравившегося Вам варианта шрифта, обязательно учтите эти моменты при работе с веб-шрифтами!
Приступим к подключению, загруженных нами шрифтов к нашему документу. Для заголовков второго уровня (элемент <h2>) мы будем использовать шрифт — Roboto-Bold. Для абзацев (элемент <p>) будем использовать шрифт Roboto-Regular, а для курсивного начертания (элемент <i>) — Roboto-Italic.
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>Пример использования правила @font-face</title> <style> @font-face { font-family: "Roboto"; /* задаем произвольное имя для шрифта, которое будет использоваться в свойстве font-family при указании стилей для конкретных элементов */ src: url("/fonts/Roboto-Regular.ttf") format('truetype'); /* задаем путь относительно корня сайта к шрифту (url) и тип шрифта (format). Тип шрифта выступает подсказкой для браузера (в идеале ускоряет процесс обработки) */ font-style: normal; /* указываем, что стиль шрифта обычный - это значение по умолчанию */ font-weight: normal; /* определяет нормальное начертание символов - это значение по умолчанию */ } @font-face { font-family: "Roboto"; /* задаем произвольное имя для шрифта, которое будет использоваться в свойстве font-family при указании стилей для конкретных элементов */ /* для упрощения работы со шрифтами допускается использовать одинаковое имя, но при этом начертание или стиль шрифта должен отличаться. IE 8 и ниже не поддерживают такой подход и если Вы хотите поддерживать эти браузеры, то Вам необходимо называть каждый шрифт по разному и более детально стилизовать каждый селектор */ src: url("/fonts/Roboto-Bold.ttf") format('truetype'); /* задаем путь относительно корня сайта к шрифту (url) и тип шрифта (format). Тип шрифта выступает подсказкой для браузера (в идеале ускоряет процесс обработки) */ font-style: normal; /* указываем, что стиль шрифта обычный - это значение по умолчанию */ font-weight: bold; /* определяет жирное начертание символов */ } @font-face { font-family: "Roboto"; /* задаем произвольное имя для шрифта, которое будет использоваться в свойстве font-family при указании стилей для конкретных элементов */ src: url("/fonts/Roboto-Italic.ttf") format('truetype'); /* задаем путь относительно корня сайта к шрифту (url) и тип шрифта (format). Тип шрифта выступает подсказкой для браузера (в идеале ускоряет процесс обработки) */ font-style: italic; /* указываем, что стиль шрифта курсивный */ font-weight: normal; /* определяет нормальное начертание символов - это значение по умолчанию */ } h2, p, b, i { /* задаем групповой селектор для элементов <h2>, <p>, <b>, <i> */ font-family: "Roboto", sans-serif; /* устанавливаем шрифт Roboto, если он не будет загружен по какой-то причине, то указываем, чтобы браузер установил шрифт из семейства шрифтов без засечек (sans-serif) */ } </style> </head> <body> <h2>Немного о пандах</h2> <p><b>Большая панда</b> (<i>Ailuropoda melanoleuca</i>) — бамбуковый медведь, одно из редчайших вымирающих животных, занесённых в международную Красную книгу; единственный современный представитель рода <b>большие панды</b> (<i>Ailuropoda</i>).</p> </body> </html>
И так, что мы сделали в этом примере:
- Добавили три правила @font-face в начало наших CSS стилей (это важно).
- В каждом правиле с использованием CSS свойства (font-family) мы указали одно название шрифта, вы можете использовать своё название для всех правил, но будет лучше и понятнее если оно будет совпадать с наименованием шрифта.
- В каждом правиле мы указали путь к файлу, который содержит шрифт с разрешением TTF (True Type Font).
- Далее мы для всех правил с использованием свойства (font-style) указали стиль шрифта: для двух правил шрифт отображается обычным стилем — normal (это значение по умолчанию), а для одного указали, что он отображается курсивом (italic).
- Кроме того, для всех правил с использованием свойства (font-weight) указали жирность шрифта: для двух правил шрифт отображается обычной жирности — normal (это значение по умолчанию), а для одного указали что он отображается жирным шрифтом (bold).
- Нам осталось только применить наши шрифты к элементам. Для этого мы создали групповой селектор в котором с использованием ранее рассмотренного свойства font-family указали тип нашего шрифта и как альтернативу через запятую указали семейство шрифта, это сделано для того, что если по какой-то причине браузер пользователя не сможет загрузить наши шрифты, он смог использовать шрифты из указанного семейства, а не встроенные в браузер.
Результат нашего примера:
Для полноты картины, давайте рассмотрим, как добавлять несколько вариантов шрифтов (для поддержки современных более сжатых версий шрифтов):
@font-face { font-family: "Roboto"; /* задаем произвольное имя для шрифта, которое будет использоваться в свойстве font-family при указании стилей для конкретных элементов */ src: local("font"); /* проверяется есть ли шрифт на локальном компьютере пользователя по имени, если нет то поиск осуществляется в других указанных источниках */ url("/fonts/font.woff2") format('woff2'); /* задаем путь к шрифту (url) и тип шрифта (format) */ url("/fonts/font.woff") format('woff'); /* задаем путь к шрифту (url) и тип шрифта (format) */ url("/fonts/font.ttf") format('truetype'); /* задаем путь к шрифту (url) и тип шрифта (format) */ }
Как вы можете заметить, для того, чтобы добавить несколько вариантов шрифтов необходимо указать несколько путей к файлам, которые содержат шрифты с определенным разрешением.
Обращаю Ваше внимание, что порядок, в котором вы указываете варианты шрифтов, имеет важное значение, так как Ваш браузер выбирает первый поддерживаемый шрифт. К примеру, если Вы хотите использовать шрифты на сайте WOFF2, которые поддерживаются не всеми браузерами, то необходимо их указать до WOFF.
В настоящее время с некоторыми браузерами могут возникать проблемы при использовании директивы local, которая служит для проверки наличия шрифта (по определенном имени) на локальном компьютере пользователя, по этой причине я не рекомендую Вам использовать её в своих проектах, для этих целей более надежным является использование скриптов.
Добавление веб-шрифта со стороннего ресурса
Давайте рассмотрим на примере службы Google Fonts варианты подключения шрифтов к Вашим страницам без загрузки их на Ваш сервер.
- Переходим на сайт службы Google Fonts.
- Выбираем понравившийся нам шрифт, я остановился на том же шрифте, который мы использовали в прошлый раз — шрифт без засечек Roboto. Вы можете использовать поиск по наименованию для его нахождения.
- После добавления шрифта необходимо нажать на вкладку «Family-selected» (выбранные вами шрифты):
- Далее необходимо выбрать те стили шрифтов, которые мы будем использовать на нашем сайте. Для этого необходимо перейти на вкладку «Customize»
Например, меня интересуют следующие:
- Для заголовков (элемент <h2>) и для жирного начертания я буду использовать шрифт – Bold 700 (Roboto Bold в наборе).
- Для абзацев (элемент <p>) будем использовать шрифт Normal 400 (Roboto Regular в наборе), а для курсивного начертания Normal 400 Italic (Roboto Italic в наборе).
- Следующим шагом необходимо выбрать те наборы символов (языки), которые будете использовать на своем сайте (выбор языков находится в том же вкладке — «Customize» немного ниже). В данном случае выбраны кириллические и латинские символы. Выбирайте только те наборы, которые вам необходимы, чтобы Ваши страницы загружались быстрее:
- Далее на вкладке «Embed» нам будет предложено два варианта подключения (Standart и @import):
При выборе Вам отобразят влияние тех или иных шрифтов на время загрузки страницы. Используя множество стилей шрифтов, может привести к замедлению загрузки Вашей страницы, поэтому рекомендуется выбирать только те шрифты, которые вам действительно необходимы на вашем сайте.
Первый вариант подключения (Standard). Создание ссылки на внешнюю таблицу стилей, используя HTML тег <link>. В адресе ссылки указывается веб-сервер Google и информация, которая необходима Google для загрузки необходимых шрифтов (как правило, это формат woff2 для современных браузеров, определение типа поддерживаемого шрифта происходит на стороне сервера Google в зависимости от Вашего браузера).
Как вы видите, в ссылке указывается наименование шрифта, толщина шрифта и какой набор символов используется. Если вы внимательно читали статью «Введение в CSS», то Вы уже догадались, что необходимо эту ссылку указать на каждой странице, где необходимо использовать данные шрифты.
Обращаю Ваше внимание, что тег <link> размещается всегда внутри тега <head> (как правило, перед закрывающим тегом </head>).
Необходимое наименование шрифта и альтернативный вариант так же указывается в описании:
Рассмотрим пример подключения, выбранных нами шрифтов:
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>Пример подключение веб-шрифтов, используя тег <link></title> <link href = 'https://fonts.googleapis.com/css?family=Roboto:400,700,400italic&subset=latin,cyrillic' rel = 'stylesheet' type = 'text/css'> /* подключаем внешнюю таблицу стилей для загрузки необходимых шрифтов, в HTML 5 type='text/css' допускается не указывать */ <style> h2, p, b, i { /* задаем групповой селектор для элементов <h2>, <p>, <b>, <i> */ font-family : "Roboto", sans-serif; /* устанавливаем шрифт Roboto, если он не будет загружен по какой-то причине, то указываем, чтобы браузер установил шрифт из семейства шрифтов без засечек (sans-serif) */ } </style> </head> <body> <h2>Немного о верблюдах</h2> <p><b>Верблюды</b> (<i>Camelus</i>) — род млекопитающих семейства верблюдовых (<i>Camelidae</i>) подотряда мозоленогих (<i>Camelidae</i>) отряда парнокопытных (<i>Artiodactyla</i>). Это крупные животные, приспособленные для жизни в засушливых регионах мира — пустынях, полупустынях и степях.</p> </body> </html>
Результат:
Второй вариант подключения, который мы также рассматривали в статье «Введение в CSS» это использование правила @import. В отличие от первого метода (используя HTML тег <link>), который требует добавления кода к каждой странице Вашего сайта, правило @import допускается использовать в начале своей таблицы стилей, которая у Вас уже должна быть подключена к каждой странице.
Чтобы выполнить привязку к внешнему файлу CSS, нужно использовать url и заключить путь к CSS файлу в круглые скобки. Допустимо заключить содержимое в скобках в кавычки:
@import url("path/to/file.css");
Предлагаемый вариант импортирования на страницу:
Обращаю Ваше внимание, что правила @import всегда необходимо указывать перед стилями CSS, иначе, таблицы стилей не импортируются (браузеры просто их проигнорируют).
Вы можете использовать правило @import как во внешних таблицах стилей, так и во внутренних. Рассмотрим пример подключения, выбранных нами шрифтов, используя правило @import во внутренних таблицах стилей:
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>Пример подключение веб-шрифтов, используя правило @import</title> <style> @import url(https://fonts.googleapis.com/css?family=Roboto:400,700,400italic&subset=latin,cyrillic); /* импортируем внешнюю таблицу стилей */ h2, p, b, i { /* задаем групповой селектор для элементов <h2>, <p>, <b>, <i> */ font-family : "Roboto", sans-serif; /* устанавливаем шрифт Roboto, если он не будет загружен по какой-то причине, то указываем, чтобы браузер установил шрифт из семейства шрифтов без засечек (sans-serif) */ } </style> </head> <body> <h2>Немного о пингвинах</h2> <p><b>Пингвиновые</b> или <b>пингвины</b> (лат. <i>Spheniscidae</i>) — семейство нелетающих морских птиц, единственное в отряде <b>пингвинообразных</b> (<i>Sphenisciformes</i>). В семействе 18 современных видов. Все представители этого семейства хорошо плавают и ныряют.</p> </body> </html>
Результат нашего примера:
Прошу Вас учесть тот момент, что правило @import увеличивает число соединений с сервером, поскольку файл, на который вы ссылаетесь, тоже нужно скачать и проанализировать. Исходя из правил и рекомендаций PageSpeed Insight (Google), связанных с оптимизацией страниц, рекомендуется избегать применения правила @import.
Кроме того, в некоторых случаях правило @import может замедлять загрузку таблиц стилей, либо загружать их не в заданном порядке, что может быть критично для конечного отображения конкретной страницы. Не используйте его в своих проектах.
basicweb.ru
Семейства шрифтов
Шрифты подразделяются на семейства. Существуют такие семейства шрифтов:
serif — с засечками
sans-serif — без засечек
monospace — моноширинные
cursive — курсивные
fantasy — декоративные
Безопасные шрифты
Существует достаточно много шрифтов. Сложность их использования заключается в том, что каждая операционная система имеет свой набор шрифтов. Кроме того, различные браузеры также отображают не все шрифты. Если для какого-то текстового элемента установлен шрифт, которого нет в операционной системе компьютера пользователя, то текст будет отображаться каким-то другим шрифтом. Шрифты, которые отображаются на всех компьютерах и во всех браузерах, называются безопасными. Считается, что абсолютно безопасных нет. Но всё же, существует ряд шрифтов, которые есть у абсолютного большинства пользователей. Далее приведены безопасные шрифты с указанием их семейства.
Другие шрифты Вы можете найти, если наберёте в любом поисковике: стандартные шрифты.
Установка шрифта
Чтобы изменить или подключить шрифт в CSS используется свойство font-family. Значением этого свойства является название шрифта. Для примера создадим абзац и установим ему шрифт:
Стиль:
<!DOCTYPE html> <html> <head> <title>Страница</title> <meta charset="utf-8"> <style> |
p { font-family: Arial; }
|
HTML код:
<p>Текст</p> |
Если в названии шрифта больше одного слова, то оно пишется в кавычках. Пример:
h1 { font-family: "Times New Roman"; }
|
Свойство font-family позволяет указать несколько шрифтов через запятую. Также можно указать семейтсво шрифтов. При этом, будет использоваться шрифт, указанный первым. Если такого нет, то используется следующий шрифт, и так далее. В основном, на реальных страницах так и делают. Это делается для того, чтобы быть уверенным, что страница будет отображаться так, как нужно.
Пример:
div { font-family: Tahoma, Verdana, sans-serif; }
|
Как подключить нестандартный шрифт в CSS
Кроме шрифтов, которые содержатся в операционной системе пользователя, можно использовать и другие шрифты. Их можно найти в интернете или создать самостоятельно. Существует много нестандартных шрифтов. Чтобы их найти, нужно в поисковике написать — шрифты. Файл шрифта нужно скачать и присоединить к странице. При выборе нужно учитывать, что некоторые шрифты являются платными. Об этом должна быть информация на странице, с которой Вы скачиваете шрифт.
Сложность использования нестандартных шрифтов заключается в том, что каждый браузер поддерживает свой набор форматов. Поэтому, при использовании нестандартрого шрифта нужно проверять, как отображается страница в разных браузерах. Форматов шрифтов достаточно много. Наиболее универсальным является формат woff. Он должен работать в большинстве современных браузеров.
Чтобы подключить нестандартный шрифт CSS используется правило @font-face. В нём обязательно должны быть два свойства: в свойстве font-family указывается название шрифта, под которым этот шрифт будет использоваться на сайте. Название Вы выбираете сами. А в свойстве src указывается путь к файлу нестандартного шрифта. После этого, шрифт можно использовать для любого селектора. В свойстве font-family нужно указать название, которое Вы выбрали для шрифта.
Для примера я использую файл шрифта с названием unineue.woff. Он располагается в той же папке, что и страница. Шрифт я назову Nfont.
Стиль:
@font-face { font-family: Nfont; src: url("unineue.woff"); } #nf { font-family: Nfont; font-size: 40px; }
|
HTML код:
<div id="nf">Текст с нестандартным шрифтом</div> |
Чтобы шрифт работал в разных браузерах, можно использовать несколько файлов с разными форматами. В свойстве src путь к файлам пишется через запятую. Каждый браузер сам определяет, какой тип файла использовать. При этом желательно указывать форматы файлов, чтобы браузер мог правильно выбрать файл. CSS правило @font-face будет выглядеть так:
@font-face { font-family: Nfont; src: url("unineue.woff") format("woff"), url("unineue.ttf") format("truetype"); }
|
basecourse.ru
Группы шрифтов
После цвета шрифт, возможно, важнейшее свойство страницы. На этом странице не не буду показывать никаких трюков, но покажу ряд вариаций шрифтов, применяемых CSS.
Так как не все шрифты доступны на всех компьютерах (существуют тысячи шрифтов и многие не бесплатны), CSS обеспечивает резервную систему. Вы перечисляете шрифты, которые вы хотите найти прежде всего, затем любые шрифты, которые вы будете использовать, если не можете найти необходимые, и закончите список типовым шрифтом, который имеет 5 видов: serif, sans-serif, monospace, cursive и fantasy.
Следующая таблица показывает примеры различных шрифтов (ваш браузер может не знать их все) и вы можете увидеть, что ваш браузер делает с каждым из пяти типовых шрифтов:
| ‘sans-serif’: обычный шрифт без засечек | |
|---|---|
Arial, sans-serif
| Съешь же ещё этих мягких французских булок да выпей чаю |
Helvetica, sans-serif
| Съешь же ещё этих мягких французских булок да выпей чаю |
Gill Sans, sans-serif
| Съешь же ещё этих мягких французских булок да выпей чаю |
Lucida, sans-serif
| Съешь же ещё этих мягких французских булок да выпей чаю |
Helvetica Narrow, sans-serif
| Съешь же ещё этих мягких французских булок да выпей чаю |
sans-serif
| Съешь же ещё этих мягких французских булок да выпей чаю |
| ‘serif’: обычный шрифт с засечками | |
Times, serif
| Съешь же ещё этих мягких французских булок да выпей чаю |
Times New Roman, serif
| Съешь же ещё этих мягких французских булок да выпей чаю |
Palatino, serif
| Съешь же ещё этих мягких французских булок да выпей чаю |
Bookman, serif
| Съешь же ещё этих мягких французских булок да выпей чаю |
New Century Schoolbook, serif
| Съешь же ещё этих мягких французских булок да выпей чаю |
serif
| Съешь же ещё этих мягких французских булок да выпей чаю |
| ‘monospace’: шрифт фиксированной ширины | |
Andale Mono, monospace
| Съешь же ещё этих мягких французских булок да выпей чаю |
Courier New, monospace
| Съешь же ещё этих мягких французских булок да выпей чаю |
Courier, monospace
| Съешь же ещё этих мягких французских булок да выпей чаю |
Lucidatypewriter, monospace
| Съешь же ещё этих мягких французских булок да выпей чаю |
Fixed, monospace
| Съешь же ещё этих мягких французских булок да выпей чаю |
monospace
| Съешь же ещё этих мягких французских булок да выпей чаю |
| ‘cursive’: шрифт, имитирующий почерк | |
Comic Sans, Comic Sans MS, cursive
| Съешь же ещё этих мягких французских булок да выпей чаю |
Zapf Chancery, cursive
| Съешь же ещё этих мягких французских булок да выпей чаю |
Coronetscript, cursive
| Съешь же ещё этих мягких французских булок да выпей чаю |
Florence, cursive
| Съешь же ещё этих мягких французских булок да выпей чаю |
Parkavenue, cursive
| Съешь же ещё этих мягких французских булок да выпей чаю |
cursive
| Съешь же ещё этих мягких французских булок да выпей чаю |
| ‘fantasy’: декоративный шрифт, для заглавий и т.д. | |
Impact, fantasy
| Съешь же ещё этих мягких французских булок да выпей чаю |
Arnoldboecklin, fantasy
| Съешь же ещё этих мягких французских булок да выпей чаю |
Oldtown, fantasy
| Съешь же ещё этих мягких французских булок да выпей чаю |
Blippo, fantasy
| Съешь же ещё этих мягких французских булок да выпей чаю |
Brushstroke, fantasy
| Съешь же ещё этих мягких французских булок да выпей чаю |
fantasy
| Съешь же ещё этих мягких французских булок да выпей чаю |
www.indeep76.com
font-family
Позволяет определить, каким шрифтом будет написан текст. Для группировки шрифтов в CSS используется два типа имён: generic-family и family-name.
generic-family содержит пять базовых семейств шрифтов, которые можно найти практически на любом компьютере.
- sans-serif — шрифты без засечек. Написанный ими текст воспринимается лучше других.
- serif — шрифты с засечками.
- monospace — шрифты, символы которых имеют фиксированную ширину. Их принято использовать для отображения программного кода.
- cursive — рукописные шрифты.
- fantasy — декоративные (художественные) шрифты.
family-name определяет не семейство, а один шрифт: “Arial Black”, Verdana.
В качестве значений свойства font-family семейства и шрифты перечисляются через запятую. Браузер определяет, установлен ли на ПК пользователя первый в списке шрифт, и если да, то отображает текст им, если нет — переходит к следующему и т. д. Если имя шрифта содержит спецсимволы или состоит из нескольких слов (содержит пробел), то его надо брать в кавычки.
font-style
Задаёт курсивное (значение italic), наклонное (oblique) или стандартное (normal) начертание текста.
Код:
Создаёт такую страницу:
font-size
Важное свойство, которое определяет размер шрифта. Его можно задавать разными способами.
- Пиксели (px). Используются довольно часто, потому что позволяют указать размер максимально точно. По умолчанию браузер отображает текст размером 16 пикселей.
Обратите внимание: между числом и единицами измерения пробела быть не должно.
- Проценты (%). Высчитываются от размера шрифта родительского элемента. Если у родителя он установлен по умолчанию, то можно вспомнить про 16 пикселей и принять их за 100%.
- Пункты (pt). Тоже используются очень часто. Более того, когда вы выбираете число, выставляя размер шрифта в текстовых редакторах (Word, Блокнот, Notepad и т. д.), то также используете пункты.
- Относительная высота шрифта (em). Высота шрифта родителя принимается за единицу, и относительно него устанавливается высота шрифта текущего элемента.
- Константы. Считается, что значения xx-small, x-small, small, medium, large, x-large, xx-large (от меньшего к большему) задают абсолютный размер шрифта, хотя на самом деле при их использовании размер всё равно будет зависеть от настроек операционной системы и браузера. Есть также и относительные константы: smaller (меньший) и larger (больший), которые уменьшают или увеличивают шрифт относительно элемента-родителя.
- Другие единицы измерения. Для установки шрифта можно использовать всё, что доступно в CSS: миллиметры (mm), сантиметры (cm), дюймы (in), пики (pc, 1 pc = 12 pt), размер символа x (ex).
font-variant
Предлагает два значения:
- small-caps. Строчные буквы меняются на прописные малого размера.
- normal. Обычный текст.
Чтобы понять, разницу лучше один раз увидеть:
font-weight
Влияет на насыщенность (жирность) шрифта. Значения могут быть такими:
- Числа от 100 до 900 с шагом в сотню. С их помощью можно задать жирность точнее всего. Насыщенность нормального шрифта, который вы обычно видите на страницах, равна значению 400, полужирного — 700. Проблема в том, что многие браузеры не поддерживают весь этот ассортимент, и поэтому использование числовых значений часто бывает бессмысленным.
- normal. Обычный шрифт.
- bold. Устанавливает полужирное начертание.
- bolder и lighter. Делает шрифт соответственно жирнее или тоньше шрифта текста родителя.
color
Определяет цвет шрифта. Может задаваться следующими способами
- По названию. Используются зарезервированные слова, обозначающие имена цветов (например, blue — синий, yellow — жёлтый). Самый простой, но вместе с тем и самый ограниченный метод, потому что поддерживает только 140 цветов, хотя обычно и их хватает.
- По шестнадцатеричному коду (HEX). Шестнадцатеричная система счисления включает в себя 16 цифр, последние шесть из которых обозначаются буквами латинского алфавита от A до F, причём десятичное число 255 в этой системе записывается как FF. Как известно, все цвета создаются путём смешивания всего трёх: красного, зелёного и синего. Степень присутствия каждого из них и задаётся числами от 0 до 255, записанными в шестнадцатеричной системе. Перед числом ставится символ «решётка (#). Белый цвет — #000000, чёрный — #ffffff.
Пример ниже задаёт абзацу серый цвет:
- В системе RGB. Всё те же красный, зелёный и синий (red, green, blue), но задающиеся уже числами от 0 до 255 через запятую. Присутствие каждого из трёх цветов можно обозначать и в процентах. Тогда 100% будет соответствовать числу 255.
- RGBA. Всё, как в RGB, только в конце прибавляется ещё одно число от 0 до 1 — альфа-канал, задающий тексту прозрачность.
- HSL. Значение в этом формате задаётся тремя параметрами через запятую.
1. H (hue — оттенок). Определяется в градусах от 0 до 359° в зависимости от цвета на цветовом круге (рисунок ниже).
2. S (Saturate — оттенок). Указывается в процентах. Понятно, что от 0 до 100%, и понятно, что чем больше процент, тем насыщеннее цвет.
3. L (lightness — яркость). Так же, как и насыщенность, устанавливается в процентах.
Зададим ссылкам насыщенный красный цвет
- HSLA. То же, что и HSL, но с добавлением альфа-канала (как RGBA).
font
Позволяет объединить все свойства шрифта в одной строке и может тем самым сильно сократить код. Имеет следующую структуру:
Свойства должны записываться именно в такой последовательности (чтобы не задавать значение, его можно просто пропустить).
Вот пример:
www.seostop.ru
Выбор начертания
Быстрый способ увеличить привлекательность контента – это выбрать красивое начертание шрифта, или свойство CSS font-family:
h1{ font-family: Verdana; } Сначала вы указываете селектор, для которого применяется свойство. В данном примере это заголовок первого уровня <h1>. После font-family и двоеточия пишете название шрифта, который хотите употребить у себя на сайте. Но посетители странички увидят этот шрифт только в том случае, если он предустановлен у них на компьютере или телефоне.
Есть группы шрифтов, которые имеются на устройствах каждого пользователя. Например, Arial, Helvetica и, конечно, Times New Roman. Дизайнеры делят их на четыре типа.
Четыре семейства шрифтов
Первый – это антиквенный, или шрифт с засечками. Отлично подходит для длинных статей. Маленькие штрихи на концах «связывают» буквы и делают текст приятным для глаз и легко читаемым. К этой группе относятся: Times, Garamond, Baskerville, Georgia.
Если вы не знаете, какое сочетание выбрать, попробуйте следующий набор для CSS font-family:
font-family: Baskerville, Palatino Linotype, Times, serif;Следующая большая группа шрифтов – sans-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. На радость дизайнерам, современные браузеры поддерживают веб-шрифты. Отличаются от десктопных (установленных на компьютере) форматом. Для настольных приложений, таких как “Фотошоп”, “Ворд”, “Иллюстратор”, используются файлы с расширением .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: 'Notable', 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: 'Notable', 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'); }Теперь назначайте подключенные шрифты своему тексту. Когда будете скачивать шрифты, проверьте, чтобы они поддерживали кириллицу.
fb.ru