Типы шрифтов html – Безопасные шрифты. Verdana, Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS. Верстальщику о шрифтах.

Leave a Comment / Html / By /

Содержание

Fonts CSS HTML шрифты, цвет и размер текста


Свойства шрифта CSS определяют семейство шрифтов, смелость, размер и стиль текста.

Разница между засечками и шрифтами без засечек

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

В CSS существует два типа имен семейств шрифтов:

  • родовое семейство — группа семейств шрифтов с похожим видом (например, «засечка» или «однодисковая»)
  • семейство шрифтов — конкретная семья шрифтов (например, «Times New Roman» или «Arial»)
Generic familyFont familyОписание
SerifTimes New Roman
Georgia		Шрифты с засечками имеют небольшие линии на концах на некоторых символах
Sans-serifArial
Verdana		«Sans» означает без-эти шрифты не имеют линий на концах символов
MonospaceCourier New
Lucida Console		Все одноместные символы имеют одинаковую ширину

Примечание: На компьютерных экранах шрифты без засечек считаются более удобными для чтения, чем шрифты с засечками.

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

Семейство шрифтов текста задается с помощью свойства font-family.

Свойство font-family должно содержать несколько имен шрифтов в качестве «резервной» системы. Если обозреватель не поддерживает первый шрифт, он пытается следующий шрифт и т. д.

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

Примечание: Если имя семейства шрифтов больше одного слова, оно должно быть в кавычках, например: «Times New Roman».

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

Пример

p {
    font-family: «Times New Roman», Times, serif;
}

Выбор шрифта | CSS

Каскадные таблицы стилей предоставляют целый ряд свойств шрифтов, которые непосредственно влияют на отображение текста. Свойство CSSfont family определяет, какое семейство шрифтов использовать.

Шрифты группируются по 5 типам:

  • serif — шрифты имеют небольшие засечки на окончаниях линий каждого символа;
  • sans-serif;
  • monospace;
  • cursive;
  • fantasy;

cursive и fantasy никогда не используются.

Поскольку свойство CSS font family наследуется всеми дочерними элементами HTML, — можно применить шрифт ко всей веб-странице, задав его для элемента <body>.

body{ font-family: sans-serif;}

В этом примере на веб-странице в качестве приоритетного будет использоваться шрифт sans-serif.

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

Чтобы ваш ресурс выглядел одинаково на всех устройствах, нужно указать конкретный шрифт, который должен использоваться. Для этого просто задайте название шрифта.

body{ font-family: Arial;}

Для веб-страницы будет использоваться CSS font family Arial, но при условии, что он установлен на компьютере пользователя. Иначе будет использоваться заданный по умолчанию для браузера шрифт типа serif (как правило, это Times).

Семейство Arial является надежным выбором, так как оно установлено по умолчанию на всех компьютерах, работающих на Windows и Mac, а также на большинстве Linux систем. Именно поэтому этот шрифт считается надежным: вы можете использовать его в CSS, будучи при этом уверенными, что на компьютере пользователя он установлен.

Есть 9 надежных веб-шрифтов:

  • Arial;
  • Arial Black;
  • Comic Sans MS;
  • Courier New;
  • Georgia;
  • Impact;
  • Times New Roman;
  • Trebuchet MS;
  • Verdana.

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

body{ font-family: Arial, Verdana, sans-serif;}

В этом примере мы указываем браузеру искать первое значение CSS font family Arial и использовать его. Если этот шрифт недоступен, программа будет использовать Verdana. И, наконец, если он не доступен, то будет использовать шрифт по умолчанию sans-serif.

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

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

Данная публикация представляет собой перевод статьи «Choosing a font» , подготовленной дружной командой проекта Интернет-технологии.ру

Учебник CSS 3. Статья «Работа со шрифтами в CSS»

В этой статье Вы узнаете основную информацию о шрифтах в CSS, а именно: как управлять размером шрифта, его начертанием и жирностью, научитесь подключать безопасные и веб-шрифты, узнаете какие бывают шрифты и где их можно найти. Кроме того, на примере службы

Google Fonts подключим веб-шрифты на наши страницы.

