Font size тег: font-size | htmlbook.ru

Содержание

Теги Font (Face, Size и Color), Blockquote и Pre — устаревшее форматирование текста в чистом HTML (без использования CSS)

Обновлено 10 января 2021 Просмотров: 107 536 Автор: Дмитрий Петров

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня продолжим добавление новых материалов по тематике чистого Html. Чуть позже мы перейдем к изучению CSS, но сначала следует разобрать все нюансы, связанные с языком ХТМЛ. До этого уже успели рассмотреть директивы комментариев и doctype, а также теги h2-H6 (заголовки), Hr (линия), P (абзац), Br (перенос строки) и атрибуты Html тэгов (align, width).

Мы узнали как добавить средствами таблицу, а также как вставить картинку в Html код через тег Img, создать веб форму или список через теги UL, OL, LI, DL, ну и еще, в свое время, мы успели затронуть основы популярной верстки сайтов. Сегодня продолжим рассмотрение различных тэгов, а именно Font, Blockquote, Pre, Strong, Em, B, I и других, позволяющих осуществлять форматирование текста.


Blockquote и Pre — форматирование в HTML

Раньше(еще до появления CSS) тег цитаты Blockquote в Html коде использовался довольно часто, потому что фрагмент текста, заключенный в него, получал горизонтальный отступ, что было не так-то просто сделать в то время в силу невозможности использования CSS свойств. Элемент Blockquote является парным и внутри него могут находиться как строчные теги, так и блочные (например, абзацы P).

<p>Пример</p>
<blockquote><p>Пример, заключенный в Blockquote</p></blockquote>

Сейчас тег Blockquote по-прежнему используется при оформлении текста, но внешний вид цитат в наше время уже обычно задается с помощью CSS свойств, прописанных именно для него в файле с таблицами стилей вашего шаблона оформления. Например, в случае моего блога, в style.css можно найти следующие строки:

#content blockquote{margin:15px 0 20px 0;padding:5px 8px 5px 35px;background:#eaedf0 url(images/quote2.
png) no-repeat left top;background-position:8px 5px;color:#666;font-size:14px;width:91%;font-style:italic;} #content blockquote p{color:#666;font-size:14px;}

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

Кроме цитаты в Html раньше (до появления CSS) довольно широко использовался еще один тег форматирования — Center. Он является парным (своеобразный контейнер) и блочным. В нем можно заключать любые элементы текста (как строчные, так и блочные), которые в результате сего действа будут выровнены по центру.

Сейчас этот тег Center не рекомендован валидатором WC3 для применения, но вполне может использоваться при форматирования, например, в почтовой рассылке на subscribe, когда стилевое оформление применять будет сложновато.

Так, теперь давайте рассмотрим тэг Pre, который позволяет передать форматирование текста заданное непосредственно в исходном коде.

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

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

Т.е. все строки внутри элемента Pre будут считаться браузером неразрывными — как вы написали в коде, так и будет отображаться в браузере. Причем, в обозревателе для отображения участка текста, отформатированного с помощью тега Pre, будет использоваться моноширинный шрифт, типа Courier New или подобные ему.

<pre>
форматирование в исходном коде
 тэг Pre
		 теги устаревшие
</pre>

Сам тэг Pre является блочным, а внутри него (этот тег парный) может быть заключен только строчный контент (т.е. внутри него не следует размещать абзацы P, заголовков h2 — H6 и т. п.).

В Html есть еще один блочный тэг, который предназначен для форматирования текста — Address. Внутри этого тега может располагаться по стандартам валидатора только строчный контент, который будет отображен в браузере курсивом.

Font — работа с цветом и шрифтом текста в чистом Html

Помните, мы говорили про цвета в Html коде? Так вот, раньше в языке гипертекстовой разметки, когда еще и речи не шло про CSS, для задания цвета текста в документе использовали специальный атрибут Text, который прописывался в тэге Body (а через атрибут Bgcolor можно было задать цвет фона для документа):

<body text="#ffffff" bgcolor="red">

Если нужно было изменить цвет небольшого фрагмента текста, то использовали атрибут Color в теге Font, который на данный момент является устаревшим и не рекомендованным к применению валидатором W3C, но его еще можно встретить в коде некоторых движков сайтов (систем управления контентом или CMS, о которых тут шла речь), да и в той же почтовой рассылке он может использоваться.

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

Тег Font является строчным и поэтому внутри него можно заключать только строчные элементы (абзацы и заголовки внутрь него попадать не должны, иначе Html код перестанет быть валидным). Естественно, что он является парным, т.е. вы с помощью него заключаете слова в своеобразный контейнер для его последующего форматирования.

<font color="red"> Устаревшее форматирование фрагмента текста</font>

Устаревшее форматирование — несколько слов, покрашенных в красный цвет с помощью Font и его атрибута Color. Но этот элемент может не только изменять цвет заключенного внутри него слова, но и изменять его размер (атрибут Size) и начертание шрифта (атрибут Face).

Задавая размер шрифта с помощью атрибута Size тега Font, вы могли использовать только семь значений (от 1 до 7 — это не пиксели, а относительные размеры). Причем, базовый размер шрифта, принятый в браузере по умолчанию, соответствовал значению Size равному трем, а шестерка соответствовала размеру заголовка h2, принятому в данном браузере. Все остальные цифры для Size отдавались на усмотрение данного конкретного обозревателя.

Задаем тип шрифта в чистом Html с помощью Face для элемента Font

Теперь давайте рассмотрим задание начертания шрифта в чистом Html коде (без использования таблиц каскадных стилей) с помощью Face.

Вообще, все шрифты делятся на несколько больших групп:

  1. Серифные (serif) или же, по-другому, с засечками (засечки идут по верхнему и нижнему краю букв этих шрифтов). К этому типу относится Times New Roman.
  2. Рубленные(sans-serif) или, по-другому, без засечек, ярким представителем которых является Arial.
  3. Моноширинные (monospace) — все буквы в таких шрифтах имеют одинаковую ширину. Типичным представителем является все тот же Courier.

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

Т.е. в любом браузере будет задан шрифт и его размер для любого из трех основных семейств (serif, sans-serif и monospace). Если в Html коде начертание и размер будут явно заданы, то они и будут использоваться браузером для отображения.

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

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

