Bookman old style bold italic - скачать шрифт бесплатно на allfont.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, а как альтернатива семейство моноширинных шрифтов (буквы имеют одинаковую ширину).

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

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

Рис. 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	Съешь же еще этих сочных мандаринов.

Как изменить начертание

Сначала нужно выделить слово, которое хотите изменить. Чтобы это сделать, наведите курсор в самое его начало. Затем нажмите левую кнопку мыши и, не отпуская ее, тяните в конец слова. Когда оно закрасится другим цветом (обычно черным или синим), значит, слово выделилось.

Затем нажмите на кнопку с нужным Вам начертанием.

Можно назначить сразу несколько видов начертания сразу.

Пример

Чтобы вернуть измененную часть текста (слово) в первоначальный вид, нужно выделить ее и щелкнуть по кнопке с назначенным начертанием. Скорее всего, нужная Вам кнопка будет другого цвета – желтого или оранжевого.

Кстати, заголовки в тексте принято выделять полужирным.

Шрифты, похожие на «Compact Bold Italic»

ER Kurier 1251 Bold Italic

Семейство: ER Kurier 1251
Начертание: Bold Italic
Насыщенность: 700
Версия: 4.1 Sun Sep 17 1995

Lazursky Bold Italic:001.001

Семейство: Lazursky:001.001
Начертание: Bold Italic
Насыщенность: 700
Версия: 001.001

a_CityNova BoldItalic

Семейство: a_CityNova
Начертание: Bold Italic
Насыщенность: 700
Версия: 01.03

Baskerville Bold It Win95BT

Семейство: Baskerville Win95BT
Начертание: Bold Italic
Насыщенность: 700
Версия: mfgpctt-v1.85 Fri Apr 14 15:40:52 EDT 1995

GetVoIP Grotesque Italic

Семейство: GetVoIP Groresque Family
Начертание: Bold Italic
Насыщенность: 700
Версия: 1.0; CC 3.0 BY-ND

Стиль, вариант, ширина и размер текста

Для установки размера текста используется свойство font-size. Размер указывается
в любых доступных в CSS единицах.
Также этому свойству можно установить значения с помощью специальных слов. Таких значений достаточно
много, вы можете найти их в справочниках. Использовать их неудобно,
обычных единиц измерения CSS вполне достаточно. Для примера создадим абзац и установим для него размер
текста:

Стиль:

78910

#fo
  {
  font-size: 30px;
  }

HTML код:

14	<p id="fo">Текст</p>

Стиль шрифта позваляет выделить текст курсивом. Для установки стиля шрифта используется свойство
font-style. Оно может принимать следующие значения:

font-style: normal — обычный шрифт (по умолчанию)

font-style: italic — курсивный шрифт

font-style: oblique — наклонный шрифт

font-style: inherit — значение принимается от родительского элемента

У одних шрифтов стиль italic и oblique выглядит
одинаково, у других шрифтов по-разному.

Установим созданному абзацу стиль шрифта. Для этого добавим селектору #fo свойство
font-style:

10	font-style: italic;

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

font-variant: normal — нормальный шрифт (по умолчанию)

font-variant: small-caps — прописные буквы выглядят как заглавные

font-variant: inherit — значение принимается от родительского элемента

Добавим селектору #fo свойство font-variant:

11	font-variant: small-caps;

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

font-weight: normal — обычный текст

font-weight: bold — жирный текст

font-weight: inherit — принимает значение от родительского элемента

Кроме того, ширину шрифта можно указать с помощью чисел от 100 до 900. Число 400 соответствует значению
normal, а число 700 значению bold. Но числа работают
не со всеми шрифтами, а также они не работают в некоторых браузерах, поэтому они редко используются.

Добавим селектору #fo свойство font-weight:

12	font-weight: bold;

Существует совойство font, в котором можно указать все перечисленные свойства,
а также шрифт. Значения свойств перечисляются через пробел в таком порядке: стиль, вариант, ширина,
размер, шрифт. Для примера добавим на страницу тэг <span> и установим для
него свойство font:

Стиль:

14151617

#s1
  {
  font: italic small-caps bold 30px Arial;
  }

