Pre css font family

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

Font-family

Гарнитура шрифта. Включает себя наименование шрифта или его стиль (семью), или и то, и другое вместе. Записывается этот атрибут так:

serif — шрифт типа Times New Roman, пропорциональный, с засечками.
sans-serif — шрифт типа Arial, попрорциональный, рубленый.
cursive — тип Calligraph, имитирующий рукпописный текст, наклонный.
monospace — моноширинный шрифт, как Courier New, например.
fantasy — шрифт наподобие Comic Sans.

Сейчас даже на системах Linux чаще всего стоят шрифты, аналогичные шрифтам Windows (и чаще всего с такими же именами). Но все равно, всегда предпочтительней указывать дополнительно generic-family шрифта.

Font-Style

Начертание шрифта. Вообще говоря, бывает трех типов — normal, italic, oblique. Но разницу между italic и oblique я так и не увидел. Первый (normal) дает нам прямой текст, а два остальных — наклонный (курсивный). Записывается это дело так:

Font-Variant

На мой взгляд, довольно ненужный атрибут, обозначающий приведение текста по высоте — обычный (прописные и строчные буквы) или smallcaps (строчные буквы как малые прописные). Записывается так:

. Председатель призвал зал к тишине. «А теперь. Выступит заведующий Транспортным отделом»
. Председатель призвал зал к тишине. «А теперь. Выступит заведующий Транспортным отделом»

Font-Weight

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

Font-Size

Нотация сильно смахивает на набор одежды для всех весовых категорий, от сверхлайтов до супертяжей, ну да и пусть. Правда, по точности размеров на разных браузерах ситуация сравнима с замечательными размерами изделий китайских рукотворных швейных мастерских. Может подойти любой — от S до XXL. Ну, я отвлекся. Так вот. Другие варианты

h2 /* заголовок в полтора раза выше стандартного размера */ div /* раздел чуть меньше */ div /* раздел чуть больше */ li /* элемент списка ровно в 12 пикселей */ p /* параграф размером ровно 5 ёкселей ;) */

Пару слов о «ёкселях». Это такой размер, где каждый юнит — высота буквы ‘x’. Подробнее о размерах будет рассказано позднее, будут приведены все возможные примеры разнообразных размеров. А пока — как выглядит параграф высотой в пять этих самых exелей.

Как видно, один ёксель — не так уж и мало. По сравнению с пикселем.

Настало время нашим изысканиям подвести итог. Рассмотрим последний атрибут и — спать.

Font

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

/* font: [ font-style | font-variant | font-weight | font-size font-family] */ span i b div

Первый пример: font: italic small-caps bold x-small «Arial Narrow» Arial sans-serif
Второй пример

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

Источник

HTML тег

Содержимое тега отображается в браузере моноширинным шрифтом (шрифт, в котором все знаки имеют одинаковую ширину).

В тег можно вкладывать любые элементы за исключением тегов , , , , и .

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

Синтаксис

Тег

парный, содержимое пишется между открывающим (

) и закрывающим (

) тегами.

Пример

html> html> head> title>Заголовок окна веб-страницы title> head> body> pre>Крошка сын к отцу пришёл, и спросила кроха: — Что такое хорошо и что такое плохо? — pre> body> html>

Результат

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

Пример

html> html> head> title>Заголовок окна веб-страницы title> head> body> pre> code> body < color:orange; >code> pre> body> html>

Результат

Атрибуты

Атрибут	Значение	Описание
width	number	Задает максимальное количество символов в строке. Не поддерживается в HTML5.

Тег поддерживает также глобальные атрибуты и атрибуты событий.

Как добавить стиль к тегу ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега :

CSS свойство font-style задает стиль шрифта: normal | italic | oblique | initial | inherit
CSS свойство font-family создает приоритетный список названий семейства шрифтов и/или общее имя шрифтов для выбранных элементов.
CSS свойство font-size задает размер щрифта.
CSS свойство font-weight устанавливает насыщенность шрифта.
CSS свойство text-transform задает регистр текста (заглавные или строчные буквы).
CSS свойство text-decoration устанавливает оформление текста. Оно является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.

Стили форматирования текста для тега :

CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
CSS свойство word-break указывает перенос строки.

CSS свойство text-shadow добавляет тень к тексту.
CSS свойство text-align-last выравнивает последнюю строку текста.
CSS свойство line-height устанавливает межстрочный интервал.
CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
CSS свойство word-spacing устанавливает расстояние между словами в тексте.

Источник

Какие единицы измерения CSS существуют

Как устроено свойство font-size (размер шрифта) в CSS

font-size наследуется по всему дереву документа
Если нигде не было определено свойство font-size, то значение единичного em будет равно 16px, которое является значением по умолчанию

Подробнее о единицах размера и об их применении для шрифтов на сайте Консорциума Всемирной паутины (по-русски).

Использование внешних шрифтов

Для выбора и подключения внешнего шрифта зайти на сайт fonts.google.com. На нем свободно доступно более 900 шрифтов.
Не для всех шрифтов есть кириллическое написание. Поэтому, на Google Fonts необходимо указать язык шрифта: выбрать Cyrillic.
Для выбора шрифта нужно нажать на знак добавления "+" в верхнем правом углу блока шрифта. Появится черная полоса снизу с указанием количества выбранных шрифтов. По клику полоса раскрывается, показывая два блока кода.
Первый блок — тег . Вставить в «голову» (тег ) html-файла.
Второй блок – правила css (свойство css font-family и значение, в котором указано название шрифта и его семейство) для использования выбранных шрифтов. Вставить в блок объявлений нужного селектора.
Альтернатива – скачать шрифт с Font squirrel, справа в разделе Languages выбрать Cyrillic, скачать (форматы файлов ttf, otf, woff, svg) и подключить с помощью правила @font-face, рецепт.

Переносы строк и тег pre

Для сохранения переносов строк используется тег или свойство white-space: pre

Для тега pre по умолчанию установлен моноширинный шрифт: font-family: monospace.

Примеры

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

Его пример другим наука; Но, боже мой, какая скука С больным сидеть и день и ночь, Не отходя ни шагу прочь!

Какое низкое коварство Полуживого забавлять, Ему подушки поправлять, Печально подносить лекарство, Вздыхать и думать про себя: Когда же черт возьмет тебя!»

Шрифты для латинского алфавита

Dancing+Script. Minus, dolore unde laborum ab ut quasi nihil recusandae error, laboriosam optio omnis nesciunt explicabo deleniti reprehenderit in excepturi adipisci expedita et animi neque assumenda veniam at molestias numquam.

Calistoga. Quisquam ullam fugiat pariatur dolore assumenda deserunt minima mollitia. Recusandae vero tempora id.

Odibee+Sans. Tempora beatae suscipit voluptatem libero, optio voluptatum quod, cumque, asperiores sit quia iusto corrupti officiis eaque animi nemo sint?

Caveat. Ullam doloribus cupiditate soluta, facere, nulla at quas unde magnam perferendis molestias ex quisquam quia!

Ссылки

безопасные шрифты, сочетание шрифтов

Распространенные шрифты: примеры

Семейства и стили шрифтов на сайте Консорциума Всемирной паутины (по-русски)

CSS Fonts, W3C Recommendation

Понимание em-значений в CSS

Источник