Посмотрим это на примере тега Font. Итак, заключаем нужный кусок текста в фонты и прописываем в открывающем элементе значения для атрибута Face в виде перечня шрифтов, которые вы хотели бы здесь использовать (в порядке убывания их приоритета). Например, так:

<font face="Verdana,Arial,sans-serif">фрагмент текста</font>

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

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

А вот если вы не укажете в атрибуте Face тега Font в самом конце название семейства (в нашем примере это sans-serif), то будет взят тот шрифт, который в браузере принят по умолчанию для всех случаев жизни, и он уже может быть не из того семейства, которое вы хотели бы.

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

Но тем не менее есть набор шрифтов, которые с большой долей вероятности найдутся на компьютерах с ОС Windows, а также и на Линуксе, и Макинтоше, и которые будут входить в базовую поставку всех этих операционных систем.

Т.е. без особых проблем можно использовать на своем сайте Arial, Verdana, Times New Roman, Tahoma, Georgia, Trebuchet MS, Courier New, Comic Sans MS. Одно из возможных решений проблемы скудности шрифтов я подробно описал в статье Красивые шрифты для сайта в онлайн сервисе Google Font.

Strong, Em — тэги логических и визуальных выделений в тексте

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

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

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

Если вы помните, то не так уж давно оптимизаторам советовали выделять значимые места с ключевыми словами (как нужно выделять ключевые слова в тексте) тегами логического форматирования Strong и EM, которые для пользователя будут выглядеть как обычное выделение жирным и курсивом.

А вот для выделений без ключевых слов советовали использовать Html элементы «B» и «I», которые для пользователей опять же выглядели бы тоже как выделение жирным и курсивом, но уже поисковыми машинами не учитывались, т.к. они не являются тэгами логического форматирования.

Сейчас все это уже практически не работает так, как задумывалось, и выделение ключевых слов с помощью Strong и EM мы делаем скорее по привычке, нежели действительно надеясь на определенные дивиденды за это со стороны поисковых систем.

Хотя, кто их знает, может быть мало-мальское влияние Strong и EM на оптимизацию текста еще осталось (читайте про продвижение сайтов своими силами).

Итак, кроме уже упомянутых «B» и «I» (выделение жирным и курсивом) к разряду визуального форматирования можно отнести уже рассмотренные в начале статьи Font, Pre, а также теги:

  1. «U» — выделение подчеркиванием
  2. «Strike» — перечеркивание
  3. «Sup» — верхний индекс
  4. «Sub» — нижний индекс
  5. «Tt» — выделение моноширинным шрифтом
  6. «Big» — увеличить шрифт
  7. «Small» — уменьшить шрифт

Ну, а теперь давайте рассмотрим перечень элементов логического форматирования текста:

  1. «Em» — логическое выделение важных фрагментов курсивом
  2. «Strong» — то же самое, но только выделяться будет жирным
  3. «Cite» — выделение цитат курсивом
  4. «Code» — предназначен для отображения разнообразных кодов моноширинным фонтом
  5. «Samp» — для выделения нескольких символов моноширинным фонтом
  6. «Abbr» — в атрибуте Title этого тэга прописывается расшифровка какой-либо аббревиатуры (типа, CSS или Html, которые читаются по буквам, а не как единое слово). Прописанные в Title слова будут всплывать при подведении к этой аббревиатуре курсора мыши.
  7. «Acronym» — то же самое, но используется для акронимов, т.е. сокращений, которые читаются не по буквам, а как слово (например, МКАД или Гаи)
  8. «Kbd» — используется для отображения моноширинным шрифтом текста, вводимого пользователем сайта с клавиатуры
  9. «Var» — используется для выделения курсивом переменных в каком-либо коде
  10. «Del» — выделение перечеркиванием, когда требуется показать, что какой-то фрагмент был удален после опубликования Html документа
  11. «Ins» — выделение подчеркиванием, когда нужно показать, что какой-то кусок был вставлен после публикации Html документа

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

Внимание! Тег Font и атрибуты Html тэгов (align, width) сейчас не рекомендуются к использованию. Вместо них нужно использовать соответствующие CSS свойства.

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

HTML Шрифты тег b, i, u, font. Как в HTML придать шрифту тот или иной вид? Теги наклонный, выделеннный, и жирный наклонный.

  Содержание:
Об этой книге
Введение в HTML
Нужные программы
Шрифты, размер
Гиперссылки
Цвет
Таблицы
Вставляем картинку
Работаем с фоном
Спецсимволы
Фреймы
Слои
стили, CSS
SSI
Локальный сервер
JavaScript
понятия

специальные теги:
title=
alt=

Сборник самоучителей Gleb®
Если вы уже создали сайт, вы можете заработать ЗДЕСЬ на размещении рекламы на своем сайте .
HTML для тех, кто в танке
   
Шрифты.
  Шрифт — это таблицы замены кода видимым изображением.
  То есть, собсно шрифтом. Каждая клавиша вашей клавиатуры дает определенный код, распознаваемый ОС (операционной системой, в большинстве случаев это Windows или Linux/Unix).
  Таким образом, выбрав определенный шрифт, система заменяет полученный с клавиатуры код на сопоставленное в таблице символов шрифта изображение буквы или значка.
Каждый шрифт — это файл. Файл, содержащий изображения букв, цифр и символов, назначаемых на каждую кнопку. Установить шрифт — означает включить в систему файл с дополнительными таблицами сопоставления. В системах MS Windows обычно используется несколько шрифтов, поставляемых вместе с системой — это:
Arial Ариал
Courier New Курьер Нью
Comic Sans
Комик Санс
Times New Roman   Таймс Нью Роман
Verdana Вердана

  Каждый из этих шрифтов уместен в своем дизайне и стиле. Наиболее распространен — Ариал. Все эти шрифты есть у 90% всех посетителей вашей будущей странички. Каждый шрифт — это самостоятельный файл в папке Windows/fonts/ *.ttf
   Поэтому, если вы имеете какой-либо нестандартный шрифт и хотите его использовать, вам придется: а) доставить этот файл пользователю, что, учитывая вес файла в 150-300 кб, не пятисекундная задача, либо б) ограничиться имеющимися, заменив остальное лишь графикой, то есть, картинками (советую соблюдать меру ;0)
   
  Как в HTML придать шрифту тот или иной вид?
  Тег, назначающий шрифт — <font>содержимое тега — то, на что повлияют параметры тега</font>
   В это самое <font> мы сейчас и будем вставлять параметры. .. Обращу ваше внимание на то, что вставляются все параметры именно в начало тега, а не в конец. В замыкающий тег вообще ничего никогда не вставляется.
  Итак:
  размер шрифта — <font size=»число от 1 до 7″>

