Fontline
css. все про шрифты

Главная

CSS (Cascading Style Sheets, каскадные таблицы стилей) – это формальный язык, разработанный с целью отображения внешнего вида документа, сформированного с применением языка разметки (HTML, XML, XHTML).

Шрифт в CSS — ээто источник, включающий зрительное понимание символов. На самом простом уровне он включает сведение, что сравнивает коды символов с фигурами, именуемые глифами, показывающие данные символы.

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

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

top

Свойство font-family. Семейство шрифта

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

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

В файле style.css задаётся общий шрифт для всех страниц сайта, а в теге, для выделения маленьких зон контента. 

    
p{
font-family: "Courier New";
}
В теге
<p style="font-family:courier,serif;">Текст </p>
top
top

Cвойство font-weight. Насыщенность шрифта

Свойство font-weight задаёт насыщенность шрифта. Распределение плотности так же зависит от количества уровней насыщенности, определенных в конкретном семействе шрифтов. Некоторые шрифты доступны только в нормальном или полужирном начертании.

normal — стандартное начертание. То же, что и 400.
bold — полужирное начертание. То же, что и 700.
lighter — изменяет начертание относительно насыщенности родительского элемента (сверхтонкое начертание).
bolder — изменяет начертание сравнительно с насыщенностью родительского элемента (сверхтонкое начертание).
100, 200, 300, 400, 500, 600, 700, 800, 900 — цифровые значения насыщенности шрифтов.
initial — определяет значение свойства в значение согласно умолчанию.
inherit — наследует значение свойства от родительского элемента.

    
   <style>
   h2 {
    font-weight: bold; /* Жирное начертание */
   }
   .select {
    color: red; /* Цвет текста */
    font-weight: 400; /* Нормальное начертание */
   }
  </style>
top
top

Cвойство font-style. Начертание шрифта

Свойство font-style предназначается с целью того, чтобы подобрать стиль начертания для шрифта. Различие среди курсива и наклонным начертанием заключается в том, что первый несколько меняет структуру символа, а второй является наклонным вариантом стандартного шрифта.

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

font-style 
    
   p {
    font-family: Impact, sans-serif; /* Шрифт без засечек */
    font-style: oblique; /* Наклонное начертание */
   }
top
top

Свойство font-stretch. Ширина шрифта

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

ultra-condensed — наиболее сжатый шрифт.
extra-condensed — более сжатый шрифт.
condensed — сжатый шрифт.
semi-condensed — немного сжатый шрифт.
normal — значение по умолчанию.
semi-expanded — немного расширенный шрифт.
expanded — расширенный шрифт.
extra-expanded — более расширенный шрифт.
ultra-expanded — наиболее расширенный шрифт.
initial — определяет значение свойства в значение по умолчанию.
inherit — наследует значение свойства от родительского элемента.

    
   <p>
        <span style="font-stretch:semi-condensed">B</span>
  </p>
top
top

Свойство font-size. Размер шрифта

Определяет размер шрифта элемента. Размер способен определяться некоторыми способами:

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

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

font-style

Правильнее применять только три единицы измерения:
pt – с целью "фиксированного" дизайна сайта;
% – с целью "резинового" дизайна;
em – с целью пропорционального изменения размера;
За 100% принимается размер шрифта родительского элемента. Отрицательные значения не допускаются. 

    
  h2 {
    font-family: Impact, sans-serif; /* Гарнитура текста */
    font-size: 180%; /* Размер шрифта в процентах */
   }
top
top

Свойство font-variant. Вариант шрифта

Свойство font-variant указывает, должен ли текст быть выведен в капители. Капитель – изменения символов, когда все символы становяться прописными уменьшенного размера.

font-variant

normal – значение по умолчанию, сохраняет регистр символов исходным.
small-caps – меняет символы на заглавные уменьшенного размера. 


<style>

   h2 {
    font-variant: small-caps; /* Устанавливаем капитель для второго заголовка */
   }

  </style>
top
top

Свойство font. Сокращенная запись свойств шрифта

Сокращённая форма записи свойств шрифта, указывается только font-size и font-family. Прочие свойства шрифта используются при желании. Существуют ключевые слова, которые можно использовать: caption, icon, menu, message-box, small-caption, status-bar. 


     font: 70% sans-serif;

Следующие значения относятся к системным шрифтам:
caption — шрифт, что применяется с целью управления элементов с субтитрами.
icon — шрифт, что применяется с целью обозначения значков.
menu — шрифт, что применяется в меню.
message-box — шрифт, что применяется в диалоговых окнах.
small-caption — шрифт, что применяется с целью маркировки подписи элементов управления.
status-bar — шрифт, что применяется в строке состояния окна.

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


    font: menu; /* применяется с целью настройки шрифта системных меню */
    font: large menu; /* применяется семейство шрифтов под названием "menu" */
top
top

Стандартные шрифты

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

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

Семейство sans-serif — шрифты без засечек

Arial
Tahoma
Verdana
Impact

font-variant

Семейство serif — шрифты с засечками

Times New Roman
Georgia
Garamond
Century

font-variant

Семейство monospace — моноширинные шрифты

Courier New
Lucida Console
Consolas

font-variant

Семейство cursive — курсивные шрифты

Сomic Sans MS
Monotype Corsiva
Mistral

font-variant
top
top

Вопросы

Здесь вы можете задать интересующие Вас вопросы по поводу шрифтов css. И мы обязательно ответим.

Контакты

Гавришева Алина
Email alina.havrysheva@nure.ua
Facebook Алина Гавришева

top