Для привлечения внимания посетителей Вашего сайта вы можете придать привлекательный вид текстовому содержимому страниц. Для этих целей в CSS существует большое количество разнообразных свойств форматирования: шрифт текста, его цвет, размер, межстрочный интервал и так далее. В первую очередь рассмотрим методы работы с существующими шрифтами (безопасные веб-шрифты).

Безопасные веб-шрифты

В 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, а как альтернатива семейство моноширинных шрифтов (буквы имеют одинаковую ширину).

Шрифты, которые содержат в названии более одного слова, либо цифры, необходимо обязательно помещать в кавычки.

Результат нашего примера:

Рис. 34 Пример использования свойства font-family.

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

sans-serif (без засечек)
Семейство шрифта (font-family)Пример
Arial, Helvetica, sans-serifСъешь же еще этих сочных мандаринов.
«Arial Black», Gadget, sans-serifСъешь же еще этих сочных мандаринов.
«Comic Sans MS», cursive, sans-serifСъешь же еще этих сочных мандаринов.
Impact, Charcoal, sans-serifСъешь же еще этих сочных мандаринов.
«Lucida Sans Unicode», «Lucida Grande», sans-serifСъешь же еще этих сочных мандаринов.
Tahoma, Geneva, sans-serifСъешь же еще этих сочных мандаринов.
«Trebuchet MS», Helvetica, sans-serifСъешь же еще этих сочных мандаринов.
Verdana, Geneva, sans-serifСъешь же еще этих сочных мандаринов.

serif (с засечками)
Семейство шрифта (font-family)Пример
Georgia, serifСъешь же еще этих сочных мандаринов.
«Palatino Linotype», «Book Antiqua», Palatino, serifСъешь же еще этих сочных мандаринов.
«Times New Roman», Times, serifСъешь же еще этих сочных мандаринов.

monospace (моноширинные)
Семейство шрифта (font-family)Пример
«Courier New», Courier, monospaceСъешь же еще этих сочных мандаринов.
«Lucida Console», Monaco, monospaceСъешь же еще этих сочных мандаринов.

Типы веб-шрифтов и их поддержка браузерами

Все современные браузеры поддерживают использование определённых веб-шрифтов. Происходит это следующим образом: браузер пользователя загружает шрифт с указанного сервера и применяет его для отображения текущей страницы. В настоящее время существуют следующие виды веб-шрифтов:

  • 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.

  1. Переходим на сайт службы Google Fonts.
  2. Выбираем понравившийся нам шрифт, я остановился на шрифте без засечек Roboto, Вы можете найти его в поиске, либо выбрать любой другой:

  3. После этого необходимо добавить его в коллекцию (у Вас должен быть создан аккаунт Google):

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

  5. Распакуйте архив со шрифтами в директорию, из которой они будут подключаться к Вашей веб-странице, либо страницам:

Как Вы можете заметить, в архиве содержится 12 различных шрифтов. Исходя из названий можно установить, что, например, Roboto-Italic предназначен для курсивного стиля шрифта, Roboto-Bold для жирного начертания шрифта, Roboto-BoldItalic для курсивного жирного начертания и так далее.

Еще раз обращаю Ваше внимание, что один файл шрифта содержит:

  • одну плотность шрифта.
  • один стиль для этого шрифта.

Обратите внимание на важный момент — если Вам необходимо получить полужирные и курсивные шрифты, то необходимо подгружать их отдельно (использовать правило CSS @font-face для данного типа шрифта)!

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

Приступим к подключению, загруженных нами шрифтов к нашему документу. Для заголовков второго уровня (элемент <h3>) мы будем использовать шрифт — 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;  /* определяет нормальное начертание символов - это значение по умолчанию */ 
}
h3, p, b, i {  /* задаем групповой селектор для элементов <h3>, <p>, <b>, <i> */
font-family: "Roboto", sans-serif;  /* устанавливаем шрифт Roboto, если он не будет загружен по какой-то причине, то указываем, чтобы браузер установил шрифт из семейства шрифтов без засечек (sans-serif)  */
}
</style>
</head>
<body>
	<h3>Немного о пандах</h3>
	<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 указали тип нашего шрифта и как альтернативу через запятую указали семейство шрифта, это сделано для того, что если по какой-то причине браузер пользователя не сможет загрузить наши шрифты, он смог использовать шрифты из указанного семейства, а не встроенные в браузер.