текст размера 1
текст размера 2
текст размера 3
текст размера 4

текст размера 5
текст размера 6
текст размера 7

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

  Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст.

Если правильно подобрать размеры, смотрится вполне приятно.

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

face=»название шрифта» (пример: face=»Comic Sans MS»)
Эти два тега — размер и вид шрифта, — можно расположить в любой последовательности в теге <font> — что

<font size=»1″ face=»Comic Sans MS»>текст</font>

что

<font face=»Comic Sans MS» size=»1″>текст</font>

Главное тут следить, чтобы задаваемые параметры (в даном случае это имя шрифта и его размер) были выделены кавычками и находились внутри тега <font> межу font и >

Теперь, для лучшего понимания таких терминов, как «контейнер»,, «вложеный тег» и «наследование», рассмотрим ниже следующий пример:

<font face=»Название шрифта» size=»1″>
<i>
< font size=»4″>Заголовок </font>
   
   текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст
</i>
< font size=»4″>Заголовок </font>

текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст

</font>

Как видим из примера, вовсе необязательно каждый раз писать цвет, размер и имя шрифта. Все эти параметры «наследуются» младшими тегами, то есть теми, что вложены в другие. Разъясню. Пример выше словами: задали имя шрифта; оно сохранится во всем пространстве, ограниченном тегами с именем.
  Затем задана наклонность шрифта тегом <i></i> Контейнер этого тега включает в себя и заголовок (размер 4) и текст.

  Так же в работе с текстом помогает и тег, обозначающий абзацы — это <p></p> — все, помещенное в них, отделяется сверху и снизу пробелом и может иметь собственные параметры абзаца,, прописываемые прямо в теге — <p align=»center»>текст</p>.
   Пробелы между выделением абзаца, являющиеся скорее недостатком, чем полезностью, можно убрать при помощи CSS, о котором будет отдельная глава.

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

<i>текст</i>
<b>текст</b>

и их сочетанием — <b><i> текст </i></b>

Сочетание вида м — <b><i> текст</b></i> в большинстве броузеров вызовет ошибку, в результате которой ваша страничка может криво отобразиться или не отобразиться вообще: зависит от устойчивости броузера. Мозилла, например, проглотит и поймет это правильно, а вот большинство других — «заорут». Поэтому советую писать правильно.

Собственно, вот полный список таких тегов и, заодно, как это выглядит в броузере:
<b>жирный шрифт</b>
<strong>жирный шрифт</strong>
— (аналог <b></b>)
<i>
наклонный шрифт</i> — (курсив)
<em>
наклонный шрифт</em> — (аналог <i></i>)
<u>пАдчёркнутый шрифт</u>
<s>перечёркнутый шрифт</s>
<strike>перечёркнутый шрифт</strike> (аналог <s></s>)
<big>текст отображается больше, чем основной шрифт</big>
<small>текст отображается меньше, чем основной шрифт</small>
<sub>
нижний индекс</sub> и <sup>верхний индекс</sup>

<code>текст отображается как код или формула (чаще всего как шрифт Courier)</code>
<tt>
текст отображается моноширинным шрифтом (чаще всего шрифт Courier)</tt>
<kbd>
текст отображается моноширинным жирным шрифтом</kbd>
<var>
отображение переменных (как правило — курсив)</var>
<cite>
отображение цитат (как правило — курсив)</cite>
<address>
так обозначается адрес (как правило, курсив) </address>
<blockquote>

Эта фича смещает весь абзац (заключенный в нее текст) на энный отступ слева — нужно для упрощения дизигна, чтоб не равнять таблицами или пробелами. Иногда очень облегчает жизнь :0)
</blockquote>

Попробуйте использовать и такое:

<blockquote>
<blockquote>

текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст..
</blockquote></blockquote>

И собственно, тег <br> — эта фича закрытия не требует.
Для тех, кто в танке: </br> не пишем!
Это просто переход к следующей строке, чтобы, например, писать стихи в столбик:
Тщетны надежды и усилья,
гранит науки покусать,
не те уж зубы, руки, крылья,
ну что ж. .. тогда хоть полизать… ;0)

    Кроме прочего, стоило бы упомянуть такие теги, как <h2></H>, но, будучи вставлены в текст, «по умолчанию» они непоправимо изуродуют дизайн. Посему про них я напишу после рассмотрения CSS, ибо без серьезной «доводки» при помощи стилей теги эти неудобоваримы и бесполезны.

    Списки.
   Вместо того, чтобы нумеровать все вручную, вместо запарок с выделениями разного рода и калибра, намного проще воспользоваться малоизвестными, но поддерживаемыми всеми бродилками, тегами <UL> и <LI>:

как это выглядит: Код:
  •   строка 1
  •   строка 2
  •   строка 3
<ul>
  <LI>строка 1
  <LI>строка 2
  <LI>строка 3
</ul>

списки могут быть и вложенными:
как это выглядит: Код:
  •  тема 1
    1. подтема 1
    2. подтема 2
      1. подподтема
    3. подтема 3
  •  тема 2
<UL>
   <LI>тема 1
          <OL>
   <LI>подтема 1
   <LI> подтема 2
          <OL start=»10″>
   <LI> подподтема
          </OL>
   <LI> подтема 3
           </OL>
   <LI>тема 2
</UL>

