Шрифт в html: Атрибут size | htmlbook.ru

Как сделать измененный шрифт в html. Форматирование текста html-страницы (ч.2)

Размер шрифта на сайте можно задать как при помощи HTML, так и с помощью CSS. Рассмотрим оба варианта.

Задание размера шрифта с помощью HTML

Размер шрифта на странице можно определить при помощи тега font HTML. В статье мы уже рассматривали тег font и его атрибуты. Одним из атрибутов этого тега является size , который и позволяет установить размер шрифта. Применяется он следующим образом:

Конструктор сайтов «Нубекс»

Size может принимать значения от 1 до 7 (по умолчанию равен 3, что соответствует 13,5 пунктам для шрифта Times New Roman). Другой вариант задания атрибута — “+1” или “-1”. Это означает, что размер будет изменен относительно базового на 1 пункт больше или меньше, соответственно.

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

Устанавливаем размер шрифта при помощи CSS

В CSS для изменения размера шрифта применяется свойство font-size , которое применяется следующим образом:

Меняем размер шрифта при помощи CSS

Шрифты HTML-блока div класса nubex получают размер 14px при помощи свойства font size.

В приведенном примере размер шрифта устанавливается в пикселях. Но существуют и другие способы задания размера:

• large, small, medium — задают абсолютный размер (маленький, средний, большой). Также могут применяться значения экстра-маленький (x-small, xx-small), экстра-большой (x-large, xx-large).
• larger, smaller — задают относительный размер (меньше или больше относительно родительского элемента).
• 100% — задается относительный размер (в процентах относительно родительского). Например: h2 { font-size: 180%; } Это означает, что размер тега h2 будет составлять 180% от базового размера шрифта.
• Другие варианты задания относительного размера:
  • 5ex — означает, что размер составит 5 высот буквы x от базового шрифта;
  • 14pt — 14 пунктов;
  • 22px — 22 пикселя;
  • 1vw — 1% от ширины окна браузера;
  • 1vh — 1% от высоты окна браузера;

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

Изменение стилей шрифтов

Изменять стили написания шрифтов в HTML можно далеко не одним способом и вы скоро в этом убедитесь. А теперь давайте рассмотрим несколько новых тегов:

… и

… — выделяют текст полужирным шрифтом.

… и … — выделяют текст курсивом .

^… — выводит текст в верхнем индексе, например E = mc 2 .

_… — выводит текст в нижнем индексе, например H 2 SO 4 .

Все эти теги являются встроенными (inline, уровня строки) , то есть не создают переносы строк до и после себя, а располагаются на одной строке. Содержать они могут тоже только встроенные элементы, поэтому их свободно можно вкладывать друг в друга. Самое главное не забывайте о правильной вложенности: тег, открытый раньше — должен быть закрыт позже.

Думаю, вы заметили, что для выделения жирным и курсивом существует по два тега. Дело в том, что обычные браузеры отображают содержимое этих тегов одинаково, а вот невизуальные (голосовые) браузеры могут по особенному акцентировать текст внутри

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

Вы спросите: «Но неужели указанные выше теги — это все, чем можно выделить текст в HTML»? Ну конечно же нет! Существуют еще теги и , подчеркивающие текст, а также тег , отображающий зачеркнутый текст. Но, видите ли, эти теги являются устаревшими в HTML и их, как и атрибут align , возможно скоро перестанут понимать браузеры. Поэтому я вам покажу другой способ, который вы можете использовать без опаски. А заключается он в применении атрибута style , причем его допустимо указывать внутри любых тегов . Общий синтаксис следующий:

…тег> — подчеркивает текст.

…тег> — надчеркивает текст.

…тег> — зачеркивает текст.

Пример изменения стилей шрифтов

Изменение стилей шрифтов

Жирный шрифт. Курсив.

Жирный курсив.

H₂ SO₄ — формула серной кислоты написанная курсивом.

Подчеркнутый параграф текста.

Обычный текст, зачеркнутый жирный.

Результат в браузере

