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


Содержание материала:

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

размер,
процент,
xx-small,x-small, small, medium, large, x-large, xx-large,
larger, smaller

список свойств шрифта, разделенных пробелами, в следующем порядке:
font-style,
font-variant,
font-weight,
font-size,
line-height,
font-family

Пример задания свойства font-family :

Пример задания стенографического свойства font :

CSS свойства для работы с текстом в HTML, изменение размера шрифта и прочее

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

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

Какие CSS свойства есть для работы с текстом в HTML? Самое главное – свойство font. Это универсальное свойство, позволяющее одновременно задать несколько характеристик для текста. Обязательными значениями данного свойства являются размер шрифта и его семейство, а остальные значения задаются при желании и являются необязательными. В общем виде свойство font можно записать следующим образом:

Но краткая запись может быть не всегда понятна, поэтому можно записать свойства по отдельности:

  • font-style – служит для задания стиля текста, возможные значения: normal, italic, oblique, inherit;
  • font-variant – служит для задания капители текста, определяет показ строчных букв. Можно сделать их прописными уменьшенного размера или оставить без изменений. Возможные значения: normal, small-caps, inherit;
  • font-weight – служит для установки насыщенности шрифта, значение устанавливается от 100 до 900. Возможные значения: bold, bolder, lighter, normal, 100, 200, 300, 400, 500, 600, 700, 800, 900;
  • font-size – служит для задания размера шрифта, он определяется как высота от базовой линии до верхней границы кегельной площадки. Возможные значения: em, ex, pt, px, %, inherit. А также значения можно писать таким образом: xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller;
  • line-height – служит для задания межстрочного интервала текста (интерлиньяжа), отсчет ведется от базовой линии шрифта. Возможные значения: em, ex, pt, px, %, normal, inherit;
  • font-family – служит для задания семейства шрифта, список шрифтов может включать 1 или более названий через запятую, лучше заключать название в одинарные или двойные кавычки. Возможные значения: название шрифта, inherit. В конце можно написать ключевое слово, описывающее тип шрифта — serif, sans-serif, cursive, fantasy, monospace;
  • font-stretch – служит для установки начертания шрифта: узкое, нормальное или широкое. Это позволяет уплотнять или расширять текст. Возможные значения: ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded, normal, inherit.

Еще есть и другие CSS свойства, которые также можно отнести к свойствам для работы с текстом: color – для задания цвета, text-shadow – для задания тени текста, text-transform – для преобразования текста в заглавные или прописные символы, letter-spacing – для задания интервала между символами, word-spacing — для задания интервала между словами, word-break и word-wrap — для задания способа переноса текста.

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

CSS свойства шрифтов.

Свойство font-family определяет название шрифта — Tahoma, Arial, Times New Roman и другие.

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

Tahoma — названия шрифта.

Свойство font-style определяет стиль шрифта.

italic, oblique — курсивный.

Свойство font-variant определяет стиль шрифта.

small-caps — малые прописные буквы.

Свойство font-weight определяет жирность символов шрифта.

bolder — более жирный.

lighter — менее жирный.

num — числовое значение кратное 100 (от 100 до 900).

Свойство font-size определяет размер шрифта.

num — число в известных единицах измерения.

larger — на 1 больше, чем окружающий текст.

smaller — на 1 меньше, чем окружающий текст.

xx-small, x-small, small, medium, large, x-large, xx- large — абсолютные значения.

Свойство font для задания одного из свойств.

value — использоваться значение любого вышеописанного свойства.

Свойство CSS font

Свойство CSS font отвечает за внешний вид текста (форматирование): размер шрифта, стиль шрифта, расстояние между строками, толщина линий.

Синтаксис CSS font

  • font-style — стиль шрифта:
    • normal — обычное начертание (по умолчанию)
    • italic — курсивный текст
    • oblique — наклонное текст (немного меньше, чем курсив)
    • inherit — применяется значение родительского элемента
  • font-variant — тип шрифта:
    • normal — обычное начертание (по умолчанию)
    • small-caps — весь текст выводится в виде маленьких прописных букв
    • inherit — применяется значение родительского элемента
  • font-weight — ширина шрифта (жирность). Можно задавать в цифрах (100, 200. 900) или в установленных константах:
    • normal — обычный размер шрифта (400)
    • bold — жирный размер (700)
    • bolder — увеличивает степень жирности
    • lighter — уменьшает степень жирности

    Более подробно читайте в статье: свойство font-weight. Также ознакомьтесь: какой выбрать шрифт для сайта »

  • font-family — семейство шрифта. Другими словами это название шрифта. Их очень много, перечислим лишь часто встречающиеся:
    • Ariel
    • Verdana
    • Times New Roman
    • Calibri
    • Georgia
    • Impact
  • font-size / line-height — размер шрифта и через слэш задается еще отступ между строками. Чаще всего записывается в абсолютных значениях (в px или pt).