Результат нашего примера:

Рис.38 Пример использования правила @font-face.

Для полноты картины, давайте рассмотрим, как добавлять несколько вариантов шрифтов (для поддержки современных более сжатых версий шрифтов):

@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 варианты подключения шрифтов к Вашим страницам без загрузки их на Ваш сервер.

  1. Переходим на сайт службы Google Fonts.
  2. Выбираем понравившийся нам шрифт, я остановился на том же шрифте, который мы использовали в прошлый раз — шрифт без засечек Roboto. Вы можете использовать поиск по наименованию для его нахождения.
  3. После добавления шрифта необходимо нажать на вкладку «Family-selected» (выбранные вами шрифты):
  4. Далее необходимо выбрать те стили шрифтов, которые мы будем использовать на нашем сайте. Для этого необходимо перейти на вкладку «Customize»

    Например, меня интересуют следующие:

  • Для заголовков (элемент <h3>) и для жирного начертания я буду использовать шрифт – 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>
h3, p, b, i {  /* задаем групповой селектор для элементов <h3>, <p>, <b>, <i> */
font-family : "Roboto", sans-serif;  /* устанавливаем шрифт Roboto, если он не будет загружен по какой-то причине, то указываем, чтобы браузер установил шрифт из семейства шрифтов без засечек (sans-serif)  */
}
</style>
</head>
	<body>
		<h3>Немного о верблюдах</h3>
		<p><b>Верблюды</b> (<i>Camelus</i>) — род млекопитающих семейства верблюдовых (<i>Camelidae</i>) подотряда мозоленогих (<i>Camelidae</i>) отряда парнокопытных (<i>Artiodactyla</i>). Это крупные животные, приспособленные для жизни в засушливых регионах мира — пустынях, полупустынях и степях.</p>
	</body>
</html>

    Результат:

    Рис.44 Пример подключение веб-шрифтов, используя тег <link>.

    Второй вариант подключения, который мы также рассматривали в статье «Введение в 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); /* импортируем внешнюю таблицу стилей */
h3, p, b, i {  /* задаем групповой селектор для элементов <h3>, <p>, <b>, <i> */
font-family : "Roboto", sans-serif;  /* устанавливаем шрифт Roboto, если он не будет загружен по какой-то причине, то указываем, чтобы браузер установил шрифт из семейства шрифтов без засечек (sans-serif)  */
}
</style>
</head>
	<body>
		<h3>Немного о пингвинах</h3>
		<p><b>Пингвиновые</b> или <b>пингвины</b> (лат. <i>Spheniscidae</i>) —  семейство нелетающих морских птиц, единственное в отряде <b>пингвинообразных</b> (<i>Sphenisciformes</i>). В семействе 18 современных видов. Все представители этого семейства хорошо плавают и ныряют.</p>
	</body>