HTML код:

22	<span id="s1">Текст</span>

Если какое-то из свойств не указано, то используется значение по умолчанию. Но размер и
шрифт нужно указывать обязательно. При указании шрифта, так же, как и для свойства
font-family, можно перечислить несколько шрифтов через запятую. Добавим на страницу
ещё один тег <span> и установим ему свойство font,
но по-другому:

Стиль:

18192021

#s2
  {
  font: 20px Tahoma, Verdana, sans-serif;
  }

HTML код:

27	<span id="s2">Текст</span>

Свойства font-weight, font-style, text-decoration и другие

С помощью свойства стилей font-weight задают «жирность» шрифта. Синтаксис:

font-weight: normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900

В качестве значения свойства может использоваться одно из семи числовых значений от 100 до 900, либо одно из именованных normal, bold, bolder, lighter. Значение normal соответствует 400, а bold — 7000. Но на практике большинство браузеров не поддерживают атрибут font-weight в полной мере. Поэтому все значения, которые меньше 400 будут соответствовать normal, а все, что больше bold. Причем значения bolder и lighter не работают.

Пример использования:

em { font-weight: bold; }

Свойство CSS font-style задает начертание шрифта. Для него доступны три значения: normal, italic и oblique. Но на практике используют только первые два, где «normal» устанавливает нормальное начертание шрифта, а значение «italic» заставляет браузер выводить текст курсивным начертанием.

С помощью свойства text-decoration можно задавать различные украшательства тексту, такие как подчеркивание текста или зачеркивание:

text-decoration: none|underline|overline|line-through|blink

Для этого атрибута доступны пять значений:

none — отменяет все эффекты, в том числе отменяет подчеркивание у ссылок, которое задано по умолчанию;
underline — устанавливает подчеркнутые текст;
overline — «надчеркивает» текст, то есть проводит линию над текстом;
line-through — зачеркивает текст;
blink — устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду исчезает, потом вновь появляется на прежнем месте. Это значение в настоящее время не поддерживается браузерами и осуждается в CSS3.

По умолчанию, для большинства элементов текст выводится без эффектов. Но некоторые html элементы отображают текст с подчеркиванием, в частности гиперссылки (тег a).

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

Нюансом свойства text-decoration является то, что для него можно указать сразу несколько значений:

text-decoration:underline overline line-through;

Результат будет такой:

перечеркнутый подчеркнутый и надчеркнутый текст!

Свойство стиля text-transform позволяет задавать регистр символов текста:

text-transform: capitalize|uppercase|lowercase|none

Свойство может иметь одно из четырех значений:

capitalize — преобразовывает к верхнему регистру первую букву каждого слова;
uppercase — текст в верхнем регистре;
lowercase — текст в нижнем регистре;
none — не меняет регистр символов.

Для увеличения и уменьшения расстояния между строками текста используется атрибут line-height. В качестве значения можно задавать как абсолютную так и относительную величину расстояния, указав соответствующую единицу измерения (px, pt, em и др.). В случае отсутствия единицы измерения указанное значение воспринимается браузером как множитель. Например, значение 1.5 устанавливает полуторный междустрочный интервал:

p { line-height: 1.5 }

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

em { letter-spacing: 5px; }

Аналогичный атрибут word-spacing задает дополнительное расстояние между словами текста:

h1 { word-spacing: 5px }

Ну и напоследок необходимо рассмотреть свойство стиля font, позволяющее задавать сразу несколько параметров для шрифта. Синтаксис:

font: font-size font-family

Обязательными параметрами являются только размер шрифта и его имя, остальные параметры могут отсутствовать.

Например, чтобы задать для текста абзацев шрифт «Times New Roman» размером 10 пунктов, достаточно написать следующее правило CSS:

p { font: 10pt «Times New Roman» }

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

p { font: italic 12px sans-serif }

Гарнитура шрифта

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

Лингвистически слова «гарнитура» и «гарнитур» похожи. Гарнитур означает набор предметов, имеющих схожее назначение, например, мебельный гарнитур, ювелирный гарнитур и т.п. Также и гарнитура объединяет набор шрифтов для вывода текста на экран или на принтер. Все предметы из гарнитура, также как все шрифты одной гарнитуры, выполнены в одном стиле, имеют единое художественное решение.