Помимо этих значений font может принимать значения «константы»:

  • caption — шрифт для текста элементов форм (тег )
  • icon — шрифт из ярлыков иконок
  • menu — шрифт из меню
  • message-box — шрифт из диалоговых окон
  • small-caption — уменьшенный заголовочный шрифт
  • status-bar — шрифт из строки состояния

Примечание

Свойства font-style , font-variant , font-weight , font-size , line-height , font-family можно использовать отдельно (независимо) друг от друга.

CSS/Шрифты и текст

Шрифт и текст в CSS имеют следующие свойства.

Содержание

Шрифты [ править ]

font-family [ править ]

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

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

Существуют 5 семейств шрифтов:

  1. serif — шрифты с засечками
  2. sans-serif — шрифты без засечек
  3. monospace — моноширинные
  4. cursive — курсивные
  5. fantasy — декоративные

Пример, как выглядят такие шрифты:

serif sans-serif monospace cursive fantasy

font-style [ править ]

Существуют три значения этого свойства:

  1. normal — обычный (значение по умолчанию)
  2. italic — курсив
  3. oblique — наклонный

Браузеры последний стиль обычно отображают как курсивный

font-variant [ править ]

  1. normal — обычный (значение по умолчанию)
  2. small-caps — капитель, то есть все строчные символы становятся уменьшенными заглавными

font-weight [ править ]

Это свойство устанавливает вес (насыщенность) шрифта.

  1. 100
  2. 200
  3. 300
  4. 400 или normal (значение по умолчанию)
  5. 500
  6. 600
  7. 700 или bold
  8. 800
  9. 900

font-size [ править ]

Возможные значения этого свойства:

  1. абсолютные константы: xx-small, x-small, small, medium (значение по умолчанию), large, x-large, xx-large
  2. относительные константы: smaller, larger
  3. абсолютные и относительные единицы измерения CSS

line-height [ править ]

Межстрочный интервал, часто применяется вместе с font-size

  1. normal — нормальное значение (по умолчанию)
  2. number — число (больше либо равно 0), на которое умножается текущий размер шрифта
  3. length — фиксированное значение в единицах измерения CSS
  4. % — проценты от текущего размера шрифта

font [ править ]

Это сокращённая форма записи свойств шрифта. Необходимо лишь указать font-size и font-family. Остальные свойства шрифта указываются при желании

Также можно указывать ключевые слова: caption, icon, menu, message-box, small-caption, status-bar

web-шрифты [ править ]

Свойство, которое позволяет отображать на экране компьютера любой шрифт. Впервые появилось в CSS2. Используется правило @font-face

Шрифты бывают следующих типов:

  1. eot — embedded opentype (.eot)
  2. ttf — truetype (.ttf)
  3. otf — opentype (.ttf, .otf)
  4. svg — svg-шрифты (.svg, .svgz)
  5. woff — web open font format (.woff)

Текст [ править ]

text-align [ править ]

  1. left — по левому краю (значение по умолчанию)
  2. right — по правому краю
  3. center — по центру
  4. justify — по ширине

letter-spacing/word-spacing [ править ]

Интервал между буквами/словами

  1. normal — нормальное значение (по умолчанию)
  2. length — значение в единицах измерения CSS (допускаются отрицательные значения)

text-decoration [ править ]

  1. underline — подчёркнутый текст
  2. overline — линия над текстом
  3. line-through — перечёркнутый текст
  4. blink — мигающий текст
  5. none — отмена всех эффектов (значение по умолчанию)

text-indent [ править ]

Отступ первой строки

  1. length — фиксированное значение в единицах измерения CSS (значение по умолчанию равно 0)
  2. % — проценты от ширины строки

