Возможности начертания в html
Шрифт текстового контента всегда можно видоизменить. Например, задать жирное начертание или курсивное, а также его можно декорировать. Для этого существуют простые теги, которые очень легко запомнить и после применять. Ниже представлена таблица элементов, которая разъясняет их предназначение.
| Видоизменение текста | Теги |
| Жирное выделение контента | <b>, <strong> |
| Курсивное выделение контента | <i>, <em> |
Для начала разберемся с жирным начертанием текстовых элементов.
Чтобы увеличить толщину букв, существуют такие парные теги как <b> и <strong>. В современных браузерах использование этих инструментов отображается одинаково, так как они форматируют текст в жирный. Однако их предназначение различно. Поэтому их нельзя назвать эквивалентными и использовать только какой-то один из них.
Теперь рассмотрим такие теги, как <i> и <em>.
Они форматируют стандартный шрифт в курсивный. Думаю, вы зададите логически возникающий вопрос: «А эти элементы тоже разняться между собой по принципу тегов <b> и <strong>?». Вопрос правильный. И вы правы!
Свойства шрифта
Чтобы сделать изменение шрифта в CSS, ознакомьтесь с правилами и с его свойствами.
1). Чтобы задать определенный шрифт заголовку, тексту или сайту в целом, существует в CSS правило font-family.
font-family
P {font-family: Arial, serif;}
Пример:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Шрифт</title>
<style ENGINE="text/css">
p {
font-family: Arial, Helvetica, Verdana, sans-serif; /* выбор шрифта */
}
</style>
</head>
<body>
<H1>Заголовок</H1>
<p>Ваш текст</p>
</body>
</html>
Результат:
Всему параграфу <p> будет присвоено шрифт «Arial».
Заметка:
Часто используемые шрифты: «Verdana», «Arial», «Times New Roman».
2). Если вы хотите поменяет стиль шрифта, воспользуйтесь правилом font-style.
font-style: normal | italic | oblique
p {font-style: italic;}
Значения.
normal — нормальный шрифт;italic — курсив;oblique — наклонный шрифт.
Пример:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Шрифт</title>
<style type="text/css">
p {font-style: italic; /* меняем стиль шрифта */ }
</style>
</head>
<body>
<H1>Заголовок</H1>
<p>Ваш текст</p>
</body>
</html>
3). Если вы хотите сделать слово или текст жирным, используйте правило font-weight.
font-weight: normal | lighter | bold | bolder
p {font-weight: bold;}
Значения.
normal — нормальная жирностьlighter — светлое начертаниеbold — полужирныйbolder — жирный100–900 — 100 — светлый шрифт, 900 — самый жирный
Пример:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Шрифт</title>
<style type="text/css">
p {font-weight: bold; /* текст будет полужирный */ }
</style>
</head>
<body>
<H1>Заголовок</H1>
<p>Ваш текст</p>
</body>
</html>
4). Если нужно указать размер шрифта, используйте правило font-size. Размер задается в pt — пункты, px — пиксели и в % — процентах.
font-size
p {font-size: 12px;}
Пример:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Шрифт</title>
<style type="text/css">
p {font-size: 12px; /* текст будет 12px */ }
</style>
</head>
<body>
<H1>Заголовок</H1>
<p>Ваш текст</p>
</body>
</html>
5). Хочу вам предложить сокращённый способ вышеперечисленных правил. Воспользуйтесь правилом font.
font
Пример:
Стандартный способ:
p {
font-style: italic;
font-weight: bold;
font-size: 24px;
font-family: arial, sans-serif;
}
Сокращенный способ:
p {
font: italic bold 24px arial, sans-serif;
}
Примечание: Все значения указывайте через пробел!!!
Несколько советов напоследок
Итак, мы рассмотрели основные способы изменения размера шрифта в html. Этой информации вполне достаточно, чтобы создать аккуратно выглядящую веб-страницу, обладающую хорошей читабельностью.
Для удобства возьмите на заметку следующие рекомендации:
- При верстке не стоит ограничиваться средствами html. Как только освоены основы построения сайта, можно приступать к изучению CSS. Это откроет новые горизонты в создании веб-страниц.
- Нельзя пренебрегать тестированием готового сайта в различных браузерах и на разных платформах. Как уже писалось выше, параметры текста могут существенно отличаться, особенно при использовании устаревших версий браузеров.
- Всегда следует использовать пробелы и табуляцию при написании кода. Это облегчает его читабельность и понимание.
- Комментарии к коду — это не только инструмент для удобного восприятия, но и знак хорошего тона среди разработчиков.
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.
Рис. 1. Применение свойства font-weight
Браузеры
Браузеры обычно не могут адекватно показать требуемую насыщенность шрифта, поэтому переключаются между значениями bold
, normal
и lighter
. На практике же начертание в браузерах обычно ограничено всего двумя вариантами: нормальное начертание и жирное начертание.
Свойство font-style , в зависимости от выбранного значения, определяет стиль шрифта.
Шрифт может иметь следующие стили:
- normal — обычный (по умолчанию)
- italic — курсив
- oblique — наклонный
Стиль шрифта
это курсив
а это наклонный текст
И чем спрашивается, они отличаются?
Чем отличается курсив от наклонного текста? Курсив — это своего рода шрифт взятый из библиотеки шрифтов, а наклонный текст — это результат работы алгоритма, где каждый символ слегка наклоняется в правую сторону.
Использование заголовков
В нашем примере очень хотелось бы, чтобы название и автор стихотворения были бы выделены. Для этого можно использовать заголовки. У заголовка существуют уровни: H1 – самый первый уровень и, соответственно, текст, заключенный в контейнер <H1>…</H1>, будет самым большим. Н6 – самый нижний уровень и самый маленький размер текста.
Содержимое тэгов <H1>, <H2>, …, <H6> всегда начинается с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство.
У тэгов <H1>, <H2>, …, <H6> также имеется атрибут.
ALIGN определяет выравнивание заголовка. Параметр ALIGN такие же как и у атрибута ALIGN тэга P.
Сделаем в нашем примере название стихотворения заголовком первого уровня и выравнивание по центру, а автора – вторым уровнем и выравнивание по правому краю.
Пример:
<H1 ALIGN = “CENTER”> Унылая пора! Очей очарованье!... </H1>
Результат:
Заголовок первого уровня
Рекомендуется всегда использовать для оформления заголовков именно эти теги, поскольку это оптимизирует код и является синтаксически более правильным, а также придает единый стиль всему документу.
Специфические параметры для данного тега задаются посредством CSS — таким образом можно задать конкретное значение размера текста, его цвет и гарнитуру шрифта.
Итак, мы рассмотрели основные способы изменения размера шрифта в html. Этой информации вполне достаточно, чтобы создать аккуратно выглядящую веб-страницу, обладающую хорошей читабельностью.
Для удобства возьмите на заметку следующие рекомендации:
font-family
Позволяет определить, каким шрифтом будет написан текст. Для группировки шрифтов в CSS используется два типа имён: generic-family и family-name.
generic-family содержит пять базовых семейств шрифтов, которые можно найти практически на любом компьютере.
- sans-serif — шрифты без засечек. Написанный ими текст воспринимается лучше других.
- serif — шрифты с засечками.
- monospace — шрифты, символы которых имеют фиксированную ширину. Их принято использовать для отображения программного кода.
- cursive — рукописные шрифты.
- fantasy — декоративные (художественные) шрифты.
family-name определяет не семейство, а один шрифт: “Arial Black”, Verdana.
В качестве значений свойства font-family семейства и шрифты перечисляются через запятую. Браузер определяет, установлен ли на ПК пользователя первый в списке шрифт, и если да, то отображает текст им, если нет — переходит к следующему и т. д. Если имя шрифта содержит спецсимволы или состоит из нескольких слов (содержит пробел), то его надо брать в кавычки.
h1 {font-family: Arial, sans-serif;}
h2 { font-family: "Times New Roman", serif; }
На практике
Чтобы добавить немного характера к нашему сайту Styles Conference, попробуем использовать на нём Google Font.
-
Зайдём на сайт Google Fonts и поищем шрифт, который мы хотели бы использовать: Roboto. После того как нашли, добавим его к нашей коллекции, следуя инструкциям на сайте.
Когда придёт время выбора, какое начертание мы хотели бы использовать, удостоверимся, что указали 300 и 400, как мы уже применяли в нашем CSS. Также добавим 100 к коллекции для другого варианта тоже.
Google выдаст нам дополнительный элемент <link> для включения в <head> на всех наших страницах. Мы поместим этот новый элемент <link> непосредственно ниже нашего существующего <link>. Новый элемент будет включать в себя правильный указатель на стили Google, который в том числе включает новый файл CSS с правильным правилом @font-face, необходимым для использования шрифта Roboto.
После добавления нового элемента <link>, наш элемент <head> будет выглядеть следующим образом:
-
После того, как мы добавили новый элемент <link> для всех наших страниц мы готовы начать использовать шрифт Roboto. Мы сделаем это, добавив его в наш основной набор шрифтов в свойстве font внутри стиля для элемента <body>.
Добавим Roboto в начале нашего набора шрифтов так: «Roboto», «Open Sans», «Helvetica Neue», Helvetica, Arial, sans-serif.
Хотя Roboto это одно слово, но поскольку это встроенный веб-шрифт, то мы хотим взять его в кавычки внутри любого CSS. Наш новый стиль для элемента <body> будет выглядеть следующим образом:
-
Теперь Roboto должен загрузиться и работать, что видно по всему тексту на сайте Styles Conference. Поближе взглянем на наш логотип и обновим его немного.
Внутри набора правил с классом logo начнём с добавления свойства font-weight со значением 100, чтобы сделать текст достаточно тонким. Также используем свойство text-transform со значением uppercase, чтобы сделать все буквы заглавными и свойство letter-spacing со значением .5 пикселей, чтобы добавить немного пространства между букв внутри логотипа.
Все стили для нашего логотипа будут выглядеть следующим образом:
-
Поскольку нам доступно значение 100 у свойства font-weight, давайте также установим абзац для раздела hero такой же насыщенности. Мы можем использовать существующий селектор чтобы сделать это и новый набор правил будет выглядеть следующим образом:
Рис. 6.03. Главная страница Styles Conference после добавления веб-шрифта от Google
Демонстрация и исходный код
Ниже вы можете посмотреть сайт Styles Conference в его нынешнем состоянии, а также скачать исходный код сайта на данный момент.
Просмотр сайта Styles Conference или Скачать исходный код
Советы и рекомендации
Сама идея использования различных шрифтов на веб страницах начала бурно развиваться последние два года. О таких темпах развития можно только мечтать. Однако до сих пор разработчикам приходится сталкивать с множеством проблем кроссбраузерного отображения. Все эти проблемы решатся, когда Web Open Font Format (WOFF) будет признан сообществом разработчиков как стандарт.
Другим препятствием, которое уже упоминалось ранее, является распространенность операционной системы Windows, в которой субпиксельный рендеринг отключен (либо по умолчанию в Windows XP или по предпочтению со стороны пользователя). По сравнению с системными шрифтами, большинство веб-шрифтов отображаются в низком качестве, из-за отсутствия субпиксельного рендеринга. Конечно же, со временем данная проблема будет решена, так как пользователи заменят старое оборудование и операционные системы. В то же время, Internet Explorer 9 работает с текстом процессором DirectWrite, что обеспечивает значительно более совершенную обработку.
Использование веб-шрифтов в вашем дизайне требует тщательного тестирования, так как на различных браузерах и платформах результат может быть прямо противоположный. Если экран имеет низкое разрешение, и отсутствует поддержка субпиксельного рендеринга, то отображение будет искажено или будет вовсе отсутствовать. Самый простой способ решения данной проблемы — это чтобы все сменили железо и операционки! Но этого же не будет) Конечно, вы можете использовать JavaScript, для того чтобы узнать о поддержке субпиксельного рендеринга.
Отображение текста
Даже если некоторые веб макеты приближаются по сложности к макетам из печати (благодаря богатым наборам вложенных шрифтов), есть еще большая проблема: браузеры автоматически не расставляют переносы. Особенно в языках, где существует много длинных слов (например, немецкий), что плохо сказывается на читаемости текста.
Но это дело можно подправить при помощи JavaScript client-side hyphenation, который был разработан phpHyphenator. Но и с этим инструментом могут возникнуть проблемы интеграции в браузере, но в будущем, думаю, и это будет решено.
Фишки OpenType
Тут есть и обратная сторона медали. Дело в том, что такие программы как InDesign и QuarkXPress 7+, не поддерживают типографических стандартов OpenType.
Функции и опции OpenType позволяют развивать этот формат, для того чтобы он мог иметь больше возможностей. Если приложение поддерживает данные фишки, то некоторые символы могут быть автоматически заменены.
Некоторые шрифты могут быть использованы только при наличии поддержки OpenType. Всеобъемлющей OpenType может содержать глифы и другие элементы. С помощью функции OpenType, базовая версия будет заменена версией с соответствующими элементам, которые поддерживаются в софтине. Пример на рисунке:
Недавно вышедший Firefox 4 поддерживает все вышеперечисленные фишки OpenType. Теперь вы можете пользоваться данными преимуществами следующим образом:
h1 {
-moz-font-feature-settings: 'smcp=1';
}
Microsoft предоставила список возможностей OpenType, которые поддерживает. Будем надеяться, что все остальные браузеры последуют их примеру.
Надеемся, эта статья была для вас познавательна! В скором времени все эти проблемы навряд ли решатся. Нам остаётся только ждать.
bolder» для шрифтов со множеством начертаний / Habr
Возьмём для примера Open Sans.
Open Sans имеет пять начертаний: Light 300, Normal 400, Semi-Bold 600, Bold 700 и Extra-Bold 800.
Цифры соответствуют значению .
Пусть основной текст имеет начертание Light 300, заголовки и цитаты — Normal 400, а промо-блок — Semi-Bold 600:
Тег может встечаться и в основном тексте, и в цитатах, и промо-блоке. Надо это учесть.
По-умолчанию:
А нам хочется, чтобы у
Уверен, многие пробовали использовать , но это не принесло ожидаемого результата — текст стал ещё жирнее, чем ожидалось.
А всё потому, что согласно спецификации, значение () увеличивает (уменьшает) унаследованное значение до следующего возможного для данного шрифта значения, согласно следующей таблице.
| наследуемое значение | bolder | lighter |
|---|---|---|
| 100 | 400 | 100 |
| 200 | 400 | 100 |
| 300 | 400 | 100 |
| 400 | 700 | 100 |
| 500 | 700 | 100 |
| 600 | 900 | 400 |
| 700 | 900 | 400 |
| 800 | 900 | 700 |
| 900 | 900 | 700 |
Но в браузерной CSS прописано , т.е. унаследуется значение «700», а потом оно ещё и увеличивается до «900». Поэтому кажется, что работает неправильно.
Исправить это можно так:
Именно так, как два отдельных правила. Первое обнуляет значение из браузерной таблицы стилей, второе задаёт жирность уже в относительных, а не абсолютных единицах.
Теперь нам не придётся заботиться о вложенности элементов — каскад всё сделает автоматически. Мы можем вкладывать теги друг в друга.
Вложенные теги «strong». Толщина шрифта определяется исходя из значения родительского элемента.Демка
Ограничения
Единственной гарантией при использовании / является то, что шрифт при значении «» не будет тоньше, чем более легкие начертания этого шрифта, а при значении «» будет не толще, чем более жирные начертания этого шрифта.
Чтобы более тонко настроить вес шрифта, надо использовать абсолютные значения.
Sintaxe
The property is specified in one of the following ways:
- As one of the or keywords
- As a or a , relative to the parent element’s font size
- , , , , , ,
- Absolute-size keywords, based on the user’s default font size (which is ).
- ,
- Relative-size keywords. The font will be larger or smaller relative to the parent element’s font size, roughly by the ratio used to separate the absolute-size keywords above.
-
A positive value. For most font-relative units (such as and ), the font size is relative to the parent element’s font size.
For font-relative units that are root-based (such as ), the font size is relative to the size of the font used by the (root) element.
-
A positive value, relative to the parent element’s font size.
Note: To maximize accessibility, it is generally best to use values that are relative to the user’s default font size.
where
Свойства шрифта
| Свойство | Значение | Описание | Пример |
|---|---|---|---|
| font-family | имя шрифта | Устанавливает шрифт из списка | P {font-family: Arial, sans-serif} |
Если не указывать это свойство в CSS, то броузер будет показывать текст шрифтом по умолчанию. Обычно это Times New Roman.
Список шрифтов в значении font-family может включать одно или несколько названий, разделенных запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в кавычки, одинарные или же двойные.
Браузер поочерёдно проверяет наличие шрифтов из списка на компьютере пользователя. Если первый шрифт в списке есть, то используется он, иначе браузер проверяет наличие второго шрифта из списка. Если ни одного нет, используется шрифт по умолчанию. В конце списка обычно прописывают ключевые слово, которое описывает тип желаемого шрифта — serif, sans-serif, fantasy, cursive или monospace.
Универсальные семейства шрифтов:
- serif — антиквенные шрифты (шрифты с засечками), типа Times;
- sans-serif — рубленные шрифты (шрифты без засечек или гротески), типичный представитель — Arial;
- monospace — моноширинные шрифты, ширина каждого символа в таком семействе одинакова (шрифт Courier).
- fantasy — семейство декоративных шрифтов;
- cursive — семейство курсивных шрифтов;
Пример с использованием:
Следующее свойство:
| Свойство | Значение | Описание | Пример |
|---|---|---|---|
| font-style | normalitalicoblique | Нормальный шрифтКурсивНаклонный шрифт | P {font-style: oblique} |
Пример кода, в этом примере встроим стили в тег при помощи атрибута style.
Видно что курсив от наклонного шрифта внешне не отличается.
Следующее свойство:
| Свойство | Значение | Описание | Пример |
|---|---|---|---|
| font-variant | normalsmall-caps | Устанавливает капитель (особые прописные буквы) | P {font-variant: small-caps} |
Капитель — так в типографике называется текст, в котором строчные знаки выглядят, как уменьшенные прописные. Следует различать капитель и просто уменьшенные прописные буквы. Капительные буквы несколько выше строчных и имеют, как правило, чуть расширенные пропорции.
Следующее свойство:
| Свойство | Значение | Описание | Пример |
|---|---|---|---|
| font-weight | normallighterboldbolder100–900 | Нормальная жирностьСветлое начертаниеПолужирныйЖирный100 — светлый шрифт,900 — самый жирный | P {font-weight: bolder} |
Свойство font-weight устанавливает насыщенность шрифта. Для этого в значении используются ключевые слова: bold — полужирное начертание, normal — нормальное начертание. Значение может быть установленно в диапазоне от 100 до 900 с шагом 100. Сверхсветлое начертание, которое может отобразить браузер, имеет значение 100, а сверхжирное — 900. Нормальное начертание шрифта (normal, которое установлено по умолчанию) соответствует 400, стандартный полужирный текст, bold, — значению 700.
Браузеры обычно не могут точно показать требуемую насыщенность шрифта, поэтому переключаются между значениями bold, normal и lighter. На практике же начертание в большинстве браузеров обычно ограничено только двумя вариантами: нормальное начертание и жирное начертание.
Значения lighter и bolder изменяют жирность шрифта относительно насыщенности родителя, соответственно, в меньшую и большую сторону.
Следующее свойство:
Свойство font-size — определяет размер шрифта элемента. Размер шрифта можно задать несколькими способами.
| Свойство | Значение | Описание | Пример |
|---|---|---|---|
| font-size | normalptpx% | нормальный размерпунктыпикселыпроценты | font-size: normalfont-size: 11ptfont-size: 11pxfont-size: 110% |
Абсолютный размер кегля шрифта может задаваться с использованием ключевых слов: xx-small (крайне малый), small (малый), medium (средний, значение по умолчанию), large (большой), x-large (очень большое), xx-large (крайне большое). Абсолютные размеры шрифта зависят от настроек браузера и операционной системы, так что они не совсем абсолютны.
Для изменения размера текста относительно родителя используется другой набор констант (larger — увеличивает размер относительно родительского, smaller — уменьшает размер).
С этим читают
Как подключить шрифт CSS?
1.Заходим на сайт-каталог шрифтов. Их легко можно найти в поиске. Ниже я приведу пример одного довольно удобного сайта, который я обычно использую.
2.Выбираем и скачиваем любой понравившийся нам. Чаще всего вам предоставляется для скачивания несколько файлов с различными вариантами исполнения (жирный, курсив, и т.д.), а так же с различными расширениями.
Для наших целей лучше всего подойдет файл с расширением .ttf, так как он поддерживаться всеми браузерами. Так же файл может быть в форматах .eot, .woff, .svg. Для поддержки данного шрифта в старых версиях Internet Explorer и некоторых других браузеров желательно подключить и форматы .eot и .woff
3.Скачанный файл нам нужно загрузить в папку fonts в корневом каталоге сайта. Если же ваш сайт сделан на WordPress или другой CMS, то вам нужно загрузить файл в папку fonts, которая находится в папке с темой оформления.
4.Далее открываем css-файл стилей сайта или используемой темы. Это можно сделать, подключившись к сайту по FTP в текстовом редакторе NotePad++ или его аналоге.
5.Затем нам нужно подключить шрифт CSS-правилом font-face
Для этого в самом начале файла стилей style.css, после комментария, содержащего информацию о теме, вставляем следующий код:
PHP
@font-face {
font-family: ‘Font Name’;
src: url(‘fonts/ Font Name.ttf’) format(‘truetype’);
font-weight: normal;
font-style: normal;
}
1
2
3
4
5
6
@font-face{
font-family’Font Name’;
srcurl(‘fonts/ Font Name.ttf’)format(‘truetype’);
font-weightnormal;
font-stylenormal;
}
Обратите внимание! Вместо текста «Font Name» вам нужно вставить название скачанного вами файла. И обязательно обращайте внимание на формат, так как у вас он может быть другой или их может быть несколько.
Вот примеры подключения в CSS наиболее популярных форматов:
PHP
src: url(‘fonts/ Font Name.woff’) format(‘woff’);
src: url(‘fonts/ Font Name.eot’) format(‘eot’);
src: url(‘fonts/ Font Name.svg’) format(‘svg’);
1
2
3
srcurl(‘fonts/ Font Name.woff’)format(‘woff’);
srcurl(‘fonts/ Font Name.eot’)format(‘eot’);
srcurl(‘fonts/ Font Name.svg’)format(‘svg’);
6.Теперь наш шрифт подключен, и мы можем его использовать
Для того, что бы применить его к определенному блоку, нам нужно в css-стилях для класса этого блока дописать свойство font-family:
PHP
font-family: ‘ JuraBook ‘;
1
font-family’ JuraBook ‘;
Например:
PHP
.main-navigation ul li a {
font-family: ‘JuraBook’;
font-size:18px;
}
1
2
3
4
.main-navigationullia{
font-family’JuraBook’;
font-size18px;
}
Mögliche Ansätze
Es gibt einige verschiedene Arten, die Schriftgröße zu spezifizieren, in Form von Schlüsselwörtern oder numerischen Werten für Pixel oder ems. Je nachdem, was die Ansprüche einer Webseite sind, kann die richtige Methode gewählt werden.
Schlüsselwörter sind eine gute Möglichkeit die Größe von Schriften im Web festzulegen. Indem ein Schlüsselwort für die Schriftgröße des body-Elements festgelegt wird, ist es möglich überall auf der restlichen Webseite relative Schriftgrößen zu benutzen, was einen befähigt, auf einfache Weise die Schrift auf der ganzen Seite entsprechend zu vergrößern oder zu verkleinern.
Das Festlegen der Schriftgröße in Pixel-Werten () ist eine gute Wahl, wenn Pixel-Genauigkeit gefordert ist. Ein px-Wert ist statisch und stellt eine Möglichkeit dar, die unabhängig von Betriebssystem und Browser ist und dem Browser unveränderlich mitteilt, die Buchstaben in genau der spezifizierten Höhe an Pixeln darzustellen. Das Ergebnis kann sich je nach Browser leicht unterscheiden, da diese eventuell verschiedene Algorithmen verwenden, um den selben Effekt zu erzielen.
Verschiedene Schriftgrößeneinstellungen können auch kombiniert werden. Zum Beispiel, wenn ein Elternelement festlegt und sein Kindelement spezifiziert, dann wird das Kindelement größer dargestellt als das Elternelement auf der Seite.
Anmerkung: Die Schriftgröße in Pixeln festzulegen, ist nicht barrierefrei, weil der Benutzer infolge dessen die Schriftgröße nicht über den Browser ändern kann. Zum Beispiel möchten Benutzer mit Sehschwäche die Schriftgröße vielleicht viel größer einstellen als vom Web-Designer ausgewählt. Die Benutzung von Pixeln für Schriftgrößen sollte vermieden werden, wenn ein allumfassendes Design gefordert ist.
Eine weitere Möglichkeit, die Schriftgröße festzulegen, ist die Verwendung von -Werten. Die Größe eines -Wertes ist dynamisch. Beim Spezifizieren der -Eigenschaft entspricht ein der für das gefragte Elternelement festgelegten Schriftgröße. Wird die Schriftgröße nirgendwo anders auf der Seite festgelegt, dann gilt die vom Browser definierte Größe, die oft 16px entspricht. Demnach gilt im Normalfall 1em = 16px, also 2em = 32px. Wenn dem body-Element eine Schriftgröße von 20px zugewiesen wird, dann gilt 1em = 20px und 2em = 40px. Es ist zu beachten, dass der Wert 2 notwendigerweise ein Multiplikator der aktuellen em-Größe ist.
Um das em-Äquivalent für einen beliebigen benötigten Pixel-Wert zu berechnen, kann die folgende Formel benutzt werden:
em = gewünschter Pixel-Wert des Elements / Elternelementschriftgröße in Pixeln
Angenommen die Schriftgröße des Body der Seite entspricht 16px. Wenn die gewünschte Schriftgröße 12px ist, dann sollten 0.75em spezifiziert werden (da 12/16 = 0,75). Es verhält sich ähnlich, wenn eine Schriftgröße von 10px gewollt ist; dann sollte 0.625em spezifiziert werden (10/16 = 0,625) und für 22px sollten es 1.375em (22/16) sein.
Em ist eine sehr nützliche CSS-Einheit, da es seine Länge automatisch relativ zur vom Leser gewählten Schrift anpasst.
Ein wichtiger Hinweis: em-Werte können zu bisweilen auch extremen Steigerungen führen wie das folgende HTML und CSS zeigen:
Das Ergebnis ist:
Angenommen, dass vom Browser als 16px festgelegt wird, dann würden die Wörter «outer» mit 16px dargestellt, das Wort «inner» aber mit 25.6px. Das liegt daran, dass die Schriftgröße des inneren Spans 1.6em entspricht, was relativ zum Elternelement gilt, welches wiederum relativ zu dessen Elternelement steht. Dieses Verhalten wird auch compounding (Steigerung/Aufzinsung) genannt.
-Werte wurden eingeführt, um das compunding-Problem zu umgehen. -Werte sind relativ zum -Wurzelelement, nicht zum Elternelement. Mit anderen Worten ermöglicht es, eine Schriftgröße in einer relativen Weise zu spezifizieren ohne durch das Elternelement beeinflusst zu werden und so das Compunding zu verhindern.
Das folgende CSS ist nahezu identisch mit dem vorherigen Beispiel. Die einzige Ausnahme ist, dass die Einheit nun ist.
Anschließend wird dieses CSS auf das selbe HTML angewandt, das wie folgt aussieht:
Bei diesem Beispiel erscheinen die Worte «outer inner outer» alle mit 16px (angenommen, dass die Schriftgröße des Browsers beim Standardwert von 16px verblieben ist).
Высота строки
Межстрочный интервал — это расстояние между строками текста. Для его установки используется свойство
line-height. Оно устанавлявает высоту строки. Высота строки состоит из размера
шрифта и межстрочного интервала. Если высота строки равна 50 пикселей, а размер шрифта 30 пикселей,
то межстрочный интервал получится 20 пикселей. Если высоту строки установить меньше размера шрифта, то
строки будут пересекаться. Свойство line-height может принимать такие значения:
line-height: normal — обычный интервал (по умолчанию)
line-height: число, на которое будет умножен размер шрифта
line-height: высота в единицах измерения,
доступных в CSS
line-height: проценты от размера шрифта
line-height: inherit значение принимается от родительского элемента
Для примера создадим большой абзац текста, состоящий из нескольких строк. Установим ему размер шрифта
и высоту строки:
Стиль:
| 7891011 |
#text
{
font-size: 20px;
line-height: 30px;
}
|
HTML код:
| 343536373839 |
<p id="text">Текст из нескольких строк Текст из нескольких строк Текст из нескольких строк Текст из нескольких строк Текст из нескольких строк Текст из нескольких строк Текст из нескольких строк Текст из нескольких строк Текст из нескольких строк Текст из нескольких строк Текст из нескольких строк Текст из нескольких строк </p> |
Попробуйте разные варианты высоты строки. Посмотрите как будет выглядеть текст.
Подключение шрифтов с помощью правила @font-face
Есть альтернативный способ, при котором файлы со шрифтами хранятся вместе с остальными ресурсами сайта. Для них принято заводить отдельную директорию в корне проекта — например, . В неё следует поместить файлы для каждого начертания в нужных форматах — в большинстве случаев, если не требуется поддержка старых браузеров, подойдут и , о которых мы говорили ранее. Шрифты можно скачать на различных ресурсах
При этом всегда нужно обращать внимание на лицензию — некоторые шрифты могут быть недоступны для коммерческого использования
После того, как шрифты добавлены в проект, их нужно подключить в CSS-файле. Для этого используется правило . В самом базовом варианте оно будет включать:
-
Название шрифта, которое затем нужно использовать, чтобы задать элементам подключённый шрифт.
-
Адрес файла со шрифтом, который нужно подключить, и его формат. Если адресов несколько, их можно указать через запятую. В этом случае важен порядок — браузер будет последовательно пытаться подключить файлы. Первым должен быть самый подходящий формат, а далее — запасные варианты.
Также с помощью функции можно добавить возможность перед загрузкой шрифта с сервера проверить, установлен ли он на компьютере пользователя. Если да, запроса к серверу за шрифтом не будет — при рендеринге используется локальная версия. Но у этого способа есть минус — шрифт на компьютере пользователя может быть устаревшим, и тогда страница отобразится не совсем так, как было задумано.
-
Начертания: жирное, курсивное и так далее. Для каждого начертания нужно отдельное правило .
Базовый вариант правила:
Для улучшения производительности правило лучше всего прописывать в самом начале CSS-файла. Так браузер сможет раньше начать обработку шрифта.
Absolute Lengths
The absolute length units are fixed and a length expressed in any of these will appear as exactly that size.
Absolute length units are not recommended for use on screen, because screen sizes vary so much.
However, they can be used if the output medium is known, such
as for print layout.
| Unit | Description |
|---|---|
| cm | centimeters Try it |
| mm | millimeters Try it |
| in | inches (1in = 96px = 2.54cm) Try it |
| px * | pixels (1px = 1/96th of 1in) Try it |
| pt | points (1pt = 1/72 of 1in) Try it |
| pc | picas (1pc = 12 pt) Try it |
* Pixels (px) are relative to the viewing device. For low-dpi devices, 1px is one device pixel (dot) of the display. For printers and high resolution
screens 1px implies multiple device pixels.