Теперь хотелось бы сделать одно пояснение по поводу атрибута style . Style — это абсолютно обычный атрибут тегов, но относится он к Каскадным таблицам стилей (CSS). В далеком прошлом все функции по структуризации HTML-страницы в целом и по внешнему представлению ее каждого элемента в отдельности (цвет, форма, положение на странице и т.д.) брал на себя язык HTML. Но потом разработчики языка решили разграничить эти функции и создали CSS. Соответственно многие теги или атрибуты тегов стали устаревшими. Поэтому, чтобы не забивать вам голову ненужной информацией, в данном учебнике я тоже заменил их стилями, то есть атрибутом style . Его общий синтаксис следующий:

…тег>

Используя style вы совершенно ничего не потеряете, но зато научитесь писать грамотный HTML, а в качестве бонуса еще и CSS немного освоите.

Тег или что делать, когда нет нужных тегов

Ну что, пока все понятно? Хорошо, тогда вопрос. А что вы будете делать, если вам, например, надо зачеркнуть не весь параграф, а только половину текста, причем не делать его ни жирным, ни курсивом? Ну да не переживайте, тут вам поможет один очень удобный и нужный тег.

Итак, знакомьтесь — … . Этот тег тоже является встроенным (inline, уровня строки) и может содержать любые встроенные теги, но главное не это. Сам по себе , без атрибутов, не добавляет никаких изменений ни тексту, ни тегам находящимся внутри него. А создан он был специально для стилей, то есть, по сути, для атрибута style . Именно благодаря этому атрибуту, а вернее его разным значениям, у появляются те или иные свойства.

Вот так, а теперь изучаем пример.

Пример использования тега SPAN

Использование тега SPAN

Обычный текст без изменений.

Еще обычный текст. Подчеркнутый. Зачеркнутый.

Результат в браузере

Обычный текст без изменений.

Еще обычный текст. Подчеркнутый. Зачеркнутый.

Меняем имя (гарнитуру) шрифта

Не знаете что такое имя шрифта? Наверняка многие из вас хоть когда-то набивали текст в Microsoft Word или OpenOffice Writer и видели такое меню:

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

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

По умолчанию практически все браузеры используют шрифт «Times New Roman», а чтобы его изменить используется все тот же атрибут style , который можно применить внутри любого тега . Общий синтаксис указания следующий:

…тег>

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

Чтобы изменить шрифт на всей странице — достаточно указать атрибут style в теге

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

Пример изменения имени шрифтов

Изменение имени шрифтов

Это шрифт Arial, если его нет, то Verdana, а если и его нет, то любой другой из sans-serif.

Это Comic Sans MS или любой cursive.

Это опять Arial, Verdana или любой sans-serif. А это Courier или любой monospace.

Результат в браузере

Ну что, разобрались в примере? Сделаю одно пояснение, понимание которого вам серьезно облегчит жизнь в будущем, хотя думаю многие уже догадались. Итак, если теги вложены друг в друга и несколько из них осуществляют изменения одного типа (например, меняют имя шрифта), то теги-потомки переопределяют свойства тегов-предков. Если же вложенные теги осуществляют разные изменения, то они дополняют друг друга, вот и все.

Меняем размер шрифта

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

В CSS есть порядка десяти единиц измерения, но мы с вами рассмотрим только три самых популярных — это пункты (pt), пиксели (px) и проценты (%). Итак:

• pt — Пункты. Один пункт равен 1/72 дюйма, а один дюйм — 2.54см. Следовательно, 1pt = 0,03527778см. Это абсолютная величина, так как размер заданный в пунктах не зависит ни от чего.
• px — Пиксели. Измеряется в пикселях монитора компьютера. Пиксель — это самая маленькая точка на мониторе и она является относительной величиной, так как ее размер зависит от текущего разрешения экрана и размера самого монитора.
• % — Проценты. Высчитывается в процентах, где за 100% берется значение родительского тега, а если оно не указано, то значение в браузере по умолчанию. Это тоже относительная величина, ведь размер шрифта родителя может быть абсолютно разный, да и размер шрифта в браузере пользователи могут свободно менять.

Чтобы указать размер шрифта используется атрибут style и его можно указать внутри любого тега . Общий синтаксис такой:

…тег>

Как и в случае с именами шрифтов, чтобы изменить размер шрифта на всей странице — достаточно указать атрибут style в теге

. А если необходимо изменить шрифт для фрагмента текста, то заключите его в тег и примените атрибут к нему.