text-transform [ править ]

  1. none — нет трансформации (значение по умолчанию)
  2. uppercase — преобразование всех строчных символов в заглавные
  3. lowercase — преобразование всех заглавных символов в строчные
  4. capitalize — преобразование первой буквы каждого слова в заглавную

vertical-align [ править ]

Выравнивание элемента по вертикали

Применяется только к строчным элементам и к ячейкам таблицы

Возможные значения для строчных элементов:

  1. baseline — по базовой линии (значение по умолчанию)
  2. sub — нижний индекс
  3. super — верхний индекс
  4. top — верх элемента выравнивается с самым высоким элементом строки
  5. text-top — верх элемента выравнивается с верхом шрифта родительского элемента
  6. middle — по середине
  7. bottom — по нижней части
  8. text-bottom — низ элемента выравнивается с низом шрифта родительского элемента
  9. проценты
  10. величины CSS

Для ячеек таблицы:

  1. baseline — содержимое ячейки по базовой линии (значение по умолчанию)
  2. top — по верхнему краю
  3. bottom — по нижнему краю
  4. middle — по середине ячейки таблицы

Для строчных элементов это свойство выравнивает сам элемент, а не его содержимое. Для ячеек таблицы — наоборот

white-space [ править ]

Пробелы между словами

  1. normal — обычное поведение (значение по умолчанию)
  2. pre — пробелы и переносы учитываются
  3. nowrap — пробелы и переносы не учитываются
  4. pre-wrap — пробелы учитываются, текст переносится
  5. pre-line — пробелы не учитываются, текст переносится

text-shadow [ править ]

Добавление тени к тексту (CSS3)

  1. h-shadow — смещение тени по горизонтали
  2. v-shadow — смещение тени по вертикали
  3. blur — радиус размытия тени
  4. color — цвет тени
  5. none — нет тени (значение по умолчанию)


text-overflow [ править ]

Видимость текста, если он не влезает в ширину блока (CSS3)

  1. clip — текст обрезается по размеру блока (значение по умолчанию)
  2. ellipsis — текст обрезается с добавлением многоточия

Задание шрифтов в CSS с помощью свойств font

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

Рассмотрим каждое из этих свойств по отдельности

Свойство font-family

Дело в том что все шрифты делятся на семейства. Да и в переводе с английского font-family означает семейство шрифта. В основном в CSS используют три основных вида семейства, это — Serif, Sans-serif и Monospace .

  • Serif-это семейство шрифтов с засечками. Наиболее популярными шрифтами из этого семейства являются: «Times New Roman» и «New York».
  • Sans-serif-это семейство рубленных шрифтов, без всяких там засечек. Самыми популярными среди них являются такие шрифты, как Arial, Verdana, Geneva и Helvetica.
  • Monospace-семейство моноширинных шрифтов т.е. это шрифты с одинаковыми расстояниями между символами. Яркими представителями этого семейства являются: «Courier New» и Courier

Так как же используется свойство font-family? Да очень легко и просто. Например, для селекторов h1 и p мы можем прописать следующее:

А теперь по порядку. Для заголовка h1 будет использоваться шрифт «Times New Roman», если по каким либо причинам данный шрифт не установлен на компьютер, то браузер вместо него выберет любой шрифт доступный из данного семейства. Заметьте, что некоторые из названий шрифтов записываются в кавычках, так принято что если в названии шрифта более одного слова, то его заключают в кавычки.

Для селектора p я прописал два шрифта. По аналогии с селектором h1 не трудно догадаться, что для текста первым выбирается шрифт arial, если он не установлен, тогда следом за ним verdana. А если вдруг и такой шрифт не установлен на компьютере, то браузер выберет шрифт из семейства sans-serif

Свойство font-style

Font-style задаёт стиль шрифта. Это свойство может принимать всего три значения: normal, italic и oblique.

  • normal — обычный (этот стиль стоит по умолчанию);
  • italic — курсивный;
  • oblique — наклонный;

Применяется это свойство довольно часто. Я думаю у вас не должно возникнуть проблем с его применением:

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

Свойство font-variant в CSS

Свойство font-variant имеет всего два значения: normal, small-caps и выбирает вариант написания букв нижнего регистра.

  • normal — это значение стоит по умолчанию, буквы нижнего регистра будут отображаться обычным образом;
  • small-caps — буквы нижнего регистра будут отображаются, как уменьшенные заглавные

