Размер шрифта что. Единицы измерения размеров шрифтов CSS
Описание
Определяет размер шрифта элемента. Размер может быть установлен несколькими способами. Набор констант (xx-small , x-small , small , medium , large , x-large , xx-large ) задает размер, который называется абсолютным. По правде говоря, они не совсем абсолютны, поскольку зависят от настроек браузера и операционной системы.
Другой набор констант (larger , smaller ) устанавливает относительные размеры шрифта. Поскольку размер унаследован от родительского элемента, эти относительные размеры применяются к родительскому элементу, чтобы определить размер шрифта текущего элемента.
В конечном итоге, размер шрифта сильно зависит от значения свойства font-size у родителя элемента.
Сам размер шрифта определяется как высота от базовой линии до верхней границы кегельной площадки, как показано на рис. 1.
Рис. 1. Размер шрифта
Синтаксис
font-size: абсолютный размер | относительный размер | значение | проценты | inherit
Значения
Для задания абсолютного размера используются следующие значения: xx-small , x-small , small , medium , large , x-large , xx-large . Их соответствие с размером шрифта в HTML приведено в табл. 1.
Относительный размер шрифта задается значениями larger и smaller .
Также разрешается использовать любые допустимые единицы CSS: em (высота шрифта элемента), ex (высота символа х), пункты (pt ), пикселы (px ), проценты (% ) и др. За 100% берется размер шрифта родительского элемента. Отрицательные значения не допускаются.
Inherit Наследует значение родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
Duis te feugifacilisi
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Результат данного примера показан на рис. 1.
Рис. 2. Применение свойства font-size
Объектная модель
document.getElementById("elementID ").style.fontSize
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .
Дата введения 01.01.82
Настоящий стандарт устанавливает чертежные шрифты, наносимые на чертежи и другие технические документы всех отраслей промышленности и строительства.
1. ТЕРМИНЫ И ОПРЕДЕЛЕНИЯ
1.1. Размер шрифта h - величина, определенная высотой прописных букв в миллиметрах.1.2. Высота прописных букв h измеряется перпендикулярно к основанию строки.Высота строчных букв с определяется из отношения их высоты (без отростков k) к размеру шрифта h, например, с = 7/10 h (черт. 1 и 2).|
|
|
2. ТИПЫ И РАЗМЕРЫ ШРИФТА
2.1. Устанавливаются следующие типы шрифта:тип А без наклона (d = 1/14 h) с параметрами, приведенными в табл. 1;тип А с наклоном около 75° (d = 1/14 h) с параметрами, приведенными в табл. 1;тип Б без наклона (d = 1/10 h) с параметрами, приведенными в табл. 2;тип Б с наклоном около 75° (d = 1/10 h) с параметрами, приведенными в табл. 2.Таблица 1
Шрифт типа А (d = h/14)
|
Параметры шрифта |
Обозначение |
Относительный размер |
Размеры, мм |
|||||||
| Размер шрифта - | ||||||||||
| высота прописных букв | ||||||||||
| высота строчных букв | ||||||||||
| Расстояние между буквами | ||||||||||
| Толщина линий шрифта | ||||||||||
Таблица 2
Шрифт типа Б (d = h/10)
|
Параметры шрифта |
Обозначение |
Относительный размер |
Размеры, мм |
||||||||
| Размер шрифта - | |||||||||||
| высота прописных букв | |||||||||||
| высота строчных букв | |||||||||||
| Расстояние между буквами | |||||||||||
| Минимальный шаг строк (высота вспомогательной сетки) | |||||||||||
| Минимальное расстояние между словами | |||||||||||
| Толщина линий шрифта | |||||||||||
2.4. Предельные отклонения размеров букв и цифр ± 0,5 мм.
3. РУССКИЙ АЛФАВИТ (КИРИЛЛИЦА)
3.1. Шрифт типа А с наклоном приведен на черт. 5
3.2. Шрифт типа А без наклона приведен на черт. 6.
3.3. Шрифт типа Б с наклоном приведен на черт. 7.
3.4. Шрифт типа Б без наклона приведен на черт. 8.
4. ЛАТИНСКИЙ АЛФАВИТ
4.1. Шрифт типа А с наклоном приведен на черт. 9.
4.2. Шрифт типа А без наклона приведен на черт. 10.
4.3. Шрифт типа Б с наклоном приведен на черт. 11.
4.4. Шрифт типа Б без наклона приведен на черт. 12.
4.5. Виды, форма и расположение диакритических знаков для шрифтов типов А и Б без наклона приведены в справочном приложении.Диакритические знаки для шрифтов с наклоном следует выполнять по тем же правилам.
5. ГРЕЧЕСКИЙ АЛФАВИТ
5.1. Шрифт типа А с наклоном приведен на черт. 13.
5.2. Шрифт типа А без наклона приведен на черт. 14.
5.3. Шрифт типа Б с наклоном приведен на черт. 15.
5.4. Шрифт типа Б без наклона приведен на черт. 16.
5.5. Наименование букв греческого алфавита, приведенных на черт. 13 - 16:
6. АРАБСКИЕ И РИМСКИЕ ЦИФРЫ
6.1. Шрифт типа А приведен на черт. 17.
6.2. Шрифт типа Б приведен на черт. 18.
Примечания: 1. Римские цифры L , С, D , М следует выполнять по правилам латинского алфавита. 2. Римские цифры допускается ограничивать горизонтальными линиями.
7. ЗНАКИ
7.1. Шрифт типа А с наклоном приведен на черт. 19.
7.2. Шрифт типа А без наклона приведен на черт. 20.
7.3. Шрифт типа Б с наклоном приведен на черт. 21.
7.4. Шрифт типа Б без наклона приведен на черт. 22.
7.5. Наименования знаков приведены в табл. 3.
Таблица 3
|
Номера знаков на чертежах |
Наименование знаков |
Номера знаков на чертежах |
Наименование знаков |
| 1 | Точка | 25 | Процент |
| 2 | Двоеточие | 26 | Градус |
| 3 | Запятая | 27 | Минута |
| 4 | Точка с запятой | 28 | Секунда |
| 5 | Восклицательный знак | 29 | Параллельно |
| 6 | Вопросительный знак | 30 | Перпендикулярно |
| 7 | Кавычки | 31 | Угол |
| 8 | И | 32 | Уклон |
| 9 | Параграф | 33 | Конусность |
| 10 | Равенство | 34 | Квадрат |
| 11 | Величина после округления | 35 | Дуга |
| 12 | Соответствует | 36 | Диаметр |
| 13 | Асимптотически равно | 37 | Радикал |
| 14 | Приблизительно равно | 38 | Интеграл |
| 15 | Меньше | 39 | Бесконечность |
| 16 | Больше | 40 | Квадратные скобки |
| 17 и 17а | Меньше или равно | 41 | Круглые скобки |
| 18 и 18а | Больше или равно | 42 | Черта дроби |
| 19 | Плюс | 43 | Номер |
| 20 | Минус, тире | 44 | От... до |
| 21 | Плюс-минус | 45 | Знак подобия |
| 22,23 | Умножение | 46 | Звездочка |
| 24 | Деление |
8. ПРАВИЛА НАПИСАНИЯ ДРОБЕЙ, ПОКАЗАТЕЛЕЙ, ИНДЕКСОВ И ПРЕДЕЛЬНЫХ ОТКЛОНЕНИЙ
8.1. Дроби, показатели, индексы и предельные отклонения выполняются в соответствии с табл. 4 размером шрифта:на одну ступень меньшим, чем размер шрифта основной величины, к которой они приписываются;одинакового размера с размером шрифта основной величины.Таблица 4
|
Варианты выполнения |
Примеры выполнения |
||
|
основные величины |
дроби, показатели и т.п. |
||
| Размер шрифта на одну ступень меньше, чем размер основной величины |
|
||
|
|
|||
|
|
|||
| Размер шрифта такой же, как размер основной величины |
|
||
|
|
|||
ПРИЛОЖЕНИЕ
Справочное
ДИАКРИТИЧЕСКИЕ ЗНАКИ
Венгерский язык
Немецкий язык
Польский язык
Румынский язык
Чешский и словацкий язык
ИНФОРМАЦИОННЫЕ ДАННЫЕ
1. РАЗРАБОТАН И ВНЕСЕН Государственным комитетом СССР по стандартам2. УТВЕРЖДЕН И ВВЕДЕН В ДЕЙСТВИЕ Постановлением Государственного комитета СССР по стандартам от 28.03.81 № 15623. (Исключен, Изм. № 2)4. ВЗАМЕН ГОСТ 2.304-685. Издание (июль 2001 г.) с Изменением № 1, утвержденным в марте 1989 г. (ИУС 7-89)
Размер шрифта на сайте можно задать как при помощи HTML, так и с помощью CSS. Рассмотрим оба варианта.
Задание размера шрифта с помощью HTML
Размер шрифта на странице можно определить при помощи тега font HTML. В статье мы уже рассматривали тег font и его атрибуты. Одним из атрибутов этого тега является size , который и позволяет установить размер шрифта. Применяется он следующим образом:
Конструктор сайтов "Нубекс"
Size может принимать значения от 1 до 7 (по умолчанию равен 3, что соответствует 13,5 пунктам для шрифта Times New Roman). Другой вариант задания атрибута - “+1” или “-1”. Это означает, что размер будет изменен относительно базового на 1 пункт больше или меньше, соответственно.
Приведенный способ довольно прост в использовании и незаменим при необходимости изменения размера шрифта небольшого куска текста. В остальных случаях рекомендуется определять стиль текста с помощью CSS.
Устанавливаем размер шрифта при помощи CSS
В CSS для изменения размера шрифта применяется свойство font-size , которое применяется следующим образом:
В приведенном примере размер шрифта устанавливается в пикселях. Но существуют и другие способы задания размера:
- large, small, medium - задают абсолютный размер (маленький, средний, большой). Также могут применяться значения экстра-маленький (x-small, xx-small), экстра-большой (x-large, xx-large).
- larger, smaller - задают относительный размер (меньше или больше относительно родительского элемента).
- 100% - задается относительный размер (в процентах относительно родительского). Например: h1 { font-size: 180%; } Это означает, что размер тега H1 будет составлять 180% от базового размера шрифта.
- Другие варианты задания относительного размера:
- 5ex - означает, что размер составит 5 высот буквы x от базового шрифта;
- 14pt - 14 пунктов;
- 22px - 22 пикселя;
- 1vw - 1% от ширины окна браузера;
- 1vh - 1% от высоты окна браузера;
Существует множество способов настройки размера шрифта CSS. Значительная часть верстальщиков по-прежнему пользуется пикселями, но это не совсем верный подход. Пиксель - слишком простой вариант, который не всегда пригоден для верстки адаптивных страниц. Рассмотрим все существующие методы изменения размера шрифта CSS.
Что вообще такое этот «размер шрифта»?
Есть мнение, что под размером понимается величина самого большого символа указанного шрифта. Это не так. На самом деле величина встроена в шрифт, и померить ее вручную, линейкой, вряд ли получится. Обычно размер чуть больше, чем расстояние от верхней части самой большой буквы до нижней части самой маленькой. Это делается для того, чтобы в заданном пространстве поместилось любое сочетание символов. Также важно указывать параметр «размер строки» (line-height), иначе буквы p, q и им подобные могут выйти за пределы.
Пиксели
Самый распространенный вариант. Устанавливается следующим образом:
font-size: 16px;
Преимущество у пикселей только одно - никаких сложностей с величиной. Ничего не надо подсчитывать. Какой размер указан, такими и будут символы на экране. Недостаток - трудности с адаптивным размером шрифта CSS. Не получится установить соотношения между разными размерами.
К числу «пиксельных» можно отнести устаревшие единицы измерения. К ним относятся pc, cm, mm и pt. Так, mm - это миллиметр, cm - сантиметр. Pt и pc - типографский пункт и типографская пика. Почему эти способы устарели? Потому что они не были «самостоятельными» - браузер автоматически пересчитывал значения в пиксели. Соответственно, проблемы были такими же, как и в случае с px. Кстати, в одном cm с точки зрения браузера содержится 38px.
Em: величина зависит от размера шрифта родительского элемента
Все просто. Допустим, у вас есть div, для которого задан font-size 16px. В нем находится еще один div, для которого размер шрифта CSS установлен как 2em. Соответственно, 1em - это будет 16px (т. е. размер шрифта родительского элемента), а 2em - вдвое больше, т. е. 32px.
В родительском элементе можно также задавать величину в em. В таком случае она будет зависеть от базового размера, заданного в body или html. Em - это относительный размер шрифта CSS, который будет увеличиваться и уменьшаться вместе с величиной знаков родительского элемента. Это удобно - чтобы изменить величину в большом количестве мест, надо только поменять параметры родителя.
Для профессионалов: ex и ch
Практически не используются обычными верстальщиками и frontend-разработчиками. Ex - это величина символа «Х», а ch - символа «0». В выбранном шрифте может не иметься таких знаков, но параметры все же можно использовать. Доподлинно неизвестно, для каких случаев лучше всего подходят такие размеры. Попробуйте поэкспериментировать - может, вам так будет удобнее? Однако помните, что ex и ch являются «условными» единицами, так что точная настройка параметров будет затруднительной.
Проценты: самый запутанный вариант
Как задать размер шрифта в CSS в процентах? Казалось бы, все просто - нужно только указать желаемый параметр и поставить после него символ «%». Но тут в дело вступает важный вопрос: «Процентом от чего будет являться заданный размер?»
В большинстве случаев параметр высчитывается в зависимости от величины родителя, но не всегда. Если задать свойство margin-left, процент будет вычисляться в зависимости от ширины родительского блока. Если установить line-height, то процент будет браться в зависимости от текущего размера шрифта.
Настройка параметров в процентах требует тщательных экспериментов. Будьте осторожны с этой единицей измерения, поскольку она легко может изменить внешний вид вашей верстки.
Rem: простая и универсальная единица
Выше перечислено множество способов настройки размеров шрифта в CSS, но ни один из них не является действительно удобным. Для упрощения работы был придуман параметр rem, который вычисляется в зависимости от заданной для тега html величины.
Это проще, чем кажется на первый взгляд. Например, для тега html, в который обернут весь контент страницы, вы задали в CSS font-size 16px. Соответственно, 1rem теперь будет являться 16px. 2rem - это 32px, и т. д. Можно использовать любые пропорции: 0,2rem, 1,1rem, 100rem… Браузер аккуратно пересчитает параметры.
В html можно вообще ничего не трогать, поскольку браузеры сами устанавливают для обертки определенный размер шрифта. Но для более тщательной настройки лучше все-таки переопределить показатель. Главное достоинство rem в том, что можно легко масштабировать шрифты в определенном месте, не влияя на другие элементы. Однако помните, что старые браузеры (IE ниже 9-й версии) не поддерживают этот показатель.
Vw и vh: экзотические параметры
Новейшие единицы измерения, созданные для мобильных устройств. Vw - это 1 % от ширины окна, на котором пользователь просматривает ваш сайт. Vh - 1 % от его высоты. Величина символов будет автоматически масштабироваться в зависимости от экрана устройства посетителя. Чтобы выбрать подходящий размер во время верстки, увеличивайте и уменьшайте размер экрана.
Подводим итоги
Уже давно можно не задавать размеры шрифтов CSS только через px. Гораздо удобнее использовать rem, vh и vw (особенно при адаптивном дизайне), а также em. Каждый из этих вариантов имеет свои достоинства и недостатки, так что перед использованием проверьте несколько методов. Современные верстальщики часто прибегают к rem, поскольку это один из самых простых способов сменить размер шрифта. Однако у него есть недостаток - компоненты становятся менее модульными.
- если свойства надо масштабировать относительно font-size, лучшим выбором станет em;
- в остальных случаях рекомендуется применять rem.
Em часто применяется для установки размеров padding и margin. Будьте осторожны, если указываете в нем величину символов для списков, поскольку из-за большой вложенности знаки могут оказаться нечитаемыми.
Пика равна 12 пунктам,что чуть меньше 1/6 дюйма (большинство людей округляет эту величину). Ширина и высота колонок и полос выражаются в пиках.
Пункт составляет 0,353 мм. Размер шрифта и расстояние между строками оценивают в пунктах.
Цицеро-это единица, принятая в большинстве стран Европы. Она примерно равна пике (5,62 цицеро равны 1 дюйму).
Термины круглая шпация, полукруглая шпация тонкая шпация характеризуют горизонтальные размеры шрифта. Они соответствуют ширине заглавных букв М, N и строчной буквы t.
Круглая шпация равна размеру шрифта, полукруглая шпация составляет 0,5 размера шрифта, а тонкая шпация - 0,25 размера шрифта. Другими словами, для 12-пунктового шрифта круглая шпация равна 12 пунктам, полукруглая шпация - 6 пунктам, а тонкая шпация - 3 пунктам. Ширина цифры показывает, сколько места на строке занимает цифра. Она равна полукруглой шпации (в большинстве шрифтов все цифры имеют одинаковую ширину, что особенно удобно при формировании числовых колонок в таблицах).
В следующей таблице приведены соотношения основных единиц измерения:
ОСНОВНЫЕ ТЕРМИНЫ
ШРИФТ
Шрифт-это набор символов определенного размера и рисунка (например, полужирный шрифт New Baskerville размером 10 пунктов).
Большую часть шрифтов можно разделить на четыре группы: шрифты с засечками, или антиква (serif), шрифты без засечек, или гротески (sans serif), декоративные (decorative) и рукописные (script).
Ниже приведены образцы некоторых широко распространенных в DTP шрифтов:
ГРУППЫ ШРИФТОВ
Для каждого шрифта существует несколько вариантов начертания: нормальное (plain), курсивное (italic), жирное (bold) и жирное курсивное (bold italic). Различные варианты начертания некоторого шрифта всех возможных размеров (кеглей) объединяются в одно шрифтовое семейство или гарнитуру.
Ниже приведен пример различных начертаний гарнитуры Таймс:
Times Plain
Times Italic
Times Bold
Times Bold Italic
Конечно, это далеко не все возможные начертания, однако эти начертания обязательно присутствуют во всех гарнитурах. Кроме них можно назвать такие широко распространенные начертания, как: светлое (light), суперсветлое (extra light), полужирное (demi bold), супержирное (extra bold), сжатое (compressed или condensed). Существует и множество других, для которых иногда даже нет общепринятого наименования.
ПРОПОРЦИИ ШРИФТА
В зависимости от пропорций знаков шрифт может быть сжатым (condenced), нормальным (normal) и широким (expanded). Реализация сжатого шрифта некоторой гарнитуры как отдельной разновидности в DTP-системах скорее исключение, чем правило. В подавляющем большинстве сжатые шрифты получаются средствами самой DTP-системы - путем пропорциональной деформации. Причем такая деформация может представлять собой не обязательно сжатие - строятся и растянутые начертания.
ОФОРМИТЕЛЬСКИЕ ЭФФЕКТЫ
Одной из интересных возможностей оформления любых шрифтов является построение контурных литер (Outline-эффект). В DTP-системах реализована также возможность создания теневого (Shadow) эффекта для любых шрифтов.
Эти и многие другие эффекты реализуются компьютером путем модификации стандартных шрифтов по определенным алгоритмам.
Среди других, часто используемых оформительских операций, можно назвать следующие: подчеркивание и двойное подчеркивание, перечеркивание, смещение текста относительно нормального положения строки и разнообразные их комбинации.
РАЗМЕР ШРИФТА
Размером шрифта называется расстояние между верхней и нижней шрифтовыми линиями. Обычно размер шрифта (кегль) выражается в пунктах.
Визуальное определение размера шрифта представляет сложность только для начинающих пользователей DTP-систем. Даже после непродолжительной работы пользователь приобретает опыт и через некоторое время распознает практически безошибочно большинство кеглей часто используемых гарнитур.
На следующей иллюстрации изображены несколько кеглей одной гарнитуры:
Существуют специфические наименования для отдельных кеглей, также «унаследованные из прошлого»: бриллиант (3 пункта), диамант (4 пункта), перл (5 пунктов), нонпарель (6 пунктов), миньон (7 пунктов), петит (8 пунктов), боргес (9 пунктов), корпус (10 пунктов), цицеро (12 пунктов), миттель (14 пунктов), терция (16 пунктов), текст (20 пунктов).
ЕМКОСТЬ И НАСЫЩЕННОСТЬ ШРИФТА
Каждый шрифт имеет свой общий тон или насыщенность - чисто визульный параметр, который характеризует, как будет выглядеть конкретный шрифт на странице. Он может быть светлым или темным. Насыщенность меняется в зависимости от вида шрифта и начертания, равномерности расположения текста.
Шрифты одного и того же кегля могут иметь различную емкость, т.е. в одной строке может помещаться различное количество знаков. В некоторых книгах по типографике приводятся таблицы емкости шрифтов для определения среднего количества знаков для разных кеглей в строках различного формата. Я бы не советовал их использовать, т.к. параметры одного и того же шрифта меняются в зависимости от производителя. Более приемлемым способом является самостоятельное определение емкости. Для этого наберите колонку текста и сделайте ее дубликаты для шрифтов, которые вы собираетесь использовать.
На рисунке ниже один и тот же текст набран одним кеглем, но имеет для разных шрифтов свою емкость и насыщенность:
Для каждой группы изданий хорошо бы найти определенный набор гарнитур. Но это не значит, что вы должны ограничиться лишь несколькими шрифтами. Выбирайте больше гарнитур, чем требуется для одного документа, - это расширит ваши творческие возможности.
Общим принципом является применение гарнитур с засечками для основного текста и рубленых - для заголовков и других элементов. Но нет правил без исключений. В одном документе можно ограничиться только рублеными гарнитурами, в другом-только с засечками. Надо только учитывать, что текст, набранный рубленым шрифтом, труднее читать; особенно это касается больших объемов.
Ниже приводятся несколько простых советов по использованию шрифтов:
Для
основного текста используйте прямое светлое начертание шрифта.
При
выборе шрифта (особенно это касается очень светлых гарнитур) определите, на
каком устройстве будете выводить ваш документ. Дело в том, что лазерные принтеры
печатают буквы более толстыми, чем они получаются на фотонаборных автоматах,
причем чем хуже разрешение принтера, тем толще получаются буквы. В любом случае,
прежде чем принимать решение, просмотрите пробные отпечатки.
Для
заголовков и подзаголовков применяйте более жирное начертание. Избегайте одинаковых
гарнитур для заголовков и основного текста. С другой стороны, для заголовков
и подзаголовков лучше использовать схожие гарнитуры; это же касается тех случаев,
когда в основном тексте существует несколько гарнитур.
Если
заголовок занимает более трех строк, гарнитура должна быть равна по насыщенности
основному тексту. Если гарнитуры заголовка и текста совпадают, отделите заголовок
от текста. Используя полужирное начертание шрифта для первых слов заголовка,
вы как бы даете шапку, а набор курсивом поможет отделить заголовок от основного
текста, не отвлекая внимания. Если заголовок занимает менее трех строк, эффектно
смотрится гарнитура более солидного вида, чем у основного текста.
Старайтесь
не применять на полосе более трех различных гарнитур, а обходитесь различными
начертаниями одной гарнитуры в элементах документа (заголовках, основном тексте,
шапках и др). Однако некоторые гарнитуры очень похожи между собой, и вы можете
использовать их как варианты одной гарнитуры.
Курсив
отлично смотрится в шапках, строчках с фамилиями авторов, боковых заголовках
и заголовках-форточках.