Пример изменения размера шрифтов

Изменение размера шрифта

Этот размер шрифта составляет 90% от размера в браузере по умолчанию.

Этот размер составляет 90% уже от размера в теге BODY.

Размер шрифта заголовка составляет 120% от размера в BODY.

Это опять 90% от размера в браузере по умолчанию. Размер этого шрифта 15 пунктов.

Результат в браузере

Этот размер шрифта составляет 90% от размера в браузере по умолчанию.

Этот размер составляет 90% уже от размера в BODY.

Размер шрифта заголовка составляет 120% от размера в BODY.

Это опять 90% от размера в браузере по умолчанию. Размер этого шрифта 15 пунктов.

Размер шрифта зависит не только от его явного указания, но и от его имени (гарнитуры) — разные шрифты могут иметь совершенно разные высоту и ширину букв, а также межбуквенное расстояние.

Еще немного об атрибуте style

Самое время раскрыть вам еще один секрет этого чудесного атрибута, но опять сначала задам вам вопрос. Как бы вы поступили, если бы вам надо было установить для всего параграфа имя шрифта Arial с размером в 80%? А я вам скажу, вы бы написали что-то подобное:

Текст параграфа.

Текст параграфа.

Или вообще вот так.

Текст параграфа.

Я прав? Ну что ж, если первые два варианта в принципе верны, то последний вообще с ошибкой, так как, если помните, в одном теге не может быть двух одинаковых атрибутов. А теперь пора вспомнить, что style — не просто атрибут, а атрибут относящийся к CSS. Посмотрите-ка на это:

Текст параграфа.

Гораздо проще, да? Самое главное не забывать ставить между соседними стилями точку с запятой (;) и брать все это «хозяйство» в двойные кавычки (» «), иначе применится только первый стиль, а остальные браузер проигнорирует. Ну мы ведь всегда с вами проставляем двойные кавычки, правда?

Так, этот урок вышел очень насыщенным, поэтому сделайте домашнее задание и немного отдохните.

Домашнее задание.

1. Создайте заголовок статьи и двух ее разделов, но заголовки разделов еще и подчеркните.
2. Сделайте так, чтобы при наведении курсора мыши на заголовок статьи появлялась соответствующая надпись.
3. Напишите один параграф в начале статьи и по два в каждом разделе.
4. Установите для всей страницы шрифт Arial с размером 90% от размера в браузере по умолчанию.
5. Установите для всех заголовков шрифт Times и пусть заголовок статьи будет с размером шрифта в 150%, а подзаголовки — 120%.
6. Выделите в первом параграфе два слова жирным шрифтом и одно курсивом. Во втором — фразу из нескольких слов жирным курсивом. В третьем — подчеркните фразу выделенную курсивом. В четвертом — зачеркните половину фразы выделенной жирным.
7. Напишите в последнем параграфе формулу спирта: C 2 H 5 OH.

Казалось бы, зачем знать HTML-теги для текста, если сейчас почти в любой админке есть удобный который выставляет их автоматически?

Дело в том, что форматирование контента на сайте в корне отличается от работы в офисных приложениях. Здесь недостаточно просто придать тексту привлекательный вид, ведь от правильного оформления зависит не только отображение веб-страницы, но и её продвижение в поисковиках.

HTML-теги и атрибуты: основы синтаксиса

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

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

Обратите внимание, что не все теги являются парными. Например,
(пропуск строки) или

---

(добавление горизонтальной линии) не нужно закрывать вообще.

Почему нельзя копировать статьи из Word и других программ в редактор сайта

Хотя современные офисные программы используют те же HTML-теги для текста, в 99% случаев родной код непригоден для веб-страниц. Даже если в самом приложении документ отображается нормально, при вставке на сайт форматирование может сбиться. Кроме того, из-за большого количества лишних тегов и атрибутов поисковики не могут адекватно проанализировать содержимое страницы. Что, в свою очередь, затрудняет продвижение вашего ресурса.

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