Свойство font-weight

Свойство font-weight имеет два основных значения:normal — обычный шрифт (стоит по умолчанию) и bold — жирный шрифт. Также можно использовать числовые значения: 100, 200, 300, 400, 500, 600, 700, 800, 900. Но использовать их я вам не рекомендую, так как они поддерживаются не всеми браузерами. Способ использования очень прост, его вы можете увидеть ниже:

Свойство font-size в CSS

Свойство font-size задаёт размер шрифта. Задаётся в основном с помощью относительных единиц. Например:

Свойство font

Это свойство используется для сокращенной записи. Порядок свойств, которые прописываются через пробел такой:
font-style_ font-variant_font-weight_font-size_font-family

Можно записать следующим образом:

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

В результате у вас должно получиться следующее:

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

Все права на сайт принадлежат Александру Побединскому.

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

Оформление шрифтов в CSS

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

Рассмотрим доступные свойства.

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

Позволяет объединить все свойства шрифта в одной строке и может тем самым сильно сократить код. Имеет следующую структуру:

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

Полезные ссылки:

  • Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
  • Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
  • Вёрстка сайта с нуля 2.0 — полноценный платный курс.

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

font-size

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

Имейте в виду, что установка размера шрифта 16px не делает каждую букву высотой 16px. Фактический размер каждой буквы зависит от используемого font-family .

font-style

Это свойство может сделать ваш текст курсивным:

Значение по умолчанию — font-style: normal .

Другое возможное значение oblique никогда не используется.

font-weight

Это свойство может сделать ваш текст жирным:

Значение по умолчанию — font-weight: normal .

В зависимости от используемого font-family , существует целый ряд насыщенности шрифта, доступных от 100 до 900:

Очень немногие шрифты предлагают все девять насыщенностей. Шрифт Exo является одним из них. Вы найдёте в основном 400 (нормальный) и 700 (жирный), а иногда 300 (лёгкий) и 500 (средний).

font-variant

Это свойство превратит ваш текст в капитель:

Значение по умолчанию — font-variant: normal .

Свойства CSS для шрифтов

Этот урок css посвятим css свойствам.

Из курса HTML мы знаем, что для того, чтобы сделать шрифт курсивом, необходимо применить тег или . Сделать шрифт курсивом можно и в таблице стилей, не используя тегов. Для этого абзацу, который мы хотим прописать курсивом, добавляем css свойство придающее шрифту курсив — font-style: со значением italic .

Давайте наш абзац из прошлого урока:

Теперь рассмотрим еще одно css свойство шрифта, позволяющее отображать весь текст абзаца заглавными буквами. Не большими (как при использовании регистра), а именно заглавными. Это свойство font-variant: со значением small-caps;

И еще один момент — это сокращенное указание css свойств. Вот в примере абзаца

можно записать сокращенное указание свойств. Три строки css свойств шрифта:

записываем одной строкой:

font: normal 16px Verdana;

Вначале пишем вес шрифта normal затем через пробел размер шрифта 16px и опять же через пробел какой шрифт — Verdana

font: normal 16px Verdana;

Вот таким способом мы три строки заменяем одной. Это применяется для сокращения таблицы стилей, если она занимает много места.

Каскадные таблицы стилей CSS советы & приёмы

Смотрите также указатель всех приёмов работы.

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

После цвета шрифт — возможно, важнейшее свойство страницы. На этой странице я не буду демонстрировать никаких «трюков», но покажу ряд вариаций шрифтов, допустимых в CSS.

Поскольку не все шрифты доступны на всех компьютерах (существуют тысячи шрифтов и большинство из них не бесплатны), CSS предусматривает резервную систему. Первым вы указываете шрифт, который хотели бы использовать. Затем следуют любые шрифты, которые вы могли бы использовать, если первый указанный шрифт не доступен. А закончить список вы должны типовым шрифтом, который имеет 5 видов: serif, sans-serif, monospace, cursive и fantasy.

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