Каждая гарнитура имеет свое имя, например, Times New Roman, Courier New. Есть гарнитуры со специальными символами, например, Symbol и Wingdings.

В названиях компьютерных шрифтов русские буквы не используются. Вместо этого применяется латинский алфавит, например, «Baltica», «Svetlana» (это транслитерация, когда русские названия пишутся английскими буквами). Также возможен английский перевод русских названий шрифтов, например, «Schoolbook». Шрифты, которые пришли к нам с Запада, сохраняют свои названия, например, шрифт Garamond.

Слово «гарнитура» обычно опускается. Как правило, просто говорят «выберите шрифт Arial» или «документ набран шрифтом Times New Roman». Также обычно упрощают и вместо «гарнитура», либо «имя гарнитуры» говорят «имя шрифта».

CSS шрифт

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

Тип шрифта

Тип шрифта устанавливается с помощью font-family: value, с конкретным названием шрифта (например, Verdana) или одним из следующих слов — категориями шрифта:

serif — шрифты с засечками, например Times New Roman.
sans-serif — шрифты без засечек, например Arial.
monospace — шрифты, в которых все символы занимают одинаковую ширину, например Courier New.

Когда вы выбираете serif, sans-serif или monospace, браузер автоматически выбирает определенный тип шрифта из указанной категории.

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

Если у пользователя не установлен первый указанный шрифт, браузер использует второй шрифт, если он не установлен, третий и т. д. Если ни один из указанных типов шрифтов не установлен, браузер будет использовать любой из шрифтов по умолчанию, которые являются универсальными и установлены почти на всех компьютерах (Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana).

Размер шрифта

Размер шрифта (размер текста) устанавливается с помощью font-size, например:

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

В качестве основы берется размер родительского элемента, приравненный к среднему. Относительный размер шрифта также может быть указан с словами larger (больше) или smaller (меньше).

Толщина шрифта

Толщина шрифта указывается с помощью font-weight, а для значений можно использовать:

числа от 100 до 900, кратные 100 (100, 200, 300 и т.д.). 100 соответствует самой маленькой толщине шрифта, а 900 — самой большой;
слова bold (соответствует числу 700), normal (эквивалентно 400) — значение по умолчанию, bolder и lighter — соответственно большей и меньшей толщины шрифта относительно элемента-родителя.

Стиль шрифта

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

На месте italic можно использовать normal (обычный текст) или oblique — шрифты, которые поддерживают наклонные символы. На практике, italic и oblique выглядят одинаково.

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

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

Использование диалогового окна Шрифт

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

Выберите в меню Формат (Format) команду Шрифт (Font)
Щелкните правой кнопкой мыши на рабочей области страницы и в появившемся на экране контекстном меню выберите команду Шрифт (Font)
Нажмите комбинацию клавиш <Alt>+<Enter>

Рис. 12.2. Вкладка Шрифт одноименного диалогового окна

Диалоговое окно содержит вкладки Шрифт (Font) и Межзнаковый интервал (Character Spacing). Назначение списков вкладки Шрифт приведено в табл. 12.1.

Список	Назначение
Шрифт (Font)	Шрифты, установленные на компьютере
Начертание (Font Style)	Начертание шрифтов. Список содержит следующие значения: Обычный (Regular) — используется для основного текста Курсив (Italic) — предназначен для выделения слов, заголовков Полужирный (Bold) — используется для выделения слов, заголовков Полужирный курсив (Bold Italic) — комбинированный стиль, сочетающий оба предыдущих
Размер (Size)	Размер шрифта (от 8 до 36 пт)
Цвет (Color)	Цвета для оформления текста

Таблица 12.1. Назначение списков вкладки Шрифт

Область Видоизменение (Effects) вкладки Шрифт содержит флажки, управляющие различными эффектами отображения шрифтов. Назначение данных флажков представлено в табл. 12.2.