</html>

    Результат нашего примера:

    Рис.46 Пример подключение веб-шрифтов, используя правило @import.

    Прошу Вас учесть тот момент, что правило @import увеличивает число соединений с сервером, поскольку файл, на который вы ссылаетесь, тоже нужно скачать и проанализировать. Исходя из правил и рекомендаций PageSpeed Insight (Google), связанных с оптимизацией страниц, рекомендуется избегать применения правила @import.

    Кроме того, в некоторых случаях правило @import может замедлять загрузку таблиц стилей, либо загружать их не в заданном порядке, что может быть критично для конечного отображения конкретной страницы. Не используйте его в своих проектах.


    Вопросы и задачи по теме

    Перед тем как перейти к изучению следующей темы пройдите практические задания:

    • Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (два HTML файла) в любую папку на вашем жестком диске:

    • Переходим на сайт службы Google Fonts и скачиваем необходимые нам шрифты: для заголовка — Roboto, для остального текста — Open Sans. Обратите внимание, что Вам необходимо будет подключить один шрифт Roboto и три Open Sans к странице. В результате у Вас должно получиться следующее:

      Практическое задание № 10.

    • Переходим на сайт службы Google Fonts, находим необходимый нам шрифт — Ubuntu, выбираем необходимые стили шрифта и языки, которые нам понадобятся. После этого с использованием тега <link> подключите шрифты на нашу страницу. В результате у Вас должно получиться следующее:

      Практическое задание № 11.

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


    Виды шрифтов в CSS • Vertex Academy

    • Данная статья написана командой Vertex Academy.
    • Это одна из статей из нашего Самоучителя по HTML&CSS.
    • Надеемся, что данная статья Вам будет полезна. Приятного прочтения!

    Привет! В этой статье мы продолжим знакомство с CSS, а именно поговорим о шрифтах.

    Шрифты — важная часть вида веб-страницы. Существует множество различных, не похожих друг на друга шрифтов.

    Тем не менее, все шрифты можно разделить на 4 группы:

    • с засечками (serif)
    • без засечек (sans-serif)
    • рукописные (handwritten)
    • моноширинные (monospace)

    Группа 1 — с засечками (serif)

    Давайте посмотрим на следующую картинку:

    Слева мы видим шрифт без засечек, справа — с засечками.

    Шрифты с засечками по-английски называются «serif» (англ. «serif» — «засечка», «выступ», «штрих»). К таким шрифтам относятся, например:

    1. Times New Roman
    2. Georgia
    3. Cambria
    4. Verdena

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

    Группа 2 — шрифты без засечек (sans-serif)

    Шрифты без засечек (‘»sans-serif», от фр. «sans» — «без», и англ. «serif» — «засечка»).

    К шрифтам без засечек относятся, например:

    1. Arial
    2. Helvetica
    3. Tahoma

    Шрифты без засечек часто используются для заголовков.

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

    Группа 3 — рукописные шрифты (handwritten)

    Вот Вам пример рукописного шрифта:

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

    Группа 4 — моноширинные шрифты

    Моноширинные шрифты — это шрифты, в которых ширина всех букв одинаковая. 

    Например:

    ЭТО МОНОШИРИННЫЙ ТЕКСТ

    К моноширным шрифтам относятся, например:

    1. Courier New
    2. Lucida Console

    Моноширными шрифтами часто пишется программный код.

    Например, если Вы пользуетесь текстовым редактором Sublime Text, тогда знайте, что когда Вы набираете код в Sublime, Вы его набираете моноширным шрифтом 🙂

    Зачем front-end разработчику знать типы шрифтов?

    Действительно — зачем? Разве мы как разработчики не должны просто подключить шрифт, который указан в задании?

    Все дело в том, что может так получиться, что человек зашел к Вам на сайт, а при разработке сайта использовали такой шрифт, который по тем или иным причинам не установлен у него на компьютере. И все, беда… Чтобы перестраховаться от таких ситуаций необходимо использовать такое понятие как fonts fallback или просто «фоллбэк».

    Пример fallback:

    p{font-family:»Times New Roman», Georgia, serif;}

    p{font-family:»Times New Roman», Georgia, serif;}

    То есть этой строчкой мы указали, что:

    • Все параграфы должны отображаться шрифтом Times New Roman.
    • Если же вдруг у пользователя нет такого шрифта на компьютере, тогда все тексты параграфов необходимо отображать шрифтом Georgia.
    • Если же и этот шрифт не найдется на компьютере пользователя, тогда отображать любым стандартным шрифтом, относящимся к группе шрифтов с засечками (serif).

    Как видите, fallback читается браузером слева — направо. 

    ИТОГО: 

    Выделяют 4 группы шрифтов:

    • с засечками (serif)
    • без засечек (sans-serif)
    • рукописные (handwritten)
    • моноширинные (monospace)

    Front-end разработчику необходимо знать какие есть виды шрифтов, например, для написания fallback.

    Надеемся, данная статья была Вам полезна и теперь Вы знаете чуть больше о видах шрифтов 😉 Читайте дальше наши статьи или приходите учиться к нам на курсы по front-end. Детальнее о наших курсах у нас на сайте здесь.


    описание доступных общих имен, примеры применения

    Подробный разбор общих семейств шрифтов в CSS

    От автора: сегодня мы поговорим про общее семейство шрифтов CSS. Если у вас есть некий опыт написания CSS, вы наверняка делали что-то похожее и, вероятно, несколько раз в одном файле стилей.

     

    body { font-family: Arial, Helvetica, sans-serif; }

    body { font-family: Arial, Helvetica, sans-serif; }

    Единственное объявление в приведенном выше правиле — это то, что обычно называют стеком шрифтов. Эта строка определяет шрифт, который браузер должен использовать для указанного элемента (в данном случае для элемента body). Стек — «Arial, Helvetica, sans-serif». Это дает указание браузеру выполнить следующие действия:

    Подробный разбор общих семейств шрифтов в CSS

    JavaScript. Быстрый старт

    Изучите основы JavaScript на практическом примере по созданию веб-приложения

    Узнать подробнее

    Найти шрифт под названием «Arial», определенный в CSS, загруженном на страницу, используя @font-face или в операционной системе пользователя. Если этот шрифт найден, использовать его как шрифт для указанного элемента (ов).

    Если Arial не найден, найти шрифт под названием «Helvetica» в тех же местах. Если он найден, использовать его.

    Если Helvetica не найден, использовать любой шрифт в качестве шрифта sans-serif по умолчанию в браузере пользователя или операционной системе.

    Это довольно упрощенная версия того, что делает браузер. Последнее ключевое слово, используемое в этой строке CSS — это то, что называется общим именем семейства шрифтов. В статье MDN о font-family есть хорошее описание общих имен семейств и почему они используются: «Общие семейства шрифтов являются резервным механизмом, средством сохранения некоторых целей автора таблицы стилей, когда ни один из указанных шрифтов не доступен. Общие имена семейства — это ключевые слова, кавычки для них не нужны. Общее семейство шрифтов должно быть последним элементом в списке имен семейств шрифтов.»

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

    Доступные общие имена семейства

    Общее семейство шрифтов, согласно спецификации, может быть определено с помощью любого из следующих ключевых слов:

    serif

    sans-serif

    cursive

    fantasy

    monospace

    Семейство serif хорошо известно, но обратите внимание на то, что спецификация говорит: «Шрифты Serif представляют собой формальный стиль текста для скрипта. Это часто, но не всегда, глифы, которые имеют завершающие штрихи, свисающие или сужающиеся концы или имеют фактические засечные окончания (включая прямоугольные засечки)»

    Таким образом, здесь стиль шрифта является формальным, без специфических «засечек». Это интересный побочный момент, который я не понимал, пока не изучил эту статью.

    Для шрифтов sans-serif, спецификация говорит: «Символы в шрифтах sans-serif, поскольку термин используется в CSS, обычно имеют низкую контрастность (вертикальные и горизонтальные стержни имеют почти одинаковую толщину) и имеют конечные прямые окончания — без каких-либо свисающих элементов, пересечения центральной линии и других орнаментов.»

    Таким образом, в этом случае ожидается, что шрифт не будет иметь засечек.

    Моноширинные шрифты имеют более простое определение: «Единственным критерием моноширинного шрифта является то, что все глифы имеют одинаковую фиксированную ширину.»

    Хотя эти три семейства довольно распространены, вы, возможно, не слишком знакомы с cursive и fantasy.

    Что касается cursive, спецификация говорит: «Символы в cursive шрифтах обычно используют более неформальный стиль скрипта, и результат больше походит на рукописное перо или кисть, чем печатные письма.»

    Так что хорошо иметь в виду. Если есть конкретное место, где вы используете причудливый рукописный шрифт, ваш стек шрифтов может потенциально включать cursive в качестве конечной записи, если вы считаете, что cursive по умолчанию подходит как достойный резерв.

    Точно так же fantasy описывается как: «Прежде всего декоративные или выразительные шрифты, которые содержат декоративные или выразительные представления символов.»

    Некоторые примеры fantasy шрифтов показаны на следующем изображении, взятом из спецификации:

    Подробный разбор общих семейств шрифтов в CSS

    Я ценю знание того, что fantasy и cursive существуют как общие семейства, потому что я всегда использовал serif и sans-serif в качестве моей общей резервной копии для большинства стеков шрифтов, которые не были monospace. Конечно, не всегда можно использовать эти общие шрифты, если вас не устраивает потенциальный результат, о котором я расскажу ниже.

    Откуда берутся общие шрифты?

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

    Как вы, вероятно, знаете, следующий CSS отлично работает:

    body { font-family: monospace; }

    body {

      font-family: monospace;

    }

    В приведенном выше коде я не использую стек; Я говорю браузеру использовать универсальный моноширинный шрифт как единственный вариант шрифта. Это прекрасно, хотя это далеко не идеально.

    monospace значение не определяет какой-либо встроенный шрифт, доступ к которому имеет браузер, а скорее указывает на определенный шрифт в системе пользователя. Фактически, браузер имеет настройки по умолчанию для определения общих категорий шрифтов, и большинство из них могут быть изменены в вашем браузере.

    В Chrome пользователь может это сделать, выбрав «Настройки — Внешний вид» — «Настроить шрифты». Там пользователь увидит следующие варианты:

    Подробный разбор общих семейств шрифтов в CSS

    Подробный разбор общих семейств шрифтов в CSS

    JavaScript. Быстрый старт

    Изучите основы JavaScript на практическом примере по созданию веб-приложения

    Узнать подробнее

    Как видно, Chrome позволяет пользователю изменять шрифт по умолчанию для трех общих категорий шрифтов: serif, sans-serif и monospace (т.е. фиксированная ширина). Как видно из изображения, на моей машине с Windows я заменил шрифт с засечками на Georgia и моноширинный на Consolas.

    У Firefox есть аналогичная опция в настройках (Перейти к: Параметры — Язык и внешний вид — Шрифты и цвета — Дополнительно):

    Подробный разбор общих семейств шрифтов в CSS

    Как и в Chrome, пользовательский интерфейс Firefox не позволяет вам изменять шрифт по умолчанию для fantasy или cursive. Однако Firefox позволяет вам изменить любой из них через about:config. Вы можете получить к нему доступ, введя about:config в адресной строке и принимая странное сообщение «Это может аннулировать вашу гарантию!». Как только вы попадете на экран с настройками, вы можете найти строку font.name-list.cursive в поиска, и вы увидите следующее:

    Подробный разбор общих семейств шрифтов в CSS

    Эти значения определяют cursive настройки шрифта для разных наборов символов. Для английских пользователей я считаю, что единственное, что нужно изменить, это font.name-list.cursive.x-western. Пользователь может установить это значение для имени любого допустимого шрифта, установленного в операционной системе. Если указанный шрифт не найден, браузер будет использовать шрифт по умолчанию (не стандартный cursive, а шрифт по умолчанию).

    Согласно одному старому посту, Firefox использовал параметр в своей конфигурации для определения шрифта fantasy по умолчанию. Но я не вижу способа сделать это в последней версии Firefox.

    Что касается IE11 и Edge, единственный способ, с помощью которого я мог бы изменить шрифт по умолчанию в Edge — это войти в настройку «Свойства обозревателя» на панели управления Windows. Оттуда вы можете внести некоторые изменения в браузере, используя разделы «Шрифты» и «Доступность» на вкладке «Общие». Но я не вижу способа изменить какие-либо общие категории шрифтов — даже serif, sans-serif или monospace, что немного раздражает. Поэтому я, скорее всего, не воспользуюсь таким браузером.

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

    Какие общие шрифты по умолчанию?

    В зависимости от ОС пользователя, вы обычно получаете некоторые довольно стандартные и часто нежелательные параметры при использовании общих ключевых слов. Опять же, имейте в виду, что общие ключевые слова используются только в том случае, если первые два или более шрифта в стеке CSS-шрифтов недоступны, что редко. Так что это обычно не является серьезной проблемой.

    Обычно на ПК общие шрифты могут выглядеть так:

    serif — Times New Roman

    sans-serif — Arial

    monospace — Курьер New

    cursive — Comic Sans MS (да, действительно)

    fantasy – Impact

    system-ui – Segoe UI

    На моей машине Mac есть следующее (вы можете получить несколько разных результатов):

    serif — Times

    sans-serif — Helvetica

    monospace — Courier

    cursive — Apple Chancery

    fantasy — Papyrus

    system-ui — .SF NS Text

    Как видно, шрифты, которые эти общие ключевые слова указывают по умолчанию, невелики (особенно в Windows). Фактически, из-за того, что Comic Sans MS является стандартным курсорным шрифтом на большинстве машин Windows, я бы сказал, что довольно сложно использовать cursive в качестве ключевого слова generic. К сожалению, кажется, что не так много cursive шрифтов, которые являются общими для Windows и Mac, поэтому работать с резервными шрифтами на основе cursive непросто. Но опять же, это, вероятно, не так уж важно, если ваш основной выбор шрифтов является надежным.

    Новые общие имена шрифтов в CSS Fonts Level 4

    Вскоре CSS Fonts Module Level 4 введет следующие новые дополнения к общим категориям шрифтов:

    system-ui — Спецификация объясняет: «Это семейство типичных шрифтов предназначено, чтобы позволить текстовому рендерингу с шрифтом пользовательского интерфейса по умолчанию на платформе, на которой работает UA … Целью system-ui является разрешить веб-контенту интегрироваться с внешним видом родного приложения». Поддерживается в браузерах WebKit.

    emoji — Предназначен для использования с символами emoji. Firefox поддерживает это ключевое слово, и вы можете определить стандартный font.name-list.emoji по умолчанию, используя font.name-list.emoji в config.

    math — Предназначен для использования с математическими выражениями.

    fangsong — Используется для песенных шрифтов на китайском языке.

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

    Заключение

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

    Но, как и любая технология веб-разработки, нужно хорошо знать все эти особенности CSS. Если у вас есть что добавить, сообщите мне, и я обновлю статью.

    Автор: Louis Lazaris

    Источник: https://www.impressivewebs.com/

    Редакция: Команда webformyself.

    Подробный разбор общих семейств шрифтов в CSS

    JavaScript. Быстрый старт

    Изучите основы JavaScript на практическом примере по созданию веб-приложения

    Узнать подробнее Подробный разбор общих семейств шрифтов в CSS

    PSD to HTML

    Верстка сайта на HTML5 и CSS3 с нуля

    Смотреть

    Свойства шрифтов в CSS | CSS

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

    В файле CSS вы можете настроить несколько свойств шрифта: font-family, font-size, font-style. Это наиболее часто используемые свойства шрифта:

    С помощью свойства font-family можно задать семейство, которым будет отображаться CSS жирный шрифт:

    body {
	 font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
 }
 p {
	 font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida 	Typewriter", monospace;
 }

    Результат:


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

    Свойство font-size предназначено для изменения размера шрифта. Вы можете использовать единицы измерения CSS, такие как пиксели, em и проценты:


    Можно установить значение font-size в абсолютных и относительных единицах измерения. Абсолютные единицы задают фиксированный CSS размер шрифта, относительные — задают размер в зависимости от размеров окружающих элементов:

    Пиксели (px) — это наиболее часто используемые единицы измерения. Но если вы используете em, то это может помочь избежать некоторых проблем при изменении размеров элементов в окне просмотра:

    Em связаны с текущим размером шрифта браузера. 1em равен текущему значению размера шрифта, установленному в браузере. Если сравнивать с пикселями, то вы можете вычислить значение em по следующей формуле: pixels/16=em:

    Также можно задать размер CSS шрифта, используя процентные значения. font-size:100%; означает, что шрифт использует текущий размер шрифта браузера. Для увеличения размера нужно задать большее процентное значение. Аналогично, если нужно уменьшить размер шрифта, вы можете уменьшить процентное значение:

    Приведенный выше код увеличивает размер шрифта в два раза по сравнению с текущим размером, установленным в браузере:

    Этот код уменьшает размер шрифта CSS наполовину по сравнению с текущим размером шрифта браузера:

    В CSS предусмотрены два значения для свойства font-style — italic и oblique:

    p {font-style:italic;}
	h2{font-style:oblique;}

    Если нужно вывести жирный шрифт, то можете использовать свойство CSS font weight:

    Значения свойства font-weight: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900:

    p{font-weight:bolder;} 
	p{font-weight:500;}

    Свойство font-variant используется, чтобы преобразовать все строчные буквы в заглавные. При этом преобразованные заглавные буквы будут выводиться меньшим шрифтом, чем оригинальные заглавные буквы в документе:

    p{ font-variant:small-caps;}

    В следующем коде использовано большинство описанных выше свойств шрифтов в CSS:

    <html>