Какой тег что означает?
UL — начало списка, /UL — закрытие списка
LI — тег, означающий строку списка. Если величина не задана (параметром value=»число«), то по умолчанию имеет вид точки, если задано число — отсчитывает, прибавляя в начало каждой новой строчки, следующее число к заданному.
OL — тег начала нумерованного списка. Может принимать значение не с единицы, а с заданной величины: делается введением параметра start=»число, с которого начать отсчет«

Декорировать списки можно разными значками. Делается это при помощи параметра type:

как это выглядит: Код:
  •  тема 1
<UL>
  •  тема 3
<UL type=»circle»>
  •  тема 4
<UL type=»square»>

квадратик

  •  тема 5
<UL type=»disc»>

(собственно, этот параметр ставится «по-умолчанию»)

  1. тема 1
  2. тема 2
  3. тема 3
<OL type=»i» >

римские малые

  1. тема 1
  2. тема 2
  3. тема 3
<OL type=»I» >

римские заглавные

  1. тема 1
  2. тема 2
  3. тема 3
<OL type=»a» >

английские малые

  1. тема 1
  2. тема 2
  3. тема 3
<OL type=»A» >

английские заглавные

  1. тема 1
  2. тема 2
  3. тема 3
<OL type=»1″ >

арабские цифры

  Но вышеопиcанные премудрости с точками, кружочками и квадратиками сработают и если просто установить тег в двойном экземпяре — то есть <ul><ul><li> содержимое </ul></ul></li> тогда вместо точки отобразится кружок. А если <ul> написать три раза, то квадратик.
<< полезные программы гиперссылки >>
   
Если вы уже создали сайт, вы можете заработать ЗДЕСЬ на размещении рекламы на своем сайте .
Рекомендую посетить:
Софт:
nnm.ru
kadet.net.ru
kpnemo.ru
medigo.ru
protoplex.ru
coolnwc.ru
listsoft.ru
softodrom.ru
freesoft.ru
download.ru
netz.ru
weblinks.ru
soft-obzor.ru
warpor.ru
soft.wp-club.net
r-i-p.info
forest.far.ru
r3mteam.tk
judin.ru

где поучиться:
wmaster.ru
dweb.ru
webmaster.ru
web-silver.ru
nbsp.ru
webclub.ru
mweb.ru
soobcha.ru
inffac
freehand.str.ru
webmanual
рассылка 1
webholm.ru
web-forum.ru

русификаторы:
LugaRus
clubrus
frol.ru
bladezone.ru

Обозрения:
cooler.it
libo.ru
eye.moof.ru
debri.ru
coolive.net
rweb.ru
superq. ru
pc4ever
linky.ru
fileforum.ru
nitro.ru

Свойства font-size и line-height