Свойство стиля Описание свойства Значения Значение по умолчанию
font-family Гарнитура шрифта список имен шрифтов, перечисленных через запятую в порядке убывания предпочтения; список может заканчиваться одним из родовых имен:
serif (с засечками, «антиква»),
sans-serif (без засечек, «рубленый»),
cursive (курсив),
fantasy (аллегорический),
monospace (моноширинный)
font-size Размер шрифта medium
font-style Начертание шрифта normal, italic (курсив), oblique (наклонный) normal
font-weight Насыщенность шрифта число от 100 до 900 (кратное 100),
normal, bold, bolder, lighter
normal
font-variant Может задать вывод капителью (символами, похожими на прописные, но малого размера); капитель есть не во всяком шрифте normal, small-caps (капитель) normal
font-stretch Задание нормального, разреженных (expanded) или сжатых (condensed) начертаний из текущей гарнитуры шрифта normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded normal
font Стенографическое свойство для одновременного задания нескольких свойств шрифта
‘sans-serif’: обычные шрифты без засечек

Arial, sans-serif

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

Helvetica, sans-serif

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

Verdana, sans-serif

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

Trebuchet MS, sans-serif

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

Gill Sans, sans-serif

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

Noto Sans, sans-serif

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

Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif

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

Arial Narrow, sans-serif

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

sans-serif

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

‘serif’: обычные шрифты с засечками

Times, Times New Roman, serif

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

Georgia, serif

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

Palatino, URW Palladio L, serif

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

Bookman, URW Bookman L, serif

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

New Century Schoolbook, TeX Gyre Schola, serif

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

serif

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

‘monospace’: шрифты фиксированной ширины

Andale Mono, monospace

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

Courier New, monospace

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

Courier, monospace

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

FreeMono, monospace

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

DejaVu Sans Mono, monospace

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

monospace

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

‘cursive’: шрифты, имитирующие почерк

Comic Sans MS, Comic Sans, cursive

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

Bradley Hand, cursive

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

Brush Script MT, Brush Script Std, cursive

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

Snell Roundhand, cursive

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

URW Chancery L, cursive

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

cursive

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

‘fantasy’: декоративные шрифты, для названий и т.д..

Impact, fantasy

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

Luminari, fantasy

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

Marker Felt, fantasy

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

Trattatello, fantasy

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

fantasy

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

Стили шрифтов

Большинство шрифтов имеют разнообразные стили в пределах одного и того же шрифтового семейства. Обычно это жирный стиль (bold) или курсив (italic), часто встречается также стиль «жирный курсив» (bold italic), реже — капитель (малые прописные буквы — small-caps), а в ряде случаев — экстра-светлые/экстра-жирные или растянутые/сжатые версии.

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

правило

serif

sans-serif

Стили

font-style: normal

Съешь же…

Съешь же…

font-style: italic

Съешь же…

Съешь же…

font-style: oblique

Съешь же…

Съешь же…

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

font-weight: 100

Съешь же…

Съешь же…

font-weight: 200

Съешь же…

Съешь же…

font-weight: 300

Съешь же…

Съешь же…

font-weight: normal

Съешь же…

Съешь же…

font-weight: 500

Съешь же…

Съешь же…

font-weight: 600

Съешь же…

Съешь же…

font-weight: bold

Съешь же…

Съешь же…

font-weight: 800

Съешь же…

Съешь же…

font-weight: 900

Съешь же…

Съешь же…

Варианты

font-variant: normal

Съешь же…

Съешь же…

font-variant: small-caps

Съешь же…

Съешь же…

Растяжение

font-stretch: ultra-condensed

Съешь же…

Съешь же…

font-stretch: extra-condensed

Съешь же…

Съешь же…

font-stretch: condensed

Съешь же…

Съешь же…

font-stretch: semi-condensed

Съешь же…

Съешь же…

font-stretch: normal

Съешь же…

Съешь же…

font-stretch: semi-expanded

Съешь же…

Съешь же…

font-stretch: expanded

Съешь же…

Съешь же…

font-stretch: extra-expanded

Съешь же…

Съешь же…

font-stretch: ultra-expanded

Съешь же…

Съешь же…

Модуль «Шрифты» в CSS имеет больше свойств для указания специальных стилей (для шрифтов, которые поддерживают несколько вариантов), в частности, свойство font-variant имеет гораздо больше значений.

Навигация по сайту

Created 17 Jan 2001;
Last updated Вт 05 ноя 2020 19:12:56

Топ-пост этого месяца:  Топ плагинов jQuery. Фоновый слайдер jQuery Fullscreen Responsive Carousel Plugin
Добавить комментарий