Флажок	Назначение
подчеркнутый (Underline)	Текст подчеркнут сплошной линией
зачеркнутый (Strikethrough)	Текст перечеркнут сплошной линией
надчеркнутый (Overline)	Над текстом расположена линия
мерцание (Blink)	Мерцающий текст
надстрочный (Superscript)	Текст располагается по верхнему индексу
подстрочный (Subscript)	Текст располагается по нижнему индексу
малые прописные (Small Caps)	Текст отображается прописными буквами, имеющими размер строчных
все прописные (All caps)	Текст отображается только прописными буквами
первые прописные (Capitalize)	Все слова текста начинаются с прописной буквы
скрытый (Hidden)	Текст не появляется при печати
жирный (Strong)	Текст имеет полужирное начертание
курсив (Emphasis)	Текст отображается с эффектом выразительности (обычно шрифтом, имеющим начертание курсив)
пример (Sample)	Текст отображается шрифтом, напоминающим шрифт пишущей машинки (обычно моноширинный шрифт)
определение (Definition)	Текст отображается курсивом, используемым для выделения терминов
ссылка (Citation)	Текст отображается курсивом, используемым для выделения цитат
переменная (Variable)	Текст отображается курсивом, используемым для выделения переменных
клавиатура (Keyboard)	Отображает текст, вводимый пользователем
код (Code)	Текст отображается моноширинным шрифтом, используемым для написания кодов программ

Таблица 12.2. Назначение флажков вкладки Шрифт

Установленные вами параметры шрифта отображаются в разделе Образец (Preview) диалогового окна Шрифт. Таким образом, вы можете подбирать параметры и просматривать результат, не покидая диалогового окна.

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

Чтобы отформатировать символы с использованием диалогового окна Шрифт:

Выделите на Web-странице фрагмент текста, в котором хотите изменить форматирование символов.
Выберите в меню Формат (Format) команду Шрифт.
Из списка Шрифт выберите требуемый шрифт.
Используя список Начертание (Font Style), укажите начертание символов шрифта.
Выберите из предложенных вариантов списка Размер (Size) устраивающий вас размер шрифта.
Для применения к тексту эффекта установите соответствующий флажок в области Видоизменение (Effects).
Нажмите кнопку ОК. Диалоговое окно закроется.

Совет

Для применения форматирования сразу ко всему тексту Web-страницы выделите текст с помощью команды Выделить все (Select All) из меню Правка (Edit).

Можно ли добавить шрифт в Figma через браузер

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

Для выхода из проекта нажмите вверху на кнопку меню и выберите пункт Back to file.
Выберите свой никнейм в системе и нажмите кнопку Settings.
Внизу находим синюю кнопку Download и нажимаем её.
Подтверждаем загрузку и установку утилиты.
Открываем в браузере сайт со шрифтами, скачиваем их на ПК и устанавливаем. Запомните название, чтобы легче было найти его в списке.
Перезагружаем страницу с Фигмой, чтобы найти добавленный шрифт.
Нажимаем на кнопку с выбором шрифта и находим здесь тот, который вы только что установили на ПК. Чтобы быстрее найти его по названию, нажимайте на клавиатуре латинскую букву, с которой начинается название шрифта.

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

Начертание шрифта

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

стиль и
насыщенность шрифта.

Самыми распространенными стилями шрифтов являются прямой и курсив. Если пользователь термина «курсив» не знает, то упрощенно он говорит, что использует «штрих с наклоном».

Насыщенность отвечает за толщину штрихов символов. Обычно используют нормальное (обычное) и полужирное начертания. Последнее иногда еще упрощенно называют «толстый шрифт», если не знают терминов «полужирный» или «жирный».

Некоторые гарнитуры могут содержать шрифты светлой (thin), очень светлой (light), жирной (heavy) и сверхжирной (ultra heavy) насыщенности.

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

P.S. Рекомендую также прочитать:

Распечатать статью

Получайте актуальные статьи по компьютерной грамотности прямо на ваш почтовый ящик. Уже более 3.000 подписчиков

Важно: необходимо подтвердить свою подписку! В своей почте откройте письмо для активации и кликните по указанной там ссылке. Если письма нет, проверьте папку Спам