1. “Прогнать” статью через «Блокнот» и только после этого вставить на сайт. Приложение стирает весь HTML, так что после этого придётся форматировать текст заново (с помощью инструментов редактора или вручную).
2. Писать и публиковать статьи через LiveWriter. Популярный редактор блогов сразу генерирует правильный код. А в отдельной вкладке можно посмотреть, как будет выглядеть текст на сайте.
3. Использовать HTML Cleaner. Этот онлайн-сервис уничтожает не весь код целиком, а только лишние фрагменты. С помощью фильтров вы выбираете, какие теги нужно сохранить. Здесь же есть мощный визуальный редактор для форматирования, который добавляет в код уже оптимизированные команды.

Абзацы

Данный элемент присутствует практически во всех статьях. Каждый абзац должен располагаться внутри такого контейнера — это упрощает форматирование и позволяет сохранить единый стиль на всех страницах сайта. Для удобства тег

Всегда пишут с новой строки.

Выравнивание

Отдельный HTML-тег «Выравнивание текста» уже давно не используется. Вместо этого был создан универсальный атрибут ALIGN. Чтобы изменить положение текстового блока на странице, необходимо выбрать одно из 3-х значений — CENTER, RIGHT или LEFT. Точно так же можно задать выравнивание для других элементов — например, заголовков.

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

…

. Чем удобен отдельный тег? В отличие от атрибута, он работает с любым контентом, включая фото, видео, flash и т. д.

Заголовки и подзаголовки

Система подзаголовков позволяет создать логичную структуру контента. Когда текст разбит на смысловые блоки, читателю гораздо проще сконцентрироваться и усвоить новую информацию. Поисковики также анализируют заголовки, чтобы понять, по каким запросам продвигать страницу. Именно поэтому специалисты по SEO рекомендуют использовать в них тематические ключи.

В HTML используются шесть уровней подзаголовков — от

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

или

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

).

А вот схема, которая поможет моментально понять и запомнить правильную структуру заголовков в HTML.

Списки

Любые перечисления и инструкции лучше оформлять в виде списков, используя специальные HTML-теги для текста (типичная ошибка — просто несколько абзацев

Которые начинаются с дефиса или цифры).

Структура таких блоков очень проста. Вначале определяем тип списка — маркированный или нумерованный .

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

Выбор и его атрибуты

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

имеет несколько атрибутов:

• Face . Позволяет менять шрифт текста. Можно перечислить несколько вариантов через запятую (Tahoma, Verdana). Если у пользователя не установлен первый шрифт, система просто использует альтернативу.
• Size . Чтобы увеличить или уменьшить текст, укажите в кавычках значение от 1 до 7.
• Color . В зависимости от дизайна можно выбрать один из стандартных оттенков (red, green, blue) или ввести код любого цвета на выбор.

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

Способы выделения текста

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

… . Чрезвычайно популярный HTML-тег. Жирный текст сразу бросается в глаза, а потому с его помощью удобно выделять важные тезисы и факты.

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

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

… . Пожалуй, столько споров не вызывал ни один HTML-тег. Подчёркивание текста используется редко, так как данный способ выделения исторически закрепился за гиперссылками. Если же вы используете в статьях, учтите, что это подходит только для коротких фрагментов — не более 1 строки.

… . Интересный тег, который позволяет сделать часть Очень актуален в рекламе — например, чтобы подчеркнуть контраст между старой и новой ценами.

… . Самый простой способ увеличить размер шрифта без каких-либо дополнительных параметров.

… . Работает по тому же принципу, что предыдущий тег. Текст, расположенный внутри, уменьшается относительно основного.

^…. Правильное название такого формата — верхний индекс. В основном данный тег предназначен для математических степеней и сносок. Он уменьшает размер шрифта и смещает выделенный текст вверх.

_…. Нижний индекс часто встречается в различных формулах. Выделенный фрагмент располагается ниже основного текста.

Смысловые контейнеры

Так как некоторые блоки встречались во многих текстах, для них начали создавать специальные теги. Это упрощает форматирование, ведь если каждый тип контента имеет свой набор стилей, достаточно выделить фрагмент текста и указать, какая информация в нём содержится.

... . Тег для добавления компьютерных кодов. Незаменим в статьях по программированию с примерами — команды не выполняются, а отображаются, как обычный текст.

… . Предназначен для оформления цитат — например, ключевых выдержек из интервью.

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

…

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

Разделительная линия

---

С помощью простой черты можно обозначить логическое окончание большого раздела.

---