<head>
	<style type="text/css">
		body {
			font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
		}
		p.size{ font-size:20px;}
		p.percentage{ font-size:80%;}
		p.style{ font-style:italic; }
		p.bold { font-weight:bold; }
		p.variant { font-variant:small-caps; }
	</style>
</head>
<body>
	<p>This paragraph displays in font size 20</p>
	<p>This paragraph displays in font size smaller as 80%</p>
	<p>This paragraph displays in font style as Italics</p>
	<p>This paragraph displays BOLD letters</p>
	<p>This paragraph change small to capital letters</p>
</body>
</html>

    Результат:

    Данная публикация представляет собой перевод статьи «CSS font properties» , подготовленной дружной командой проекта Интернет-технологии.ру

    Свойство font-family, семейство шрифта — Оформление текста — HTML Academy

    HTML

    <!DOCTYPE html> <html lang=»ru»> <head> <meta charset=»utf-8″> <title>Сайт начинающего верстальщика</title> <link rel=»stylesheet» href=»style.css»> </head> <body> <header> <h2>Сайт начинающего верстальщика</h2> </header> <main> <img src=»img/raccoon.svg» alt=»Аватарка»> <nav> <h3>Записи в блоге</h3> <ul> <li><a href=»day-1.html»>День первый. Как я забыл покормить кота</a></li> <li><a href=»day-2.html»>День второй. Хочу быть верстальщиком</a></li> <li><a href=»day-3.html»>День третий. Мой кот на меня обиделся</a></li> <li><a href=»day-4.html»>День четвёртый. Как я чуть не заболел</a></li> <li><a href=»day-5.html»>День пятый. Отдыхаю</a></li> <li><a href=»day-6.html»>День шестой. Как я ничего не понял, продолжение</a></li> <li><a href=»day-7.html»>День седьмой. Кекс выдал мне задание</a></li> <li><a href=»day-8.html»>День восьмой. Очень серьёзный</a></li> <li><a href=»day-9.html»>День девятый. Точнее ночь</a></li> <li><a href=»day-10.html»>День десятый. Подведение итогов</a></li> <li><a href=»day-11.html»>День одиннадцатый. Без фанатизма</a></li> <li><a href=»day-12.html»>День двенадцатый. Все любят печенье</a></li> <li><a href=»day-13.html»>День тринадцатый. Нашёл статью</a></li> <li><a href=»day-14.html»>День четырнадцатый. Новый формат</a></li> <li><a href=»day-15.html»>День пятнадцатый. Галерея селфи</a></li> </ul> </nav> <section> <p>Всем привет! Добро пожаловать на мой первый сайт. Ещё недавно я понятия не имел, кто такой верстальщик, а теперь я нашёл <a href=»https://htmlacademy.ru/courses»>интерактивные курсы по HTML и CSS</a> и поставил перед собой цель — стать им. У меня даже появился инструктор — Кекс, который не позволит мне расслабиться и будет следить за моими успехами.</p> <p>Моё первое задание — вести дневник и честно писать обо всех своих свершениях.</p> </section> <section> <h3>Навыки</h3> <dl> <dt>HTML</dt> <dd><div>60%</div></dd> <dt>CSS</dt> <dd><div>20%</div></dd> <dt>JS</dt> <dd><div>10%</div></dd> </dl> </section> </main> <footer> Подвал сайта </footer> </body> </html>

    CSS

    body { padding: 0 30px; font-size: 16px; line-height: 26px; font-family: «Arial», sans-serif; color: #222222; background: #ffffff url(«img/bg-page.png») no-repeat top center; } h2 { font-size: 24px; line-height: normal; } h3 { font-size: 20px; line-height: normal; } a { color: #0099ef; text-decoration: underline; } .page-title { font-size: 36px; line-height: 42px; } .avatar { border-radius: 50%; } .blog-navigation { margin-bottom: 30px; padding: 20px; color: #ffffff; background-color: #4470c4; border: 5px solid #2d508f; } .blog-navigation h3 { margin-top: 0; } .blog-navigation ul { padding-left: 0; list-style: none; } .blog-navigation li { margin-bottom: 5px; } .blog-navigation a { color: #ffffff; } .skills dd { margin: 0; margin-bottom: 10px; background-color: #e8e8e8; } .skills-level { font-size: 12px; text-align: center; color: #ffffff; background-color: #4470c4; } .skills-level-ok { background-color: #47bb52; } footer { margin-top: 30px; }

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

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