`;document.write(t),showTopNotification()}}
  • ARعربي
  • ENEnglish
  • ESEspañol
  • FAفارسی
  • FRFrançais
  • IDIndonesia
  • ITItaliano
  • JA日本語
  • KO한국어
  • RUРусский
  • TRTürkçe
  • UKУкраїнська
  • ZH简体中文

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

КупитьEPUB/PDF

14 октября 2020 г.

Здесь мы рассмотрим, как соотносятся размеры шрифта и строки, и как их правильно задавать.

  • font-sizeразмер шрифта, в частности, определяющий высоту букв.
  • line-heightвысота строки.

Для наглядности посмотрим пример HTML, в котором шрифт и размер строки одинаковы:

<style>
body {
    font-size: 30px;
    font-family: monospace;
    line-height: 30px;
  }
</style>
<div>Ёрш р</div>
<div>Ёрш Ё</div>

Размер шрифта font-size – это абстрактное значение, которое привязано к шрифту, и даётся в типографских целях.

Обычно оно равно расстоянию от самой верхней границы букв до самой нижней, исключая «нижние хвосты» букв, таких как p, g. Как видно из примера выше, при размере строки, равном font-size, строка не будет размером точно «под букву».

В зависимости от шрифта, «хвосты» букв при этом могут вылезать, правые буквы Ё и р в примере выше пересекаются как раз поэтому.

В некоторых особо размашистых шрифтах «хвосты букв» могут быть размером с саму букву, а то и больше. Но это, всё же исключение.

Обычно размер строки делают чуть больше, чем шрифт.

По умолчанию в браузерах используется специальное значение line-height:normal.

Оно означает, что браузер может принимать решение о размере строки самостоятельно. Как правило, оно будет в диапазоне 1.1 - 1.25, но стандарт не гарантирует этого, он говорит лишь, что оно должно быть «разумным» (дословно – англ. reasonable).

Значение line-height можно указать при помощи px или em, но гораздо лучше – задать его числом.

Значение-число интерпретируется как множитель относительно размера шрифта. Например, значение с множителем line-height: 2 при font-size: 16px будет аналогично line-height: 32px (=16px*2).

Однако, между множителем и точным значением есть одна существенная разница.

  • Значение, заданное множителем, наследуется и применяется в каждом элементе относительно его размера шрифта.

    То есть, line-height: 2 означает, что высота строки будет равна удвоенному размеру шрифта, не важно какой шрифт.

  • Значение, заданное в единицах измерения, запоминается и наследуется «как есть».

    Это означает, что line-height: 32px будет всегда жёстко задавать высоту строки, даже если шрифт во вложенных элементах станет больше или меньше текущего.

Давайте посмотрим, как это выглядит, на примерах:

Множитель, line-height:1.25

<div>
  стандартная строка
  <div>
    шрифт в 2 раза больше<br>
    шрифт в 2 раза больше
  </div>
</div>

Конкретное значение, line-height:1.25em

<div>
  стандартная строка
  <div>
    шрифт в 2 раза больше<br>
    шрифт в 2 раза больше
  </div>
</div>

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

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

Установить font-size и line-height можно одновременно.

Соответствующий синтаксис выглядит так:

font: 20px/1.5 Arial,sans-serif;

При этом нужно обязательно указать сам шрифт, например Arial,sans-serif. Укороченный вариант font: 20px/1.5 работать не будет.

Дополнительно можно задать и свойства font-style, font-weight:

font: italic bold 20px/1.5 Arial,sans-serif;
line-height
Размер строки, обычно он больше размера шрифта. При установке множителем рассчитывается каждый раз относительно текущего шрифта, при установке в единицах измерения – фиксируется.
font-size
Размер шрифта. Если сделать блок такой же высоты, как шрифт, то хвосты букв будут вылезать из-под него.
font: 125%/1.5 FontFamily
Даёт возможность одновременно задать размер, высоту строки и, собственно, сам шрифт.

Предыдущий урокСледующий урок

Поделиться

Карта учебника

  • © 2007—2022  Илья Кантор
  • о проекте
  • связаться с нами
  • пользовательское соглашение
  • политика конфиденциальности

Font size бесполезен, давайте это исправим / Хабр

Что происходит, когда вы указываете в редакторе "font_size": 32? Я бы вам всё равно рассказал, но хорошо, что спросили.

Попробуем догадаться. Я пользуюсь Sublime Text 4 под macOS:

Если мы измерим сами буквы, то нигде не найдём числа 32:

32 — это не ширина и не высота буквы, и не высота заглавной буквы, и не рост строчных знаков, и не высота верхних или нижних выносных элементов. Что за дела?

Во-первых, это размер не в пикселях, а в пунктах. Пункт — физическая единица измерения, равная 1⁄72 дюйма (0,353 мм), она берёт начало из типографики.

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

На практике никто этого не делает. Вместо этого для преобразования пунктов в пиксели macOS всегда использует 72 PPI (points per inch, пункты на дюйм). Если вывести macOS на 32-дюймовый и на 24-дюймовый мониторы с одинаковым разрешением 1080p, то мы получим одинаковый размер в пикселях, а не физический размер, что разрушает весь смысл исходной идеи.

Почему число 72? Оказывается, в первых Mac использовались дисплеи с разрешением изображения ровно 72 PPI. Если просматривать на них текст, то его физический размер на экране совпадёт с физическим размером при печати. Удобно! Разумеется, с тех пор разрешение PPI дисплеев Mac повысилось, но традиция сохранилась.

В духе истинного сотрудничества, Windows использует не 72, а 96 PPI. Почему не 72? Не потому, что у компьютеров были дисплеи получше (это не так), а потому, что 72 давали слишком мало пикселей для рендеринга читаемого текста. Поэтому проектировщики решили: почему бы не сделать всё на ⅓ крупнее?

Так они и поступили. Этот стандарт сохраняется и по сей день: текст размером 16 pt в Windows на ⅓ крупнее, чем текст 16 pt в macOS. Весело!

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

P.S. Похоже, VS Code берёт значение editor.fontSize напрямую в пикселях. Отличное начало!

То есть пользователь, запрашивающий шрифт 32 pt, на самом деле требует 32 пикселя (px) в macOS и 43 px в Windows. Но эти числа всё равно нигде не встречаются.

Так происходит, потому что font-size задаёт так называемый размер «em».

В традиционной печати металлическими литерами размер em — это высота литеры символа (её кегль).

Почему высота называется «размером em»? Потому что так совпало, что буква «m» имеет квадратные размеры, а ширина «m» == высоте литеры символа == размеру em. Всё просто!

Источник изображения

Однако в цифровой типографике «квадрат em» — это (цитата из Википедии):

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

То есть если я открою свой шрифт Fira Code и начерчу em square, то он не будет вообще ничему соответствовать:

Если вкратце, этот квадрат и есть то чем вы управляете при задании размера шрифта. Если задать размер шрифта 32 pt, то этот квадрат будет иметь ширину/высоту 32/43 px. К сожалению, он невидим и ему не соответствует ни один элемент шрифта.

Когда я говорил, что em size совершенно произволен и не связан ни с чем в шрифте, это не было преувеличением. Он действительно не связан!

Это означает, что если задать разным шрифтам одинаковый размер, то внешне их размер может значительно различаться. Например, если сопоставить em square (то есть задать одинаковый размер шрифта) двух разных шрифтов, то мы получим очень разную высоту «m»:

Ещё один пример. Все эти шрифты имеют одинаковый размер — 22 pt:

Я считаю, что размер шрифта обладает следующими проблемами:

  • Непредсказуемость: невозможно угадать, что ты получишь. 16 pt — это сколько пикселей?
  • Непрактичность: невозможно получить то, чего хочешь. Хочешь, чтобы буквы были высотой 13 пикселей? Не получится.
  • Нестабильность. Переключаемся на другой шрифт, оставляем тот же размер, получаем более крупные/мелкие буквы.
  • Зависимость от ОС. Получаем разный рендеринг при открытии документа на разных ОС. Нельзя использовать одинаковые конфигурации редактора в macOS и Windows.


  • Указывать высоту прописных букв, а не размер em square.
  • Указывать её в пикселях.

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

Вот несколько шрифтов, для которых задан одинаковый размер шрифта:

А вот те же шрифты, но с размерами, подогнанными под высоту прописных букв:

На мой взгляд, последний вариант обеспечивает гораздо большую целостность. Например, взгляните на Cascadia и Consolas. Или Hack и IBM Plex Mono. Или Ubuntu Mono и Victor Mono (два последних шрифта).

Если уж мы начали говорить об этом, то почему бы не исправить и высоту строки? Не волнуйтесь, это будет быстро.

Во-первых, очевидно, что отсутствует консенсус. Каждый делает что-то своё:

Почему? Проблема высоты строки в том, что она вычисляется по тем же абстрактным границам символа:

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

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

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

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

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

Что же нам делать? Разумно было бы задавать высоту строки непосредственно в пикселях, игнорируя все метрики шрифтов. Или же как процент от высоты прописных букв, но совершенно точно не через font-size или «автоматическую» высоту строки!

Ещё один важный совет: никогда не указывайте высоту строки как пробел между строками (в традиционной типографике это называется «сдвигом»). В противном случае, два разных размера шрифта разрушат ритм параграфа:

Вместо него нужно использовать расстояние между базовыми линиями:

Кроме того, я не вижу никаких причин удостаивать почестей так называемую «стандартную высоту строки». По сути, это личное предпочтение дизайнера шрифта, задаваемое для каждого пользователя шрифта в любых условиях просмотра. Оно может быть любым числом (а часто так и есть)! Но 200% от высоты прописных букв — это всегда 200%.

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

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

Кажется безумием, что имея все эти компьютеры, мы по-прежнему столь привязаны к особенностям, возникшим в «металлический» век шрифтов.

То, чего я пытаюсь достичь всеми этими предложениями, легко показать на одном примере:

  1. Я один раз задаю в своём редакторе нужные мне размер шрифта и высоту строки.
  2. Я могу попробовать разные шрифты.
  3. Мне не нужно перенастраивать размер шрифта и высоту строки каждый раз, когда я меняю шрифт.

Примерно так (высота прописных букв и высота строки в точности совпадают):

Интерфейс моей мечты:

Второй пример использования тоже довольно прост: мне нужен предсказуемый и надёжный способ центрирования текста на кнопке.

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

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

Getting to the bottom of line height in Figma. Приключения Figma в поисках компромисса между тем, что нужно людям и что делает веб.

Deep dive CSS: font metrics, line-height and vertical-align. Превосходная статья, демонстрирующая, как конкретно работает алгоритм высоты линии шрифтов и CSS. Кроме того, обратите внимание, что я не единственный человек с ужасным цветом фона на веб-сайте.

Capsize. JS-библиотека, позволяющая делать уже сегодня именно то, что я описал в этой статье, учитывая ограничения веба.

Leading-Trim: The Future of Digital Typesetting. О том, как leading-trim (то есть примерно то же, что и высота прописных букв) может упростить жизнь каждого.



На правах рекламы

VDS для размещения сайтов — это про наши эпичные! Все серверы «из коробки» защищены от DDoS-атак, скорость интернет-канала 500 Мегабит, автоматическая установка удобной панели управления VestaCP для размещения сайтов. Лучше один раз попробовать 😉

A href font size

Тег используется для указания параметров шрифта конкретного участка текста в HTML документе.

С помощью тега font можно задать параметры шрифта: размер (size), цвет (color) и семейство шрифта (face).

Этот тег является устаревшим. В HTML5 для управления параметрами шрифта используйте группу CSS свойств font .

Синтаксис

Отображение в браузере

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

Поддержка браузерами

Тег
Да Да Да Да Да

Атрибуты тега

Цвет текста. Может быть указан в любом из трех поддерживаемых форматов:

  • RGB, например, «rgb(15, 92, 50)»;
  • HTML hex, например, «#0F5C32»;
  • colorname, например, «black».

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

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

Приоритет слева направо (если не доступен первый, проверяется второй и т.д.).

Размер шрифта. Можно указать в абсолютном и относительном форматах.

Атрибут Значение Описание
color
face
Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 8.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

Краткая информация

Значение по умолчанию medium
Наследуется Да
Применяется Ко всем элементам
Ссылка на спецификацию http://www.w3.org/TR/CSS21/fonts.html#propdef-font-size

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

Определяет размер шрифта элемента. Размер может быть установлен несколькими способами. Набор констант ( 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.

Табл. 1. Размер шрифта в CSS и HTML
CSS xx-small x-small small medium large x-large xx-large
HTML 1 2 3 4 5 6 7

Относительный размер шрифта задается значениями larger и smaller .

Также разрешается использовать любые допустимые единицы CSS: em (высота шрифта элемента), ex (высота символа х), пункты ( pt ), пикселы ( px ), проценты ( % ) и др. За 100% берется размер шрифта родительского элемента. Отрицательные значения не допускаются.

inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 2. Применение свойства font-size

Объектная модель

[window.]document.getElementBy >elementID «).style.fontSize

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

Текст – это основная составляющая большинства контента многих сайтов. Ну и конечно же размещать на странице просто «сухой текст» – это как минимум не красиво. Нужно выделять ключевые фразы, тему, подразделы подпункты, задавать определённые цвета каким-то участкам текста , изменять размер текста и шрифт .

Существуют следующие теги, форматирующие HTML текст:

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

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

текст в верхнем индексе

текст в нижнем индексе

Размер шрифтов и текста HTML

Размер текста задаётся в пикселях внутри первого тега.

Вот примеры, в которых показано как задавать размер шрифтов и простые атрибуты стиля (цвет).
Заметьте, размер текста задаётся параметром font-size: внутри кавычек после style=»

CSS: Стиль и размер шрифта

  • Стиль шрифта
  • Размер шрифта

Стиль шрифта

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

  • normal — стандартный текст, имеющий обычное начертание, то есть не курсивное и не наклонное
  • italic — курсивное начертание
  • oblique — наклонное начертание
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p.exnormal { font-style: normal; }
      p.exitalic { font-style: italic; }
      p. exoblique { font-style: oblique; }
    </style>
  </head>

  <body>
    <p>Абзац со значением normal.</p>
    <p>Абзац со значением italic.</p>
    <p>Абзац со значением oblique.</p>
  </body>
</html>

Попробовать »

Курсивные шрифты традиционно были стилизованными версиями шрифта, основанными на каллиграфии, в то время как наклонное начертание создавалось простым добавлением небольшого наклона символам. Большинство шрифтов не содержат набор курсивных символов, поэтому браузер зачастую использует алгоритм наклона для символов текста. Это означает, что во многих случаях вы не увидите разницы между значениями italic и oblique.

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

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

Для изменения размера шрифта используется свойство font-size. Существует несколько способов указать размер шрифта, рассмотрим наиболее распространенные из них:

Пиксели

Значения в пикселях используются часто, поскольку такой подход предоставляет очень точный контроль над размером. Числовое значение заканчивает буквенными символами px, которые должны следовать сразу после числа (между числом и px не должно быть пробела).

body { font-size: 14px; }
Проценты

По умолчанию размер шрифта в браузерах равен 16px. Таким образом, значение 100% соответствует 16px, а 200% — 32px. Если вы определите правило, задающее всему тексту внутри элемента <body> значение 75% от размера по умолчанию (это будет соответствовать 12px), а затем определите еще одно правило, которое задает значение 75% для его дочернего элемента, то размер шрифта в этом элементе будет равен 9px (то есть 75% от 12px).

body { font-size: 100%; }
EM

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

body { font-size: 14px; }
h3 { font-size: 1.2em; }

В примере мы задали элементу <body> размер шрифта 14px, а для всех элементов <h3> — 1.2em. Это означает, что размер шрифта заголовков второго уровня будет масштабирован с коэффициентом 1,2. В нашем случае размер всех заголовков <h3> будет составлять 1,2 размера шрифта элемента <body>, что означает в 1,2 раза больше, чем 14px, и примерно равняется 17px. (На самом деле размер будет равняться 16,8, но большинство браузеров округлит его до 17.)

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

Ключевые слова

CSS предлагает семь ключевых слов, которые позволяют назначить размер шрифта относительно размера по умолчанию (16px): xx-small, x-small, small, medium, large, x-large и xx-large.

p { font-size: small; }

Среднее значение medium — размер шрифта по умолчанию в браузерах. Остальные значения уменьшают или увеличивают размер шрифта с различными коэффециентами. Самый маленький размер шрифта xx-small равен примерно 9 пикселям, каждый последующий размер примерно на 20% больше предыдущего:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p.class1 { font-size: 120%; }
      p.class2 { font-size: 18px; }
      p.class3 { font-size: x-small; }
    </style>
  </head>

  <body>
    <p>Изменение размера с помощью процентов.</p>
    <p>Изменение размера с помощью пикселей.</p>
    <p>Изменение размера с помощью ключевого слова x-small.</p>
  </body>
</html>

Попробовать »

С этой темой смотрят:

  • Отступ текста в CSS
  • Выравнивание текста в CSS
  • Цвет и тень текста в CSS
  • Как изменить шрифт в CSS
  • Стандартные (безопасные) шрифты
HTML-тег

— GeeksforGeeks

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

Синтаксис:

  Content  

Пример: В этом примере мы использовали тег с размером шрифта 5,9.0005

HTML

< html >

 

< body >

     < h3 > Geeksforgeeks H3 >

10024 p >Hello Geeks!. p >

 

      

    

     < font size = "5" > Добро пожаловать в Geeksforgeeks Font >

Body >

HTML

.0024 >

Выход:

HTML TAG

Тэг шрифта имеет три атрибута, которые приведены ниже:

  • FONT ATTRUIC атрибут

Примечание. Тег Font не поддерживается в HTML5.

Мы обсудим все эти атрибуты и поймем их на примерах.

Размер шрифта: Этот атрибут используется для настройки размера текста в документе HTML с использованием тега шрифта с атрибутом размера. Диапазон размера шрифта в HTML — от 1 до 7, размер по умолчанию — 3.

Синтаксис:

  

Пример: В этом примере используется тег, в котором указаны разные размеры шрифта.

HTML

< html >

 

< body >

    

     < font size = "1" >GeeksforGeeks ! < / Font > < BR />

< FONT Размер = "2" Размер = "2" = 0024 > Geeksforgeeks! Font > < BR />

< FONT < FONT < < . Font > < BR />

< Font Размер = " 3333> GEEKS!0023 Font > < BR />

< FONT Размер = "5" 3> GEEKS = "5" 33>> GEELS = " > FORKS . BR />

< FONT Размер = "6" > Geeksforgeeks!0024 />

     < font size = "7" >GeeksforGeeks! font >

    

Body >

HTML >

Выход:

Font Attruity 9000

:

Font Attruity

9000

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

Синтаксис:

  

Пример: В этом примере описывается тег с другим типом и размером шрифта.

HTML

< html >

 

< body >

    

     < font face = "Times New Roman" размер = "6" >

             GeeksforGeeks!!

     шрифт >    < br />

     < font face = "Verdana" size = "6" >

             КомпьютерщикидляГиков!!

< / Font > < BR />

< FONT 0024 Face = "Комик -санс MS" Размер = "6" >

Geeksforgeeks !!

     font >< br />

     < font face = "WildWest" size = "6" >

             Компьютерщики для компьютерщиков!!

     font >< br />

     < font face = "Bedrock" size = "6" >

             Компьютерщики для компьютерщиков!!

     font >< br />

    

body >

 

html >

Вывод:

атрибут типа шрифта

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

Синтаксис:

  

Пример: В этом примере описывается тег с разными цветами шрифта.

HTML

< html >

 

< body >

    

    

     < font color = "#009900" >GeeksforGeeks font >< br />

     < Font Color = «Зеленый» > Geeksforgeeks . 0024 body >

 

html >

Output:

font color attribute

Supported Browsers:  

  • Google Chrome
  • Microsoft Edge 12 и выше
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

HTML: тег


0003 Тег с синтаксисом и примерами.

Описание

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

ВНИМАНИЕ: Тег был удален в HTML5. Используйте CSS, такие как шрифт, семейство шрифтов, размер шрифта и цвет, для форматирования текста в документе.

Синтаксис

В HTML синтаксис для тега : ( пример, который форматирует текст как красный, использует семейство шрифтов Verdana, Geneva, sans-serif и имеет относительный размер + 1 )

 <тело>

Здесь находится отформатированный текст

Пример вывода

 

Атрибуты

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

Атрибут Описание HTML-совместимость
цвет Цвет текста либо в шестнадцатеричном формате (т. е. в формате #RRGGBB), либо в именованном цвете (т. е.: черный, красный, белый) HTML 4.01
лицевая сторона Шрифт для текста. Указано как одно или несколько имен шрифтов (разделенные запятыми) HTML 4. 01
размер Размер шрифта, выраженный числовым или относительным значением.

Диапазон числовых значений от 1 до 7 (1 — наименьшее, 7 — наибольшее, 3 — по умолчанию).
Относительными значениями могут быть такие значения, как +1 или -2, увеличивающиеся на один размер шрифта или уменьшающиеся на 2 размера шрифта соответственно.

HTML 4.01

Примечание

  • HTML-элемент находится внутри тега .
  • Тег устарел в HTML5. Вместо этого используйте CSS для форматирования текста. Эквивалентами CSS могут быть цвет, шрифт, семейство шрифтов, размер шрифта и т. д.

Совместимость с браузерами

Тег имеет базовую поддержку со следующими браузерами:

  • Chrome
  • Андроид
  • Firefox (Геккон)
  • Firefox Mobile (Геккон)
  • Internet Explorer (IE)
  • Пограничный мобильный телефон
  • Опера
  • Опера Мобайл
  • Сафари (веб-кит)
  • Мобильный сафари

Пример

Мы обсудим тег ниже, исследуя примеры использования тега в HTML5, HTML 4. 01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict и XHTML 1.1.

  • HTML5
  • HTML4
  • XHTML

Документ HTML5

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

HTML 4.01 Transitional Document

Если вы создали новую веб-страницу в HTML 4.01 Transitional, ваш тег может выглядеть следующим образом:

 

<голова>

Переходный пример HTML 4.01 от www.techonthenet.com

<тело>
 

Заголовок 1

Пример 1 красный цвет шрифта с использованием именованного цвета

Пример 2 красный цвет шрифта в шестнадцатеричном формате

Пример 3 начертание шрифта — это другое семейство шрифтов

Пример 4. размер шрифта равен 5 с использованием числового значения

Пример 5. размер шрифта на два размера больше с использованием относительного значения

Пример 6 объединение атрибутов

В этом примере переходного документа HTML 4.01 у нас есть 6 примеров тега .

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

Шестой тег показывает, как объединить цвет, шрифт и размер в одном теге .

Документ XHTML 1.0 Transitional

Если вы создали новую веб-страницу в XHTML 1.0 Transitional, ваш тег может выглядеть следующим образом:

 

<голова>

Переходный пример XHMTL 1.0 от www.techonthenet.com

<тело>
 

Заголовок 1

Пример 1 красный цвет шрифта с использованием именованного цвета

Пример 2 красный цвет шрифта в шестнадцатеричном формате

Пример 3 начертание шрифта — это другое семейство шрифтов

Пример 4. размер шрифта равен 5 с использованием числового значения

Пример 5. размер шрифта на два размера больше с использованием относительного значения

Пример 6 объединение атрибутов

В этом примере переходного документа XHTML 1. 0 у нас есть 6 примеров тега .

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

Шестой тег показывает, как объединить цвет, шрифт и размер в одном теге .

XHTML 1.0 Strict Document

Вы не можете использовать тег в XHTML 1.0 Strict.

Документ XHTML 1.1

Вы не можете использовать тег в XHTML 1.1.

Как изменить размер шрифта HTML в CSS

Автор Элвин Ванджала

Делиться Твитнуть Делиться Электронная почта

Вы не продвинетесь как веб-разработчик, если не знаете, как изменить размер шрифта в CSS. К счастью, это руководство поможет вам.

Способность стилизовать различные аспекты HTML-страницы — важный навык для веб-дизайнеров и разработчиков. Чтобы стилизовать веб-страницы HTML с помощью цветов и размеров шрифта, вам необходимо быть знакомым с CSS. Чтобы настроить размер шрифта конкретно, вы можете использовать свойство CSS font-size .

Если вы ищете способ изменить размер шрифта HTML с помощью CSS, мы вам поможем. Давайте углубимся, начав с введения в CSS 9.0003 свойство размера шрифта .

Общие сведения о свойстве CSS font-size

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

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

Проще говоря, не злоупотребляйте свойством font-size . Если вы хотите, чтобы заголовок выделялся, для этого существуют различные HTML-теги заголовков. Ознакомьтесь с нашей памяткой по основам HTML, чтобы узнать о различных тегах, атрибутах и ​​многом другом, а также пояснениях.

Свойство CSS font-size принимает два типа значений: абсолютное и относительное.

Абсолютные значения длины (т.е. px ) фиксированы, а относительные (например, em и ex ) являются гибкими. Например, для единицы измерения шрифта, такой как em , размер обычно определяется размером шрифта родительского элемента. Однако на корневые единицы, относящиеся к шрифту, такие как rem , влияет размер шрифта корневого элемента ( ).

Каждый из них имеет свои плюсы и минусы, но, по существу, мы не будем обсуждать их в этой статье.

Как изменить размер шрифта элемента HTML в CSS

Вы можете изменить размер шрифта текста HTML, используя стандартный синтаксис CSS.

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

Вот синтаксис:

 Селектор CSS { 
размер шрифта: значение;
}

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

  





Простая HTML-страница



Это мой первый заголовок


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua . Ut enim ad minim veniam, quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodo consequat.




Если вы хотите изменить размер шрифта элемента абзаца, вам нужно выбрать его (с помощью класса, тега или идентификатора) и, используя свойство CSS font-size , установить пользовательское значение с вашими предпочтительными единицами измерения. В нашем примере мы будем использовать пиксели ( px ).

 p { 
размер шрифта: 18px;
}

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

  





Простая HTML-страница



Это мой первый заголовок


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua . Ut enim ad minim veniam, quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodo consequat.




Текст в HTML-теге p теперь будет иметь новый настраиваемый размер.

Связано: Основные советы и рекомендации по CSS, которые должен знать каждый разработчик

Устранение ошибок при изменении размера шрифта HTML в CSS

Хотя весь процесс изменения размера текста в CSS может показаться простым, он не всегда может сработать так, как вы ожидаете. Если у вас возникли проблемы, начните с проверки того, сохранили ли вы изменения в файле (также убедитесь, что вы связали свой лист CSS с файлом HTML). Если вы это сделали, попробуйте использовать встроенный метод, а затем обновите страницу.

Если это работает, проблема может заключаться в вашем коде CSS. Попробуйте использовать тег !important , и если это сработает, должен быть какой-то конфликтующий код. Разберите код CSS построчно, чтобы попытаться отловить эту ошибку.

Ссылка на HTML 4.01 и XHTML 1.0: Тег

Этот элемент устарел.

Синтаксис Этот элемент использует отдельные открывающий и закрывающий теги.
 ... 
Применение Тег используется для указания размера, цвета и имени шрифта текста. Текст размещается между открывающим и закрывающим тегами font .

HTML и XHTML Пример тега с использованием значения цвета sRGB .

 
 Этот текст имеет размер, цвет и шрифт, указанные в теге font.
 
Модель содержимого Элемент может содержать следующие теги и Text между открывающим и закрывающим тегами.

<а> <сокращение> <аббревиатура> <апплет> <базовый шрифт> <бдо> <большой>
<кнопка> <цитировать> <код> <удалить> <эм> <шрифт> <я>