не относится к парным тегам. Это значит, что закрывающий элемент формата …> не нужен.

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

Научившись грамотно использовать теги для форматирования текста в HTML, вы не только сделаете свои статьи удобными для чтения, но и повысите эффективность SEO.

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

Для задания цвета достаточно указать его название, например: red, green, blue. Рассмотрим небольшой пример:

Урок 6. Изменяем цвет текста

Текст зеленого цвета

Текст красного цвета

Текст фиолетового цвета

Посмотрим результат в браузере:

Текст в первом абзаце стал зеленым, во втором – красным, а в третьем – фиолетовым. Всего существует 16 названий основных цветов и 130 дополнительных. Полный список цветов вы можете посмотреть в таблице цветов html.

Этот способ обозначения цвета очень прост, но весьма ограничен. Поэтому для того чтобы изменить цвет в html – коде, чаще используют шестнадцатеричное число перед которым стоит знак решетки (#), например:

С помощью такого обозначения можно получить более 16 миллионов цветов и их оттенков! Получить код цвета можно с помощью конвертера цветов HEX , который имеется на сайте, или воспользовавшись палитрой цветов в том же Photoshop. Рассмотрим пример и запишем следующий код:

Урок 6. Изменяем цвет текста

Текст зеленого цвета

Текст красного цвета

Текст фиолетового цвета

Сохраним файл и посмотрим на результат:

Как вы видите, мы задали тексту те же цвета, как и в первом примере, только здесь мы воспользовались шестнадцатеричной системой исчисления или другими словами, мы задали цвет в формате HEX.

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

Задаем тексту несколько параметров

Задаем тексту шрифт, размер и цвет

Задаем тексту шрифт, размер и цвет

От автора: приветствуем вас на страницах блога Webformyself. В этой статье я хотел бы ответить на вопрос, как задать шрифт в html. Кое-кто все еще делает это неправильным образом, поэтому очень важно разобраться с вопросом более тщательно.

Как задавали шрифт раньше

Ранее в html использовался специальный парный тег font, который выступил как контейнер для изменения параметров шрифта, таких, как гарнитура, цвет и размер. Сегодня такой подход является в корне неверным. Почему? Веб-стандарты определяют, что внешний вид страницы не должен прописываться в html-разметке. К тому же, тег поддерживается полноценно только в очень старой версии HTML – HTML 3.

Задание шрифта в html правильным образом

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

Font-style. Определяет начертание текста. Принимает такие значения:

Font-variant. Свойство назначает, как нужно интерпретировать написание строчных букв. Имеет всего два значения:

Normal – обычное поведение.

Small-caps – все строчные буквы преобразовываются в заглавные, а их размер немного уменьшается по сравнению с обычным шрифтом.

Font-weight. Определяет жирность текста. Значение можно задавать ключевыми словами или числовым значением. Давайте рассмотрим все варианты:

Normal – обычный текст

Bold – текст с жирным начертанием

Bolder – будет выводиться жирнее, чем он выводится у родительского элемента.

Lighter – буквы получат меньше жирности, по сравнению с родителем.

Вот так все просто. Кроме этого, есть возможность задавать значение в виде чисел от 100 до 900, где 900 – самый жирный. К примеру, значению normal соответствует 400, а bold – 700.

К сожалению, большинство браузеров не распознают этих числовых значений и могут применять всего два значения – normal и bold. Для эксперимента я создал 9 абзацев и задал каждому разную жирность текста – от 100 до 900. Потом открыл эту веб-страничку в разных браузерах и ни один не отобразил разные начертания. Вывод: лучше не применяйте числовые значения.

Font-size. Это свойство задает размер букв. Размер можно задавать в различных относительных и абсолютных величинах. Чаще всего размер задается в пикселах, относительных единицах em и процентах. Если вы хотите подробнее ознакомиться с заданием размера в css, то почитайте эту , где все описано более подробно.

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

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

Сокращенная запись

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

Font: font-style | font-variant | font-weight | font-size | font-family;

Font : font — style | font — variant | font — weight | font — size | font — family ;

Если какой-то параметр вам указывать не нужно, то он просто опускается. Обязательными здесь являются только размер и семейство шрифта, все остальное указывать необязательно, если в этом нет необходимости. Использование сокращенной записи позволяет сильно сократить код в css. Пользуйтесь ею, потому что это хорошая оптимизация для работы сайта.

Как задать шрифт в html разным элементам

Так, что-то мы сильно увлеклись описанием всех свойств для шрифта. Это очень важная информация, но как вообще его правильно задавать? Используйте нужные селекторы, чтобы дотянуться до нужных элементов. Дальше я предлагаю несколько примеров:

p a{ font-family: Verdana, sans-serif; }

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

Шрифты — Учебник CSS — Schoolsw3.com

---

❮ Назад Далее ❯

---

CSS свойство font задает шрифту, утолшение, размер и стиль текста.

---

Разница между Serif и Sans-serif

---

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

В CSS, существует два типа имен семейства шрифтов:

• Стандартные семейства — группа семейств шрифтов с похожим видом "Serif" или "Monospace"
• Семейства шрифтов — конкретный шрифт "Times New Roman" или "Arial"

Стандартные семейства	Семейства шрифтов	Описание
Serif	Times New Roman Georgia	Шрифты с засечками имеют небольшие линии на концах некоторых букв
Sans-serif	Arial Verdana	"Sans" без засечек — шрифты не имеют засечки на концах букв
Monospace	Courier New Lucida Console	Моноширинный шрифт все буквы имеют одинаковую ширину

Примечание: На экранах компьютеров, без засечек шрифты легче читать, чем шрифты с засечками.

---

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

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

Свойство font-family следует установить несколько названий шрифтов в качестве «запасного варианта» для системы. Если браузер не поддерживает первый шрифт, он пробует следующий шрифт и так далее.

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

Примечание: Если название семейства шрифта более одного слова, оно должно быть в кавычках: "Times New Roman".

Более одного семейства шрифтов указывать через запятую:

Пример

p {
   font-family: «Times New Roman», Times, serif;
}

Попробуйте сами »

Для часто используемых сочетаний шрифта, посмотрите на наши Безопасные Комбинации Веб Шрифтов.

---

Стиль шрифта

Свойство font-style в основном используется для установки курсивного текста.

Свойство имеет три значения:

• normal — Текст отображается нормально
• italic — Текст отображается курсивом
• oblique — Текст отображается наклонным, он очень похож на курсив, но менее поддерживается браузерами

Пример

p.normal {
   font-style: normal;
}

p.italic {
   font-style: italic;
}

p.oblique {
   font-style: oblique;
}

Попробуйте сами »

---

Размер шрифта

Свойство font-size устанавливает размер шрифта текста.

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

Всегда используйте правильные теги HTML, для заголовка <h2> — <h6> и <p> для параграфа.

Значение свойства font-size может быть размер абсолютный или относительный

Абсолютный размер:

• Задает указанный размер текста
• Не позволяет пользователю менять размер шрифта во всех браузерах (плохо по соображениям доступности)
• Абсолютные величины полезны, когда известен результат физического размера

Относительный размер:

• Задает размер относительно окружающих элементов
• Позволяет пользователю менять размер шрифта в браузерах

Примечание: Если не указать размер шрифта, размер по умолчанию будет как обычный текст параграфа 16px (16px=1em) .

---

Размер шрифта в процентах

Настройка размера текста с пикселями дает Вам полный контроль над размером текста:

Пример

h3 {
   font-size: 40px;
}

h4 {
   font-size: 30px;
}

p {
   font-size: 14px;
}

Попробуйте сами »

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

---

Размер шрифта в em

Чтобы разрешить пользователям изменять размер текста (в меню браузера), многие разработчики используют em вместо пикселей.

Размер в em рекомендуется консорциумом W3C.

1em равен текущему размеру шрифта. Размер текста по умолчанию в браузерах 16 пикселей. Значит, размер по умолчанию 1em составляет 16px.

Размер может быть вычислен из пикселей в em, используя эту формулу: px / 16 = em

Пример

h3 {
   font-size: 2. 5em; /* 40px/16=2.5em */
}

h4 {
   font-size: 1.875em; /* 30px/16=1.875em */
}

p {
   font-size: 0.875em; /* 14px/16=0.875em */
}

Попробуйте сами »

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

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

---

Использовать сочетание % и em

Решение, которое работает во всех браузерах, установит размер шрифта по умолчанию в процентах для елемента <body>:

Пример

body {
   font-size: 100%;
}

h3 {
   font-size: 2.5em;
}

h4 {
   font-size: 1.875em;
}

p {
   font-size: 0.875em;
}

Попробуйте сами »

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

---

Полнота шрифта

Свойство font-weight задает полноту шрифта:

Пример

p. normal {
   font-weight: normal;
}

p.thick {
   font-weight: bold;
}

Попробуйте сами »

---

Варианты шрифта

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

Значение шрифта small-caps, устанавливает все строчные буквы в большом прописном шрифте. Тем не менее, заглавные буквы будут выглядеть на размер больше, тем оригинальней будут выглядеть заглавные буквы в тексте.

Пример

p.normal {
   font-variant: normal;
}

p.small {
   font-variant: small-caps;
}

Попробуйте сами »

---

Еще примеры

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

---

Проверьте себя с помощью упражнений!

Упражнение 1 »  Упражнение 2 »  Упражнение 3 »  Упражнение 4 »  Упражнение 5 »

---

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

Свойство	Описание
font	Устанавливает все свойства шрифта в одном объявлении
font-family	Устанавливает шрифт для текста
font-size	Устанавливает размер шрифта текста
font-style	Устанавливает стиль шрифта для текста
font-variant	Указывает, должен ли текст должен отображаться в малым прописным шрифтом
font-weight	Устанавливает полноту шрифта

---

❮ Назад Далее ❯

Семейство шрифтов Metropolis · 1001 шрифтов

Произошла ошибка. Пожалуйста, повторите попытку позже.

Made by

Chris Simpson

Tags

• geometric
• minimalistic
• sans serif
• text
• small text
• medium

Styles

• Metropolis Regular

  OT

   OTF Водопад 286 символов

• Metropolis Thin

  OT

   OTF Waterfall 286 characters

• OT

   OTF Waterfall 286 characters

• Metropolis Light

  OT

   OTF Waterfall 286 символов

• medium.otf»>

  Metropolis Medium

  OT

   OTF Waterfall 286 characters

• Metropolis Semi Bold

  OT

   OTF Waterfall 286 characters

• Metropolis Bold

  OT

   OTF Waterfall 286 символов

• OT

   OTF Водопад 286 символов

• Metropolis Black

  OT

   OTF Waterfall 286 characters

• Metropolis Regular Italic

  OT

   OTF Waterfall 286 characters

• thin-italic.otf»>

  Metropolis Thin Italic

  OT

   OTF Водопад 286 символов

• OT

   OTF Waterfall 286 characters

• Metropolis Light Italic

  OT

   OTF Waterfall 286 characters

• Metropolis Medium Italic

  OT

   OTF Waterfall 286 символов

• Metropolis Semi Bold Italic

  OT

   OTF Waterfall 286 characters

• Metropolis Bold Italic

  OT

   OTF Waterfall 286 characters

• extra-bold-italic.otf»>

  OT

   OTF Waterfall 286 characters

• Metropolis Black Курсив

  OT

   OTF Водопад 286 символов

Лицензия

• Free for personal use
• Free for commercial use

Metropolis is licensed under the SIL Open Font License (OFL)

Gallery

Statistics

Display Problems

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

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

Существует несколько полных шрифтов Unicode для текст фиксированной ширины. К счастью, веб-контента, который требует такие шрифты! В следующих разделах описывается, как получить шрифты для различных платформы: вы также можете найти другие шрифты в ресурсах Unicode по адресу Шрифты. В идеале вы должны установить шрифты, настроенные для сценарии, которые вам особенно нужны, затем также установите один или несколько Шрифты Unicode с большим охватом в качестве резервной копии, такие как Code2000 или Ариал Юникод Майкрософт. Шрифт Last Resort доступен в качестве резервной копии «последнего средства». Это содержит набор глифов для использования, когда нет другого шрифта. доступны для отображения определенного символа Unicode.

Windows

Для Windows XP установка дополнительных языков осуществляется следующим образом:

Пуск > Настройки > Панель управления > Язык и региональные стандарты.

На вкладке «Языки» отметьте нужные параметры поддержки дополнительных языков. Установка обоих параметров приведет к установке всех дополнительных шрифтов. Это добавляет шрифты, а также системную поддержку этих языков.

Полные шрифты:

Если у вас есть Microsoft Office 2000 и более поздние версии, вы можете получить шрифт Arial Unicode MS, который является наиболее полным. Чтобы получить его, вставьте компакт-диск Office и выполните выборочную установку. Выберите «Добавить или удалить функции». Щелкните значок (+) рядом с пунктом «Инструменты Office», затем «Международная поддержка», затем значок «Универсальный шрифт» и выберите нужный вариант установки.

Чтобы настроить шрифт всплывающей подсказки для отображения Unicode символов:

Щелкните правой кнопкой мыши на рабочем столе, выберите Свойства>Внешний вид>Дополнительно>Элемент: Подсказка, затем установите шрифт на Arial Unicode MS или другой крупный шрифт.

Макинтош

В OS X все основные веб-браузеры полностью поддерживают Unicode, как и большинство приложений. Для любого сценария Unicode не требуется устанавливать специальное программное обеспечение.

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

Чтобы сделать клавиатуры для разных языков доступными, запустите «Системные настройки» и загрузите панель настроек «Язык и текст». (В старых системах это называется панелью настроек «Международные».) Выберите вкладку «Источники ввода». Это покажет список всех доступных клавиатур и методов ввода. Выберите те, которые вы хотите использовать. Если у вас есть меню «Ввод», отображаемое в строке меню, вы можете переключать клавиатуры и методы ввода с помощью меню или использовать сочетания клавиш, которые вы определили на панели настроек «Клавиатура».

Юникс

Ряд вполне исчерпывающих кодов Unicode фиксированной ширины на экране. пиксельные шрифты для пользователей X11/Unix можно загрузить с http://www. cl.cam.ac.uk/~mgk25/ucs-fonts.html
или непосредственно как http://www.cl.cam.ac.uk/~mgk25/download/ucs-fonts.tar.gz
Подробную информацию об установке см. в прилагаемом файле README. инструкции.

Более ранняя версия этих шрифтов уже автоматически устанавливается при использовании X-сервера XFree86 4.0, который обычно используется под Linux.

Веб-браузер Firefox может использовать этих шрифтов напрямую. Просто выберите «-misc-fixed-iso10646-1». шрифт для категории «Юникод» в «Правка|Настройки|Шрифты» настройки.

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

Internet Explorer

IE довольно умен в выборе настроенных шрифтов для разных символы. Чтобы установить ваш шрифт по умолчанию для данного блока символов, выберите «Инструменты» > «Свойства обозревателя» > «Шрифты», затем выберите шрифты.

Моноширинные шрифты:

IE использует шрифт веб-страницы для обозначения переменной ширины, и обычный текстовый шрифт для обозначения фиксированной ширины. К сожалению, IE не будет позволяет выбрать шрифт переменной ширины в поле Шрифт обычного текста. Что на практике означает, что вы просто не можете просматривать большинство символов Unicode фиксированной ширины.

Фаерфокс

Вам нужно будет указать, какие шрифты использовать для каких кодировок. Чтобы установить шрифт по умолчанию для данного блока символов, выберите «Правка» > «Установки» > «Шрифты». Затем для каждой кодировки вы использовать, выберите подходящие шрифты для Variable Width и Шрифты фиксированной ширины. Особенно важно установить шрифты по умолчанию для Юникода.

Моноширинные шрифты:

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

Чтобы позволить аплетам Java (и/или программам) отображать символы Unicode в имеющихся у вас шрифтах, вам потребуется вручную отредактировать файлы конфигурации шрифтов, которые использует среда выполнения Java. Поскольку на вашем компьютере может быть установлено несколько сред выполнения Java (для разных браузеров, сред разработки и т. д.), вам может потребоваться сделать это несколько раз.

Процесс описан в документации Java и зависит от версии:

• Ява ​​5: http://java.sun.com/j2se/1.5.0/docs/guide/intl/fontconfig.html
• Ява ​​6: http://java.sun.com/javase/6/docs/technotes/guides/intl/fontconfig.html

Следующая ссылка из Алана Вуда Ресурсы Unicode также предлагают полезную информацию о конкретных темы.