Как изменить размер текста в html css

Фразовые теги отвечают за форматирование. Форматирование бывает визуальным и логическим.

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

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

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

Как уже сказала выше, форматирование делится на визуальное и логическое. За визуальное форматирование отвечают теги визуального форматирования, за логическое — теги логического форматирования. Последние называют ещё семантическими.

К тегам визуального форматирования относятся:

А это список тегов логического форматирования:

Сейчас расскажу подробнее о каждом фразовом элементе.

span — это контейнер для текста.

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

Со span можно использовать атрибуты class=»» , title=»» , lang=»» и xml:lang=»» . Последний — это аналог lang в XHTML-документах.

-- HTML --
Проснувшись однажды утром после беспокойного сна, Грегор Замза обнаружил, что он у себя в постели превратился в .-- CSS --
.scary color: tomato;
>

Так отобразится этот текст в браузере:

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

Это исключение — трюк с атрибутом lang=»» . Если в тексте есть иностранные слова, то можно оборачивать их в span с указанием другого языка. Тогда скринридер прочтёт их с правильным произношением.

В примере сайт на русском языке, но в тексте встречаются слова на английском. Укажем для неё другой язык:

 
. 
 
. 
. 
Я больше не мёрджу бездумно. Как говорится, enough is enough. 

По умолчанию фраза внутри span не будет отличаться от остального текста.

и

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

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

Это одиночный тег и его не нужно закрывать.

Я сидел на пустом берегу.
Голубая вода Онтарио отражала череду моих мыслей —
Мир и войну, и мёртвых, навеки ушедших во тьму, чтобы воцарился мир.

В браузере этот текст выглядит так:

wbr (word break opportunity) ставит потенциальный разрыв строки.

Если у вас слишком длинные слова или URL-адреса, то смело используйте wbr . Он подходит для случаев, когда вы не уверены в месте переноса строки.

wbr тоже одиночный тег.

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

Закрепим: тег br переносит строку сразу. С wbr браузер сначала анализирует ширину контейнера, а уже потом ставит перенос.

Если нужно добавить дефис в местах разрыва строк, то используйте символ мягкого переноса ­ (-):

Эйя­фьядла­йёкюдль

Перенос сработает, когда ширина контейнера уменьшится.

С а всё просто. Используйте этот тег для ссылок на другие сайты или внутри одной страницы.

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

https://ru.wikipedia.org/wiki/%D0%9A%D0%B0%D0%BF%D0%B8%D0%B1%D0%B0%D1%80%D0%B0" target="_blank" rel="noopener noreferrer">Статья про капибар

По умолчанию ссылки подчёркнуты. Оттенок синего и стиль подчёркивания зависят от браузера.

Важно, чтобы ссылки точно описывали куда они ведут. Куда вы попадёте, кликнув по «Подробнее» или «Далее»? Нужно прочитать весь текст, чтобы это понять. У пользователей скринридеров тоже возникнут проблемы.

Для тех, кому важно сохранить лаконичность ссылок, Аарон Густафсон предлагает такой выход:

В примере текст ссылки скрывается на уровне CSS. То есть он будет доступен для пользователей со скринридерами, но не отобразится в браузере из-за свойств display: none; или visibility: hidden; .

При клике по ссылке новая страница открывается в том же самом окне. Этим поведение можно управлять с помощью атрибута target=»» .

В примере ссылке задано значение _blank . Это значит, что она откроется в новом окне. В этом случае обязательно указывайте rel=»noopener noreferrer» . Это поможет пользователям избежать фишинговых атак.

Якорные ссылки — это ссылки внутри одного документа.

Расставить такие ссылки просто. Для слова, к которому ведёт якорь, задайте id=»» . Для якоря укажите путь через атрибут href=»#нужный-id» . Ссылку для скринридеров можно описать в атрибуте aria-label=»» . Закрепим на примере:

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

Тег a — важная часть логической разметки.

и

em (emphasis) — эмфатическое ударение.

Эмфатическое ударение — выделение слова интонацией для усиления эмоциональной выразительности.

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

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

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

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

-- Пример 1 --
Нет, это он выложил релиз в прод (не я).-- Пример 2 --
Да, мне определённо не хватает для полного счастья системной красной волчанки.-- Пример 3 --
На корабле что-то есть. Нам нужно срочно эвакуироваться!

Текст внутри em выделяется курсивом.

Это тег логического форматирования. Поэтому скринридеры и голосовые помощники произнесут слово «он» с особой интонацией.

i (italic) делает текст наклонным.

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

-- Пример 1 --
Низкоуровневый язык программирования — язык программирования, близкий к программированию непосредственно в машинных кодах используемого реального или виртуального процессора.-- Пример 2 --
Пришлось читать документацию, c'est la vie.

Такой текст выделяется курсивом:

Если пишите слова на иностранном языке, то для i можно задать атрибут lang=»» или xml:lang=»» в XHTML-документах. Это поможет скринридерам и поисковым роботам.

Я работаю простым cleaning manager.

�� Запомните, em — семантический тег, а i нет.
Об особенностях использования и различиях em и i подробно написал Факундо Коррадини в статье «You’re using wrong».

и

strong — логическое ударение.

Логическое ударение — выделение слова интонацией для усиления его смысла или повышения значимости.

С помощью strong подчёркивают важность слов и предложений.

Придумайте пароль. Не 1234 или qwerty. Никому не сообщайте его!

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

b (bold) делает текст полужирным.

Тег b используют для визуального форматирования. Он не усиливает смысловой вес слов, в отличие от strong .

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

Играю в The Elder Scrolls со времён пылевых бурь и скальных наездников.

В браузере строчка отобразится так:

�� strong нужен для логического форматирования, а b — для визуального.

mark — контекстное выделение текста.

Представьте, что готовитесь к экзамену. Вы распечатали ответы на вопросы и вооружились текстовыделителем, чтобы отметить самое главное. mark похож на текстовыделитель, только в вебе.

Этот тег нужен для визуального выделения слов, которые имеют значимость для конкретного автора и в определённом контексте.

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

-- Пример 1 --
Изюму из Малаги. Всё думала про Испанию. Перед тем как Руди родился. Такая фосфоресценция, голубовато-зеленоватая. Для мозга очень полезно.-- Пример 2 --
Чаще обращайтесь к argumentum ad populum: «Все мои знакомые говорят, что пользуются YotaPhone и ездят на ё-мобилях».

Хотя с точки зрения семантики mark более значим, чем span , это всё равно тег визуального форматирования.

mark автоматически заданы стили background-color: yellow; и color: black; .

s зачёркивает текст.

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

2+2=5 4

К s применяется свойство text-decoration: line-through; .

Этот тег нужен исключительно для визуального форматирования и не учитывается поисковыми роботами и скринридерами. Чтобы последние объявляли зачёркивание, спецификация рекомендует задавать псевдоклассам ::before и ::after нужное значение свойства content .

Вместо s можно использовать CSS. Задайте элементу text-decoration: line-through; .

-- HTML --
Невероятное предложение! Коробок спичек всего за 999 $.-- CSS --
.crossout text-decoration: line-through;
>

В браузере строка отображается так:

Раньше тексты можно было зачеркнуть с помощью тега strike . Сейчас он исключён из спецификации.

�� s не подходит, если нужно нужно определить, когда и почему был удалён текст. В этом случае используйте del .

u (underline) подчёркивает текст.

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

Во втором случае в тег взято название страны 德國 — Германии.

-- Случай 1 --
Мышь (кродётся).-- Случай 2 --
我來自德國。

К содержимому u применяется свойство text-decoration: underline; .

Этот тег отвечает за визуальное форматирование.

�� Не используйте u , если подчёркнутый текст можно перепутать со ссылкой.

и

ins (insert) определяет добавленный в документ текст.

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

С этим тегом можно использовать атрибуты cite=»» и datetime=»» . В cite пишут адрес документа, который объясняет, почему текст добавлен или отредактирован.
В datetime пишут дату и время редактирования или удаления текста. Формат: год-месяц-деньTчас:минуты:секунды:часовой пояс.

https://ru.wikipedia.org/wiki/Falcon_Heavy" datetime="2018-03-06T01:32:03Z">Апдейт. Falcon Heavy успешно запустили.

Браузер подчеркнёт этот текст.

del (delete) определяет удалённый или потерявший актуальность текст.

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

Для del доступны те же атрибуты, что и для ins : cite=»» и datetime=»» .

Маск не запустит Falcon Heavy.

В браузере текст отобразится как зачёркнутый.

Когда в документе заменяют часть содержимого, то ins используют вместе с del .

Маск вряд ли запустит Falcon Heavy. 
Первый испытательный запуск Falcon Heavy был успешно произведён 6 февраля 2018 года.

Этот код глазами браузера.

ins и del нужны для логического форматирования.

q (quote) — короткая цитата.

Используйте q , когда дословно цитируете кого-то в предложении.

Для q можно задать атрибут cite=»» , в котором указывается источник цитаты.

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

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

Браузеры добавят для такого текста двойные кавычки.

q display: inline;
>q:before content: open-quote;
>q:after content: close-quote;
>

Так браузер отобразит текст внутри q .

Минутка типографики. Браузеры автоматически ставят английские двойные кавычки “…”. Их используют в английском для оформления цитат.

q quotes: "\201c" "\201d";
>

Русская типографика отличается от английской. Вместо английских кавычек принято использовать французские — ёлочки. Они выглядят так: «…».

Чтобы заменить стандартные кавычки, задайте для свойства quotes значение “\00ab” “\00bb”; .

q quotes: "\00ab" "\00bb";
>

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

cite — источник цитаты.

Оборачивайте в cite цитируемые названия книг, статей, игр, фильмов, сериалов и любые ссылки на другие источники. Исключение — имена авторов. Для имён используйте b .

Аарон Густафсон написал книгу Adaptive Web Design в 2011 году. В ней он …

Содержимое тега cite отображается по умолчанию курсивом.

Тег cite семантический.

abbr (abbreviation) — аббревиатура или акроним.

Аббревиатура — слово, образованное сокращением слова или словосочетания. Примеры: ГЭС и ФСБ.

Акроним — вид аббревиатуры. Акронимы образуются начальными звуками слов, которые входят в сокращение. Примеры: W3C, A11Y и Бенилюкс.

В abbr можно можно раскрыть аббревиатуру в атрибуте title=»» .

HTML — это стандартизированный язык разметки документов в вебе.

Браузер подчеркнёт слово пунктирной линией, а при наведении появится всплывающая подсказка.

В чёрной оптимизации title использовали не по назначению. Из-за этого современные скринридеры игнорируют содержимое атрибута. Поэтому лучше раскрывать аббревиатуру при первом упоминании в самом тексте без title=»» .

Hypertext Markup Language (HTML) — это стандартизированный язык разметки документов в вебе.

Тег abbr семантический.

Помните, одна аббревиатура — один abbr . Если сокращение повторяется, то не надо его ещё раз оборачивать в этот тег.

�� Раньше для акронимов использовали отдельный тег acronym , но он был исключён из последней версии стандарта. Так что пользуйтесь abbr и не ломайте голову над видом аббревиатуры.

dfn (definition) — термин.

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

В dfn можно вкладывать abbr , если это термин-аббревиатура.

HTML — это стандартизированный язык разметки документов в вебе.

Вместе с dfn можно использовать атрибут title=»» . В нём приводится определение термина.

Во втором примере в dfn вложен abbr . В этом случае аббревиатура раскрывается в атрибуте title=»» .

-- Пример 1 --
Капибара — полуводное травоядное млекопитающее из семейства водосвинковых.-- Пример 2 --
HTML — это стандартизированный язык разметки документов в вебе.

В браузере текст станет наклонным.

dfn — тег логического форматирования.

code — фрагмент компьютерного кода.

Используйте code для названий элементов языков программирования или целых строк кода.

Тег code используется для того, чтобы показать фрагмент JS-кода.

Отображается как текст, написанный моноширинным шрифтом .

code можно использовать внутри pre , если нужно сохранить исходное форматирование. В этом случае сохранятся авторские пробелы и переносы.

 
 ul 
each val in [1, 2, 3, 4, 5] 
li= val 



Получим такое форматирование:
Тег code нужен для логического форматирования.
samp (sample) — результат вывода компьютерной программы или скрипта.
Тег samp полезен, когда в тексте цитируются системные ошибки и приводятся примеры вывода данных системой.
Поиск выполнен.

 
Обработано объектов: 82.
 
Найдено подходящих объектов: 2. 


Браузеры сделают текст моноширинным .
samp можно комбинировать с pre и code .
 
console.log(2.3 + 2.4) 
4.699999999999999


Получим такой текст:
samp — тег логического форматирования.
�� Тег tt (TeleType) выполняет похожую функцию. Не используйте его. Он устарел и исключён из стандарта.
kbd (keyboard) — названия клавиш.
Используйте kbd , если пишите названия клавиш и голосовые команды.
Чтобы выйти, нажмите сначала Esc, потом :, затем q и Enter.
Если нужно написать сочетание из нескольких клавиш, то вложите дочерние kbd в общий контейнер.
Скопируйте, нажав Ctrl+C.
Текст внутри kbd написан моноширинным шрифтом .
kbd может содержать тег samp или быть вложенным в него.
В kbd вкладывают samp , если нужно показать входные данные в виде текста, который отображается системой. Простой пример — это названия кнопок или пунктов и подпунктов меню в программах. В примере так указан путь к нужному пункту меню:
Найдите пункт с настройками по пути
 
File → 
Settings

Так отобразит текст браузер.
В samp вкладывают kbd , когда нужно показать как система интерпретировала пользовательский ввод.
 
yarn start:theproject does not exist, did you mean:

 
 
yarn start:the-project 


Браузер использует для текста всё тот же моноширинный шрифт :
Тег kbd нужен для логического форматирования.
var (variable) — переменная.
Используйте var для математических и программных переменных. В этот тег можно оборачивать любые фразы, которые легко заменить конкретными значениями.
-- Пример 1 --
У нас есть число 1 и число 2.-- Пример 2 --
Она написала E = mc2.
Браузеры выделят var курсивом.
�� Для сложных математических формул и расчётов используйте специальный язык разметки MathML.
small — дополнительная информация.
Используйте small для небольших сносок и комментариев. Это могут быть предостережения, оговорки, информация о лицензии, авторских правах и тому подобное.
© 2013-2018, команда капибар
Размер small зависит от основного размера шрифта и гарнитуры. К тегу применяется свойство font-size: smaller; , которое уменьшает шрифт на одну условную единицу.
Можно вкладывать один тег small в другой.
Всем, всем, всем!

 
 У нас самая выгодная ставка по ипотеке. 
Предложение действительно, если ваш доход выше 100 веточек в месяц. 
 


В этом случае размер текста будет меньше с каждым уровнем вложенности.
�� Раньше small использовался для физического форматирования вместе с big . В последней спецификации он приобрёл семантическое значение, а big был исключён. Вместо big спецификация рекомендует использовать CSS.
и
sup (superscript) — надстрочный текст.
Надстрочным текстом пишут сноски или математические знаки и символы.
-- 1 пример --
В день нужно платить всего 0,666 % *-- 2 пример --
an × ak= an+k
Надстрочный текст расположен над базовой линией, а его высота в два раза меньше основного. К sup по умолчанию применяются свойства vertical-align: super; и font-size: smaller; .
sub (subscript) — подстрочный текст.
Подстрочный текст используется в формулах.
H2SO4
Подстрочный текст меньше в высоту и располагается ниже базовой линии. По умолчанию sub заданы свойства vertical-align: sub; и font-size: smaller; .
�� Для сложных математических формул используйте язык разметки MathML.
ruby — верхняя или нижняя текстовая аннотация.
Тег связан с агатом — типографским шрифтом, размер букв в котором равен 5,5 пунктам.
В теге указывается, как произносятся иероглифы в китайском, японском и других восточно-азиатских языках.
Внутрь ruby вкладываются теги rt и rp .
В rt размещается аннотация к тексту.
Тег rp нужен для аннотаций для браузеров, которые не поддерживают ruby . Если браузер поддерживает ruby , то текст не отобразится.
  
東 tō 
京 kyō

Браузеры разместят один текст над другим и уменьшат надстрочный шрифт.
Можно вкладывать один элемент ruby в другой. В этом примере указана транскрипция слов на хирагане и английском языке.
 
東 
とう南 
なん 
 
Southeast
の方角
Текст в браузере отобразится так:
Тег ruby нужен для визуального форматирования.
 и 
bdo (bi-directional override) — изменение направления текста.
Тег bdo будет полезен, если на сайте несколько языков, один из которых читается справа налево или наоборот. Справа налево пишут в арабском языке и иврите.
В bdo обязательно нужно указывать атрибут dir=»» , который задаёт направление текста: 
rtl — справа налево; 
ltr — слева направо.
קביברה в переводе с иврита означает «капибара».
В браузере предложение выглядит так:
bdi (bi-directional isolate) — отмена изменения направления текста.
Используйте bdi для слов, которых не должно касаться изменение направления текста. Это полезно, когда направление текста заранее не известно или есть слова из языка с другим направлением.
В примере в тексте на иврите есть слово на английском, которое нам не нужно разворачивать.
-- HTML --
-- CSS --
.content-rtl direction: rtl;
>
По умолчанию для bdi задан атрибут dir=»auto» .
Поведение bdi можно заменить стилями. Примените к span правило unicode-bidi: isolate; . Только помните, что в этом случае браузер не сможет понять семантику, которая передаётся с помощью bdi .
�� На сентябрь 2018 bdi поддерживается браузерами частично.
time — дата и время в машиночитаемом формате.
Используйте time , если в тексте указаны точные даты и время. Это может быть время отправки комментария или сообщения, расписание, архив, календарь.
Этот тег не стоит использовать, если:

дата неточная;
дата в формате, который использовался до григорианского календаря.

Внутри time можно использовать несколько атрибутов: 
datetime=»» — дата и время в машиночитаемом формате; 
pubdate=»» — дата публикации документа; 
title=»» — дополнительная информация.
Время указывается внутри time или в атрибуте datetime . Во втором примере в datetime указаны число и месяц.
-- Пример 1 --
2 ноября 2018 года.-- Пример 2 --
Акции Tesla упали из-за поведения Илона Маска в прямом эфире в в эту пятницу.-- Пример 3 --
Мем опубликован 7 часов назад.
Браузер отобразит эти строки как обычный текст. Содержимое атрибута title станет всплывающей подсказкой.
Формат времени в datetime=»» жёстко определён.

Год: 1985.
Должен состоять из четырёх и более цифр.
Год и неделя: 1984-W38. 
W — номер недели.
Год и месяц: 1985-10.
Год, месяц, день: 1985-10-25.
Месяц и день: 10-25.
Часы и минуты: 1:15.
Часы, минуты, секунды: 1:15:39.
Часы, минуты, доли секунд: 1:54:39.929.
Доли нужно округлять до трёх знаков.
Дата и время, разделённые «T» или пробелом: 1985-10-25T1:15. Время можно указывать с секундами и долями секунд: 1985-10-25T1:15:39.
Часовой пояс можно задать несколькими способами: Z или +0000, +00:00, -0800, -08:00.
Двоеточие можно не использовать.
Местная дата и время: 1985-10-25T1:15Z.
Временной интервал: P2T4H18M3S.
P, количество дней, T, количество часов (H), минут (M) и секунд (S). Дни и часы можно не указывать.
Временной интервал можно указать другим способом: 1w 2d 2h 30m 10.501s.
w — недели, d — дни, h — часы, m — минуты, s — секунды. 
Можно писать слитно, а буквы могут быть в любом регистре.

time нужен для логического форматирования и важен для поисковиков. Благодаря этому тегу ссылки в поисковой выдачи размещаются в хронологическом порядке.
Браузеры автоматически преобразовывают дату из григорианского календаря в другую систему исчисления времени. Например, японский браузер покажет 16:00 как «16:00時». «時» означает «час».
И немного информационного дизайна. В блоге UX-дизайнера Михаила Озорнина есть советы о том, как писать дату и время в интерфейсах.
Выводы
Фразовые теги — это важная часть HTML-разметки. Эти теги отвечают за визуальное и логическое форматирование. Благодаря этому тексты становятся понятными для пользователей и разных технологий.
Визуальное форматирование помогает пользователям быстрее читать, ориентироваться в текстах и находить важные фразы. Логическое форматирование нужно для браузеров, вспомогательных и речевых технологий и помогает им интерпретировать тексты.
Всего лишь пара фразовых тегов сделает код структурированным и предсказуемым, а страницы доступными.
Если у разметки чёткая структура, то в ней сможете разобраться не только вы, но и другие разработчики. Это избавит команду от лишней головной боли и борьбы с легаси мельницами. Для поисковиков это тоже важно. У страниц с чёткой структурой больше шансов продвинутся вверх в поисковой выдаче.
Предсказуемость разметки означает, что браузеры отобразят страницу так, как это описано в стандартах.
Наконец, благодаря фразовым тегам вспомогательные технологии могут понимать тексты.
Как в html поменять размер текста: Как изменить размер шрифта в html?
HTML-теги. Изменение размера шрифта — Инструкция по применению
В нашей системе у вас есть возможность верстать текст на страницах при помощи основных HTML-тегов.
Для этого вам понадобятся страница, созданная с модулем «Редактируемая страница», «Периодика», «Каталог товаров» (только при редактировании текстового поля «Описание раздела» или «Описание» для позиции каталога), «Анкета» (только при редактировании формы «Помощь/Информация») и начальное понимание об оформлении при помощи тегов.
Внимание! Данная возможность в нашей системе не предоставляет возможности вставлять активное содержимое на страницу и менять ее дизайн и может быть использована только для оформления контента.
HTML-теги. Изменение размера шрифта. Шаг 1
Чтобы изменить размера шрифта, войдите при редактировании в режим HTML .
HTML-теги. Изменение размера шрифта. Шаг 2
Найдите слово/словосочетание/предложение/абзац, для которого вы хотите изменить размер.
HTML-теги. Изменение размера шрифта. Шаг 3
Вставьте тег « » (где после знака «=» надо указать, на сколько шагов увеличить размер шрифта) перед словом/словосочетанием/предложением/абзацем.
Внимание! Увеличение размера идет на один размерный шаг, чтобы сильнее увеличить размер, используйте несколько тегов.
HTML-теги. Изменение размера шрифта. Шаг 4
Сразу же после слова/словосочетания/предложения/абзаца вставьте тег « ».
HTML-теги. Изменение размера шрифта. Шаг 5
Подтвердите изменение размера, нажав кнопку «Сохранить».
HTML-теги. Изменение размера шрифта

Если все действия были выполнены верно, то шрифт в выбранном отрезке текста будет увеличен.
Как Изменить Размер Шрифта в WordPress
 access_time 
 hourglass_empty 
Изменить размер шрифта в WordPress на самом деле очень просто. В этой статье мы покажем вам, как это сделать.
Мы рассмотрим два метода — через плагин и с помощью CSS.
WordPress известен своим удобным редактором записей. Как и ваше любимое программное обеспечение обработки текстов, WordPress предлагает множество опций. Вы можете легко редактировать контент, например, добавлять разные типы заголовков и абзацы через удобное выпадающее меню.
Обратите внимание, что структура вашего контента важна как для посетителей, так и для SEO. Хорошо структурированные заголовки помогают поисковым системам быстрее понять основную тему вашей публикации. Как результат, вы поднимитесь выше на странице поисковой выдачи.
В последней версии WordPress доступен новый редактор Gutenberg. Мы также покажем вам, как изменить размер шрифта с помощью этого инструмента.
Пробуем Изменить Размер Шрифта с Помощью Плагина TinyMCE Advanced
TinyMCE Advanced — бесплатный плагин, который позволяет легко выбрать нужный размер шрифта. Этот плагин создаёт классическую панель инструментов в новом редакторе Gutenberg.
Сначала необходимо установить и активировать плагин. Затем вы можете перейти на страницу настроек (найдите плагин TinyMCE Advanced в разделе “Настройки” и кликните по названию). Там вы найдёте две вкладки: Редактор блоков (Gutenberg) и Классический редактор (TinyMCE). Кстати плагин переведён на русский, так что знания английского вам не понадобятся, по крайней мере для работы в визуальном редакторе.

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

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

Используем CSS — Классический Путь
В то время как метод описанный выше отлично подойдёт начинающим, классический способ требует знаний CSS и может оказаться немного сложнее.
Когда вы используете плагин или редактор WordPress по умолчанию, вам нужно вносить изменения в каждую публикацию или страницу отдельно. CSS изменяет размер шрифта на всём сайте.
Чтобы изменить размер шрифта WordPress с помощью CSS, нужно добавить несколько строк кода. Вы можете сделать это через редактор или Customizer (настройщик). Мы рекомендуем использовать Customizer, так как это удобнее.
Добавить код можно в поле слева.

   Чтобы изменить весь шрифт:


body

.sidebar li

.footer
html < font-size: 18px; >@media (min-width: 900px) < html < font-size: 20px; >>
CSS-стили позволяют измерять размер текста в четырёх разных единицах:


Эм (em) — единица, используемая в веб-документах. 1em равняется размеру используемого на странице шрифта, например, если размер шрифта 12pt, то 1em равно 12pt.
Пиксели (px) — единица измерения, используемая на экране. Один пиксель равняется одной точке на экране компьютера. 


Как Изменить Размер Шрифта в Редакторе Gutenberg
Как упоминалось ранее, Gutenberg является новым дополнением WordPress. Он был добавлен в CMS, чтобы упростить редактирование записей с медиафайлами.
Вот как выглядит блок:

Выберите запись, которую вы хотите отредактировать, или просто нажмите на “Добавить новую”.
Нажмите на блок, содержащий текст, которые вы хотите изменить, затем выберите номер вручную.
Или же выберите один из доступных параметров справа: маленький, нормальный, средний, большой и огромный.

Очень удобно, не правда ли?
Выводы
WordPress предлагает много опций настройки, в том числе настройку шрифтов. Вы можете изменить размер шрифта в меню редактора WordPress, установив специальный плагин, или через CSS вручную. Оба способа мы описали в этом руководстве.
Выберите свой идеальный размер шрифта, чтобы сделать ваш контент более привлекательным и удобным для чтения. Это очень просто.
Размер шрифта и масштаб страниц — увеличьте размер веб-страниц
Управление масштабом позволяют увеличить или уменьшить либо размер целой веб-страницы либо просто размер всего текста в целях улучшения читабельности. Мы объясним, как это работает.
Вот как вы можете увеличивать и уменьшать масштаб отдельных веб-сайтов.


Щёлкните по кнопке меню с правой стороны. Откроется меню настройки, и наверху вы увидите управление масштабом. 
Используйте кнопку + для увеличения масштаба и кнопку — для его уменьшения. Число в середине отображает текущий уровень масштабирования — щёлкните по нему, чтобы сбросить масштаб на 100%. Вы также можете видеть текущий уровень масштабирования в адресной строке:

Клавиатурные сочетания: Вы также можете использовать управление масштабом без помощи мыши. Нажав и удерживая commandCtrl, нажмите + для увеличения масштаба, — для уменьшения масштаба или 0 для его сброса.
Совет: Чтобы установить уровень масштабирования по умолчанию для всех веб-сайтов, вы можете попробовать дополнение, такое как Fixed Zoom или Zoom Page WE.
Эта функция позволяет пользователям увеличивать и уменьшать масштаб страниц одним движением пальца, не влияя на макет страницы.
Щипковое действие в настоящее время поддерживается в Windows через сенсорный экран и высокоточные тачпады, на Mac через тачпады и в Linux через сенсорные экраны. Тачпады Linux в настоящее время не поддерживаются, и ожидается, что поддержка будет добавлена в будущем.
Вместо того, чтобы изменять масштаб всей страницы, вы можете просто изменить размер текста.

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

Вы можете увеличить или уменьшить размер всего веб-контента следующим образом:


На Панели меню в верхней части экрана щёлкните и выберите .Нажмите на кнопку меню и выберите Настройки.Настройки.Настройки.
В панели перейдите к разделу Язык и внешний вид.
Под разделом Масштаб используйте раскрывающееся меню Масштаб по умолчанию, чтобы выбрать уровень масштабирования для всех страниц. Firefox запомнит индивидуальные уровни масштабирования сайта, которые вы установили.

Чтобы установить уровень масштабирования только для текста, установите флажок Только текст.


Закройте страницу about:preferences. Любые сделанные изменения будут сохранены автоматически.

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

На Панели меню в верхней части экрана щёлкните и выберите .Нажмите на кнопку меню и выберите Настройки.Настройки.Настройки.
В панели перейдите к разделу Язык и внешний вид.
Под разделом Шрифты и цвета щёлкните по кнопке Дополнительно….
В выпадающем меню Наименьший размер шрифта, выберите минимальный размер в пикселях, в котором должен отображаться весь текст.
Щёлкните OK, чтобы сохранить изменения.

Для получения дополнительной информации прочитайте статью Изменение шрифтов и цветов, используемых веб-сайтами.
Изменение размера, цвета и шрифта выбранных слов (с использованием Font и Span): howto_in_ru — LiveJournal
Эта статья — о том, как изменить внешний вид вашего текста или какой-либо его части. К примеру, если вы захотите сделать определённое слово в записи красным. Если вам нужно изменить шрифт или другие параметры текста всего журнала в целом (а не только некоторых слов), то прочтите раздел справки Как изменить шрифт для всего моего журнала?.
Шрифт и другие параметры текста изменяют два различных HTML-тэга: и . У каждого из них есть свои достоинства и недостатки, так что выбирать один из них вам придётся самостоятельно. Ниже будут описаны оба тэга.

Плюсы:
1. Может быть использован для изменения внешнего вида текста вашей Биографии на странице «О пользователе» (вы можете изменить свою биографию здесь), а не только ваших записей в журнале. 
2. Начинающим пользователям проще обращаться с этим тэгом, он интуитивно более понятен, чем . 
Минус:
1. Не рекомендован к использованию и может некорректно восприниматься перспективными версиями браузеров (хотя поддерживается всеми нынешними). Не поддерживается в XHTML.
Плюс:
1. Широко используется и будет поддерживаться браузерами значительно дольше, чем . Поддерживается в XHTML.
Минусы:
1. Не может быть использован для изменения внешнего вида Биографии, хотя подходит для модификации текста ваших записей в журнале. 2. Менее удобен и понятен для неопытных пользователей, чем .
Size
Для изменения размера слов(а) вставьте в текст следующее:
При этом нужно заменить размер текста на требуемый размер. Значение этого параметра — целое число от 1 до 7. Вы также можете вписать «+» или «-» перед числом, если вы хотите увеличить или уменьшить (соответственно) текущий/стандартный размер текста на заданное вами число.
Цвет
Для изменения цвета слов(а) используйте следующее:
Вы должны заменить код цвета на шестнадцатиричный код того цвета, который вам необходим. Список некоторых цветовых кодов можно увидеть вот здесь.
Шрифт
Шрифт слов(а) изменяется вот так:

Вам следует вместо шрифт вписать название того шрифта, который вы хотите использовать (например, sans-serif). При желании вместо одного шрифта можно перечислить несколько, разделив их запятой. Если вы сделаете так, браузер отобразит первый шрифт из перечисленных, если он установлен на компьютере, где просматривается ваша страница; если он не установлен, браузер попытается вывести на экран второй и т. д. 
Комбинации
Все вышеперечисленные параметры могут быть использованы в любых комбинациях в одном тэге. Например, следующий код выдаст на экран текст размера 4, голубого цвета и в шрифте comic sans ms:
Вот что отобразится:
Размер
Для изменения размера слов(а) вставьте в текст:
При этом размер текста нужно заменить на тот размер, который вы хотите использовать — на целое число от 1 и выше. Учтите, что тот размер, который вы используете в , и тот, который работает в , никак не соотносятся. В нашем примере размер измеряется в пунктах (или «pt» — от английского «point»). Обычный размер текста — 12 пунктов.
Цвет
Для изменения цвета слов(а) используйте:
При использовании этого тэга следует вместо код цвета вставить нужный шестнадцатиричный код цвета. Список некоторых цветовых кодов размещён вот здесь.
Шрифт
Шрифт слов(а) изменяется следующим образом:
Вы должны заменить шрифт на название того шрифта, который вы хотите увидеть (к примеру, sans-serif). Вместо одного шрифта можно перечислить несколько, разделяя их запятой; тогда браузер отобразит первый шрифт из перечисленных, если он установлен на компьютере, где просматривается ваша страница; если он не установлен, браузер попытается вывести на экран второй и т. д.
Комбинации
Вы можете использовать любую комбинацию этих параметров в одном тэге. Например, следующая комбинация выдаст на экран текст размером в 16 пунктов, зелёного цвета и в шрифте trebuchet ms:

С помощью тэга текст можно модифицировать и гораздо более серьёзно. Как именно — можно увидеть в этой статье.
Спасибо janinedog.
Перевёл на русский ximaera.
Не удается найти страницу | Autodesk Knowledge Network
Как поменять шрифт и размер текста на сайте (Шаблон «Protostar»)
Стандартные font-family и font-size , предлагаемые авторами шаблонов не всегда удовлетворяют эстетические требования веб-мастера (даже без задатков дизайнера). В этой статье рассмотрим, как поменять шрифт и размер текста на сайте на примере стандартного шаблона «Protostar». Для этого нам придётся поменять пару строчек в css-файлах шаблона, что само по себе зло, так как при обновлении шаблона эти настройки наверняка слетят.
Первым делом посмотрим и сравним две картинки того, как «было» и как «стало», ну а затем я дам пояснения, как этого достичь, для тех, кому затея смены стандартных шрифтов и их размеров покажется заманчивой.
Внешний вид сайта и его преобразование
Вот так выглядела выдача материалов сайта по моих преобразований:
А вот так выглядит выдача после небольших правок всего лишь двух строчек в css-стиле сайта:
Лично мне второй вариант нравится больше. Кому тоже кажется, что пора что-то менять, можно читать дальше. =)
Вносим изменения в css-стиль шаблона сайта
Для тех, кто привык работать в админке Joomla 3, то подобные изменения можно произвести непосредственно в Панели управления в «Менеджере шаблонов». Чтобы освежить память, рекомендую прочитать статью «Изменение файлов шаблона сайта Joomla в админке». Для подсказки, привожу картинку, где видны основные действия внесения правок в css-файл шаблона сайта:
Что же и где было поменяно. Конкретика.
Нужно поменять всего лишь два параметра: сменить font-family и увеличить на единицу font-size в свойствах тега body в файле, находящемуся:
/templates/protostar/css/template.  css
Это строчки №213 и №214.
body
body
Вот в общем-то и все правки, которые нужны для того, чтобы так поменялся внешний вид сайта, как показано на двух картинках, приведённых в самом начале этой статьи.
Заберите ссылку на статью к себе, чтобы потом легко её найти ��
Выберите, то, чем пользуетесь чаще всего:
Спасибо за внимание, оставайтесь на связи! Ниже ссылка на форум и обсуждение ; )
Как увеличить размер текста на iPhone и iPad
В некоторых приложения на iPhone можно увеличивать или уменьшать размер текста.
Однако разработчики, которые заморочились над добавлением данной функции в свои приложения, просто потратили своё время зря, поскольку эта опция действует только лишь в рамках приложения.
Было бы здорово, если бы размер текста можно было настроить сразу по всей системе, не правда ли? Что же, именно для этого существует функция Динамический шрифт.
Эта очень полезная функция автоматически меняет все элементы системы и настраивает их под выбранный вами размер текста. С функцией Динамический шрифт легче попадать по клавишам и важным элементам в приложениях.
Настройка размера текста очень важна для пользователей с проблемами со зрением. Увеличение текста снизит нагрузку на глаза, и вам не придётся напрягаться, чтобы прочесть сообщение, содержимое какого-либо сайта и т.п. Ниже мы расскажем, как поменять размер текста.
Как увеличить размер текста на iPhone или iPad
Чтобы изменить размер текста в Почте, Контактах, Календаре, Телефоне и Заметках, а также в сторонних приложениях с поддержкой Динамического шрифта, делайте следующее:

1) Откройте Настройки.
2) Зайдите в секцию Экран и яркость.
3) Выберите Размер текста.
Потяните слайдер влево, чтобы уменьшить размер текста, или вправо, чтобы его увеличить.
Чтобы вернуть размер по умолчанию, расположите слайдер по центру.
В описании функции говорится: «В программах, поддерживающих «Динамический шрифт», шрифт меняется согласно выбранному ниже размеру». Вот как выглядят приложения с максимальным размером текста:
Полная поддержка Динамического шрифта есть только в стандартных приложениях Apple. В Новостях и App Store, к примеру, сильно увеличиваются только самые важные текстовые элементы, а другие, как название категории и цена, не растягиваются на весь экран.
В сторонних приложениях с поддержкой Динамического шрифта, как Twitter и Twitterrific, размер текста увеличивается без нарушений интерфейса. В Instagram требуется провести ещё работы, поскольку функция выглядит странно на некоторых страницах приложения.
Динамический шрифт предназначен не только для стандартных приложений, функция поддерживается даже HTML-страницами. Однако не на все сайты добавляют поддержку функции.
Чтобы сделать текст ещё больше, нужно зайти в настройки Универсального доступа.
Как сделать текст ещё больше
1) Откройте Настройки.
2) Зайдите в Основные.
3) Выберите Универсальный доступ.
4) Выберите Увеличенный текст.
5) Нажмите на переключатель рядом с Увеличенные размеры.
6) Теперь выберите размер шрифта с помощью слайдера.
iOS 11+ подстраивает элементы интерфейса под увеличенный текст, но он всё равно может мешать нажимать на кнопки в приложениях.
iPhone и iPad поддерживают Динамический шрифт со времён iOS 7.

Даже если у вас идеальное зрение, стоит запомнить данную инструкцию на случай, если у вас есть друзья или члены семьи, которым будет удобнее пользоваться устройством с увеличенным текстом.
[всего: 0 рейтинг: 0]
Смотрите похожее
App Store iOS iPad
CSS Размер шрифта
Размер шрифта
Свойство font-size устанавливает размер текста.
Возможность управлять размером текста очень важна в веб-дизайне. Однако вы не следует использовать настройки размера шрифта, чтобы абзацы выглядели как заголовки, или заголовки выглядят как абзацы.
Всегда используйте правильные теги HTML, например
для заголовков и
Значение размера шрифта может быть абсолютный или относительный размер.

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


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

 Примечание: Если вы не укажете размер шрифта, размер по умолчанию для обычного текста, такого как абзацы, составляет 16 пикселей (16 пикселей = 1em).
Установить размер шрифта с пикселями
Установка размера текста в пикселях дает вам полный контроль над размером текста:
Пример
h2 <
размер шрифта: 40 пикселей; 
>
 Совет: Если вы используете пиксели, вы все равно можете использовать инструмент масштабирования для изменения размера всей страницы.
Установить размер шрифта с помощью Em
Чтобы пользователи могли изменять размер текста (в меню браузера), многие разработчики используют em вместо пикселей.

1em равно текущему размеру шрифта. Размер текста по умолчанию в браузерах: 16 пикселей. Итак, размер 1em по умолчанию составляет 16 пикселей.
Размер может быть рассчитан от пикселей до em по следующей формуле: пикселей /16 = em 
Пример
h2 <
font-size: 2,5em; / * 40px / 16 = 2.5em * / 
>
h3 font-size: 1.875em; / * 30 пикселей / 16 = 1,875 em * / 
>
p font-size: 0,875em; / * 14px / 16 = 0.875em * / 
>
В приведенном выше примере размер текста в em такой же, как в предыдущем примере. в пикселях.Однако с размером em можно настроить размер текста. во всех браузерах.
К сожалению, проблема со старыми версиями все еще не устранена. Internet Explorer. Текст становится больше, чем должен когда он сделан больше, и меньше, чем должен, когда сделан меньше.
Используйте комбинацию процентов и Em
Решение, которое работает во всех браузерах, — установить размер шрифта по умолчанию в процент для элемента :
Пример
body <
font-size: 100%; 
>
Теперь наш код отлично работает! Он показывает тот же размер текста в все браузеры, и позволяет всем браузерам увеличивать или изменять размер текста!
Размер адаптивного шрифта
Размер текста можно установить с помощью единицы vw , что означает «ширину области просмотра».
Таким образом, размер текста будет соответствовать размеру окна браузера:
Измените размер окна браузера, чтобы увидеть, как масштабируется размер шрифта.
Viewport — это размер окна браузера. 1vw = 1% ширины области просмотра. Если ширина области просмотра 50 см, 1vw составляет 0,5 см.
CSS Font Size Tutorial — Как изменить размер текста в HTML

Используйте свойство CSS font-size , чтобы определить размер текста.
 .container
Это свойство принимает несколько типов значений:

Ключевые слова (ключевые слова абсолютного и относительного размеров),
Длина (например, пиксели (пиксели) и единицы em) и
процентов.

 .container
Возникает вопрос: какой тип значения выбрать и почему?
Это вопрос, которым посвящена эта статья. Он покажет вам, как использовать свойство font-size и различия между его многочисленными значениями. Так что в следующий раз, когда вам нужно будет изменить размер шрифта текста, вы будете знать, какое значение нужно использовать.
Значения ключевых слов
Есть два типа значений ключевых слов, которые вы можете использовать с размером шрифта: абсолютного размера и относительного размера ключевых слов.Начнем с абсолютного.
Ключевые слова абсолютного размера
В приведенном ниже коде используется ключевое слово абсолютного размера small для изменения размера текста HTML.
 .childElement
Есть больше вариантов ключевых слов абсолютного размера на выбор:

xx-small
x-small
small
medium
large
x-large
xx-large
xxx-large

Значение ключевого слова абсолютного размера определяется размером шрифта браузера по умолчанию.Обычно это средний размер.
Ключевые слова относительного размера
Ключевые слова относительного размера — еще один вариант ключевых слов, который следует рассмотреть. У вас есть два на выбор: меньше и больше .
 .parentElement

Размер шрифта элемента с ключевым словом relative-size составляет относительно (больше или меньше) размера шрифта его родительского элемента.
Другими словами, размер шрифта родительского элемента влияет на размер шрифта дочернего элемента, как вы можете видеть ниже.
В этом примере ключевое слово относительного размера меньше применяется к дочернему элементу, а значение абсолютного размера большой применяется к родительскому элементу.
font-size принимает несколько различных значений длины. Мы рассмотрим три из них: пиксели (px) и единицы em и rem. Несмотря на ваш выбор, значение длины, которое вы используете, должно быть положительным.
 .parentElement
Пикселей
Пикселей — это абсолютная единица длины.Это означает, что они , а не , на которые влияют другие элементы, такие как родительский элемент или размер окна.
В результате пиксели являются точными: вы определяете точное количество пикселей, которое вам нужно для элемента, и это обычно то, что вы получаете. Однако между браузерами могут быть небольшие различия.
Обратите внимание, что дочерние элементы используют пикселей и имеют такой же размер шрифта в приведенном выше примере кода.
EMs
Хотя вы можете думать о пикселях как о фиксированных, думайте о значениях em как о переменных.
Это потому, что значения em являются относительной единицей длины. Размер шрифта элемента, использующего значение em, составляет относительно размера шрифта его родительского элемента.
Однако предположим, что вы не установили размер шрифта для родительского элемента. Вы также не установили его где-либо еще выше в DOM. В этом случае значение em рассчитывается с использованием значения по умолчанию браузера (часто 16 пикселей).
Давайте конкретизируем эту идею.

Скажем, для родительского элемента установлено значение 30 пикселей, а для дочернего элемента — 2em.Тогда размер визуализируемого шрифта дочернего элемента составляет 60 пикселей (2 x 30 пикселей = 60 пикселей). Вы можете увидеть этот сценарий в приведенном ниже коде.
em могут быть проблематичными из-за их эффекта сложения, что демонстрируется в следующем примере.
Когда у вас есть несколько элементов, которые используют значения em, вложенные друг в друга, значения размера шрифта складываются: они становятся все больше и больше. Это совокупный эффект в действии.
REM
Введите значения rem, которые были созданы для решения проблемы составления ems.
Напомним, что значения em относятся к родительскому элементу. Напротив, значения rem относятся к размеру шрифта корневого (html) элемента.
Это означает, что вы можете применить значение rem к элементу, и на него не повлияет размер шрифта родителя. Это позволяет избежать сложного эффекта, который мы испытали выше.
В этом примере используется свойство font-size со значением rem.
Вот ключевой момент из приведенного выше примера: размер шрифта родительского элемента , а не не влияет на размер шрифта дочерних элементов.
Проценты предлагают еще один способ установить размер шрифта относительно к размеру шрифта родительского элемента.
Элемент с процентами ссылается на свой родительский элемент для определения размера шрифта. Процентное значение должно быть положительным.
Как видите, когда дело доходит до размера шрифта, у вас есть множество вариантов, соответствующих вашим потребностям.
    Я пишу об обучении программированию и лучших способах этого на amymhaddad.com.  Я также твитов о программировании, обучении и производительности:  @amymhaddad.   
Как изменить шрифт в HTML
Чтобы полностью изменить внешний вид вашего веб-сайта, не забудьте о шрифте. В зависимости от вашего дизайна, бизнес-ниши и аудитории вы можете изменить шрифт, размер или цвет шрифта.

Например, если вы предпочитаете темно-серый цвет черному в своей цветовой схеме, вам нужно изменить цвет шрифта по умолчанию для текста. Если вы работаете в СМИ, вы можете выбрать шрифт без засечек, который считается самой простой типографикой для чтения. Но если вы занимаетесь творчеством, вы можете выбрать декоративный шрифт, такой как Morris Troy. Это всего лишь несколько причин, по которым вы можете захотеть стилизовать шрифт на своем веб-сайте.
Раньше вы могли просто использовать тег шрифта для изменения стиля текста. Допустим, вы хотите изменить шрифт на Arial, размером 18 пикселей и красивым бордовым цветом. Вы бы написали следующую строку HTML:
Ваш текст здесь.
Однако этот тег шрифта был объявлен устаревшим в HTML4 еще в 1998 году. Он был заменен гораздо более эффективным способом изменения внешнего вида текста, а именно CSS. Форматирование текста CSS — это более легкая и гибкая альтернатива тегу шрифта HTML, и его несложно изучить.
Ниже мы собираемся использовать встроенный CSS, что означает, что HTML и CSS будут помещены вместе в основной раздел документа HTML. Так что технически вы будете менять шрифт «в HTML».”
Однако обратите внимание, что другие стили CSS рекомендуются вместо встроенного CSS. Вот почему мы также перепишем эти примеры, используя CSS, который можно разместить в разделе заголовка документа HTML или во внешней таблице стилей. Давайте начнем.
Как изменить тип шрифта в HTML
Чтобы изменить тип шрифта в HTML, используйте свойство CSS font-family. Установите для него желаемое значение и поместите его в атрибут стиля. Затем добавьте этот атрибут стиля к элементу HTML, например к абзацу, заголовку, кнопке или тегу диапазона.

Давайте перепишем приведенный выше пример, используя устаревший тег шрифта, и изменим тип шрифта абзаца на Arial с помощью CSS. Важно отметить, что я использую редактор W3Schools Tryit Editor, который использует шрифт Times New Roman в качестве шрифта по умолчанию. Я собираюсь добавить атрибут стиля к первому элементу абзаца, что означает, что стиль будет применен только к этому абзацу. Остальные абзацы и заголовки на странице останутся в формате Times New Roman.
Вот HTML со встроенным CSS:
  
 Как изменить тип шрифта в HTML 
 
 
 
Это фиктивный текст.Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст.
 
 
 Объяснение 
 
 
 
Поскольку я использую редактор W3Schools Tryit Editor, шрифт по умолчанию - Times New Roman. Это означает, что изменение гарнитуры абзаца потребует от меня использования атрибута стиля, который содержит свойство CSS font-family, установленное на «Arial."Другие элементы на странице не нацелены на встроенный CSS и поэтому остаются Times New Roman.
 
  
Теперь предположим, что я хочу изменить шрифт каждого элемента абзаца на Arial. Затем я мог бы использовать селектор CSS, чтобы настроить таргетинг на все абзацы и поместить его в заголовок страницы.
  
п  
семейство шрифтов: Arial;
 
>
  
  
 Как изменить тип шрифта в HTML 
 
 
 
Это фиктивный текст.Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст.
 
 
 Объяснение 
 
 
 
Поскольку я использую редактор W3Schools Tryit Editor, шрифт по умолчанию - Times New Roman.  Это означает, что для изменения гарнитуры всех абзацев на странице мне потребуется использовать селектор типа CSS и установить для свойства CSS font-family значение «Arial."Заголовки на странице останутся Times New Roman.
 
  
Теперь, когда мы понимаем, как изменить тип шрифта с помощью встроенного и внутреннего CSS, давайте обратим наше внимание на размер шрифта.
Как изменить размер шрифта в HTML
Чтобы изменить размер шрифта в HTML, используйте свойство CSS font-size. Установите для него желаемое значение и поместите его в атрибут стиля.Затем добавьте этот атрибут стиля к элементу HTML, например к абзацу, заголовку, кнопке или тегу диапазона.
Чтобы продолжить переписывание первого примера с использованием устаревшего тега шрифта, давайте изменим размер шрифта абзаца на 18 пикселей с помощью CSS. В этом примере я все еще собираюсь использовать редактор W3Schools Tryit Editor, но я собираюсь загрузить на страницу Bootstrap CSS. Это означает, что в дополнение к типу шрифта по умолчанию Arial размер шрифта абзацев по умолчанию будет 14 пикселей, заголовок 2 — 30 пикселей, а заголовок 3 — 24 пикселя.
То же, что и выше, я собираюсь начать с добавления атрибута стиля к первому элементу абзаца, что означает, что стиль будет применен только к этому абзацу. Остальные абзацы и заголовки на странице сохранят размер по умолчанию.
Вот HTML со встроенным CSS:
  
 Как изменить размер шрифта в HTML 
 
 
 
Это фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст.Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст.
 
 
 Объяснение 
 
 
 
Я использую редактор W3Schools Tryit Editor, но загружаю BootstrapCDN, поэтому размер шрифта по умолчанию для основного текста и абзацев равен 14px, h3s - 30px, а h4s - 24px.  Шрифт по умолчанию также Arial. Это означает, что изменение размера первого абзаца потребует от меня использования атрибута стиля, который содержит свойство CSS font-size, установленное на «18 пикселей."Другие элементы на странице не нацелены на встроенный CSS и поэтому сохраняют свои размеры по умолчанию.
 
  
Теперь предположим, что я хочу изменить шрифт каждого элемента абзаца на 18 пикселей. Затем я мог бы использовать селектор CSS, чтобы настроить таргетинг на все абзацы и поместить его в заголовок страницы.
  
п  
размер шрифта: 18 пикселей;
 
>
  
  
 Как изменить размер шрифта в HTML 
 
 
 
Это фиктивный текст.Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст.
 
 
 Объяснение 
 
 
 
Я использую редактор W3Schools Tryit Editor, но загружаю BootstrapCDN, поэтому размер шрифта по умолчанию для основного текста и абзацев равен 14px, h3s - 30px, а h4s - 24px.Шрифт по умолчанию также Arial. Это означает, что изменение размера всех абзацев на странице потребует от меня использования селектора типа CSS и установки свойства CSS font-size на «18 пикселей». Заголовки на странице будут иметь размер по умолчанию.
 
  
 Для более подробного изучения свойств и значений, которые вы можете использовать для изменения размера текста, прочтите статью «Как изменить размер шрифта в CSS».
Как изменить цвет шрифта в HTML

Чтобы изменить цвет шрифта в HTML, используйте свойство цвета CSS. Установите для него желаемое значение и поместите его в атрибут стиля. Затем добавьте этот атрибут стиля к элементу HTML, например к абзацу, заголовку, кнопке или тегу диапазона.
Чтобы продолжить переписывание первого примера с использованием устаревшего тега шрифта, давайте изменим цвет шрифта абзаца на бордовый (шестнадцатеричный код цвета # 800000) с помощью CSS.В этом примере я собираюсь использовать редактор W3Schools Tryit Editor и не загружать Bootstrap CSS. Но если вы действительно хотите использовать эту структуру, цвет шрифта по умолчанию будет таким же (например, черный), как и сам процесс.
То же, что и выше, я собираюсь начать с добавления атрибута стиля к первому элементу абзаца, что означает, что стиль будет применен только к этому абзацу. Другой абзац и заголовки на странице останутся в цвете по умолчанию (черный).
Вот HTML со встроенным CSS:
  
 Как изменить цвет шрифта в HTML 
 
 
 
Это фиктивный текст.Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст.
 
 
 Объяснение 
 
 
 
Поскольку я использую редактор W3Schools Tryit Editor, по умолчанию используется черный цвет шрифта (обычно это так, независимо от того, какой инструмент или фреймворк вы используете для создания своих веб-проектов.Это означает, что изменение цвета абзаца потребует от меня использования атрибута стиля, который содержит свойство цвета CSS, установленное на шестнадцатеричный код цвета # 800000. Другие элементы на странице не предназначены для встроенного CSS и поэтому остаются черными.
 
  
Теперь предположим, что я хочу изменить цвет каждого элемента абзаца на темно-бордовый. Затем я мог бы использовать селектор CSS, чтобы настроить таргетинг на все абзацы и поместить его в заголовок страницы.
  
п  
цвет: # 800000;
 
>
  
  
 Как изменить цвет шрифта в HTML 
 
 
 
Это фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст.Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст.
 
 
 Объяснение 
 
 
 
Поскольку я использую редактор W3Schools Tryit Editor, по умолчанию используется черный цвет шрифта. Это означает, что изменение цвета всех абзацев на странице потребует от меня использования селектора типа CSS и установки свойства цвета CSS на шестнадцатеричный цветовой код для темно-бордового (# 800000). Заголовки на странице останутся черными.
 
  
 Чтобы узнать, как изменить цвет фона текста, прочтите статью «Как изменить цвет текста и фона в CSS».
Изменение шрифта с помощью HTML и CSS
Обладая базовыми знаниями в области веб-дизайна, вы можете изменить тип, размер и цвет шрифта. Это может позволить вам настроить каждую деталь на вашем сайте и сделать ваш контент более читабельным. Если вы работаете на платформе Bootstrap, ознакомьтесь с другими способами переопределения настроек по умолчанию в Bootstrap CSS для создания действительно уникального веб-сайта.
Как изменить размер шрифта в CSS
Есть разные способы привлечь внимание к тексту на веб-странице.Например, вы можете сделать его неоново-желтым. Вы можете полужирным шрифтом или подчеркнуть . Вы можете выделить одну фразу в предложении.
В дополнение к этим параметрам форматирования вы также можете изменить размер шрифта текста, чтобы привлечь внимание читателя и установить иерархию сообщений. В этом сообщении блога вы заметите, что заголовок имеет самый большой размер шрифта. Далее идут мои h3s, h4s, h5s, все из которых больше, чем элементы
, которые они содержат, поэтому посетитель начинает с верхней части разных разделов.
Уровни заголовков — не единственный способ изменить размер шрифта на вашем сайте. Допустим, вы хотите уменьшить или увеличить стандартные уровни заголовков или изменить размер шрифта других элементов на странице. В этом случае вы можете использовать CSS. Давайте рассмотрим процесс ниже.
Примечание. Я буду использовать онлайн-редактор кода W3Schools, чтобы создать приведенные ниже примеры. Вы можете щелкнуть любую ссылку на источник, чтобы увидеть полный фрагмент кода, стоящий за примером, и попробовать свой собственный.
Как изменить размер шрифта в CSS
Размер шрифта — это свойство CSS, которое контролирует размер шрифта на веб-странице. Есть несколько различных значений, которые вы можете использовать для определения свойства font-size. Взгляните на приведенный ниже пример, который включает различные значения и единицы измерения, которые вы можете использовать в CSS.
Эти значения предлагают разные подходы к установке размера шрифта на вашей веб-странице. Тот, который вы выберете, будет зависеть от потребностей и целей вашего сайта.Давайте подробнее рассмотрим эти значения, взвесив достоинства и недостатки каждого из них ниже.
Значения свойств Font-size
В CSS свойство font-size может быть указано с любым из следующих значений. Для каждого значения свойства я приведу пример его синтаксиса, а также краткое описание.
Ключевое слово абсолютного размера
  
элемент  
font-size: small;
 
>
  
Ключевые слова абсолютного размера основаны на размере шрифта по умолчанию.Чаще всего размер шрифта по умолчанию средний (что соответствует 16 пикселям или 1em), хотя он может отличаться в зависимости от браузера и семейства шрифтов. Обратите внимание, что в последней версии Bootstrap CSS размер шрифта по умолчанию составляет 16 пикселей.
Ключевые слова абсолютного размера:

xx малый
x малый
малый,
средний
большой
x большой
хх большой
xxx большой

Ключевые слова абсолютного размера позволяют легко установить текст определенного размера и создать иерархию шрифтов для вашей страницы.Однако они не позволяют пользователю изменять размер текста во всех браузерах, что делает его плохим выбором для доступного дизайна. Чтобы охватить всех пользователей, попробуйте ключевые слова относительного размера.
Ключевое слово относительного размера
  
элемент  
font-size: больше;
 
>
  
Ключевые слова относительного размера устанавливают шрифт больше или меньше по отношению к размеру шрифта родительского элемента. Эти относительные размеры примерно основаны на соотношении ключевых слов абсолютного размера, описанных выше.
Итак, если у родительского элемента размер шрифта большой, дочерний элемент с определенным относительным размером меньше будет иметь средний размер шрифта. Давайте посмотрим на код этого гипотетического.
  
 
 Родительский элемент 
 
 
 Дочерний элемент 
 
 
  
 
.родственник  
font-size: меньше;
 
>
  
Обратите внимание, что я использовал селектор классов «.relative» для нацеливания на один h3 вместо того, чтобы использовать селектор типа, который был бы нацелен на оба h3. Вы можете узнать больше о селекторах CSS в статье Что такое селекторы CSS и как они работают?
Вот как код будет отображаться в интерфейсе вашего сайта:
Ключевые слова относительного размера позволяют легко установить размер текста относительно окружающих элементов.Их преимущество перед ключевыми словами абсолютного размера состоит в том, что они позволяют пользователям изменять размер текста во всех браузерах, что делает его хорошим выбором для доступности.
Есть несколько значений длины, которые могут определять свойство font-size в CSS. Мы сосредоточимся на трех наиболее распространенных: пикселях, em-единицах и rem.
пикселей
  
элемент  
font-size: 32px;
 
>
  
Использование пикселей (пикселей) в качестве значения длины позволит вам точно установить размер шрифта, независимо от браузера, который использует посетитель.Вы можете точно указать количество пикселей по высоте, которое вы хотите, чтобы браузер отображал ваш текст, и он будет (хотя результаты могут незначительно отличаться в зависимости от алгоритмов, используемых браузерами).
Однако фиксированный характер пикселей также является недостатком. Они не оптимизированы для всех устройств — CSS-Tricks обнаружили, что веб-сайты на iPad mini отображаются так же, как, например, веб-сайты на iPad, — и их длина недоступна. Поскольку пользователи не могут изменять размер шрифта в некоторых браузерах, вы можете использовать более инклюзивные и гибкие параметры.
Ems
  
элемент  
font-size: 2em;
 
>
  
Установка размера шрифта в em-единицах идеально подходит для инклюзивного дизайна. Поскольку ems — это относительная единица, пользователи могут настраивать размер текста во всех браузерах.
Единственный недостаток — соединение ЭМС. Скажем, элемент с размером шрифта 2em содержит другой элемент . Этот вложенный элемент будет вдвое больше, или 4em.См. Код ниже.
  
 
 Я крупнее , чем остальная часть предложения. 
 
  
  
пролет  
font-size: 2em;
 
>
  
Вот как он будет отображаться в интерфейсе вашего сайта:
Ремс
  
элемент  
font-size: 2rem;
 
>
  
Рем — относительная единица, как и ЭМС, но не складываются.Это связано с тем, что em являются относительными к шрифту единицами, то есть размер шрифта зависит от размера шрифта родительского элемента, в то время как rem основывается на корне. Это означает, что размер шрифта зависит от размера шрифта, используемого корневым элементом или элементом в верхней части документа.
Скажем, я установил размер шрифта корневого элемента на 16 пикселей, чтобы любой текст в документе, не измененный CSS, имел размер 16 пикселей. Но я хочу изменить размер шрифта элемента
, который похож на тот, который упоминался в приведенном выше примере.Давайте посмотрим на код ниже.
  
 
Размер шрифта этого документа - 16 пикселей.
 
 
 
 Я не больше , чем остальная часть предложения. Но я в три раза больше корневого элемента. 
 
  
  
html  
размер шрифта: 16 пикселей;
 
>
 
пролет  
font-size: 3rem;
 
>
  
Вот как он будет отображаться в интерфейсе вашего сайта:
Обратите внимание, что вложенный элемент имеет тот же размер шрифта, что и другой элемент .
  
элемент  
размер шрифта: 110%;
 
>
  
устанавливает размер шрифта элемента относительно размера шрифта родительского элемента.
, для которого установлено значение 36px, содержит элемент абзаца и два элемента span. Размер шрифта элементов диапазона установлен на 50% и 200% соответственно. Тогда элемент со значением 50% будет иметь размер 18 пикселей, а элемент со значением 200% будет иметь размер 27 пикселей.Давайте посмотрим на код этого гипотетического.
  
 
 
Полноразмерный текст (36 пикселей)
 
 
 
 50% (18 пикселей) 
 
 
 
 200% (72 пикселя) 
 
 
  
 
. Родительский  
размер шрифта: 36 пикселей;
 
>
 
.меньший  
размер шрифта: 50%;
 
>
 
. Больше  
размер шрифта: 200%;
 
>
  
Вот как код будет отображаться в интерфейсе вашего сайта:
Размер адаптивного шрифта в CSS
Все значения свойств, описанные выше, имеют одну общую черту: они не реагируют. Если вы хотите, чтобы размер шрифта соответствовал требованиям для всех устройств и дисплеев, вы можете использовать единицу ширины области просмотра, сокращенную до vw.
Vw — другая относительная единица. Он не относительно родительского или корневого элемента, а относительно ширины области просмотра (точнее, 1%). Это означает, что если ширина окна просмотра составляет 100 см, 1vw = 1 см. Если ширина окна просмотра 50 см, 1vw = 0,5 см и так далее.
Скажем, я хочу, чтобы размер шрифта моего абзаца составлял 10% от ширины окна браузера.
  
 
Видите, как размер шрифта изменяется вместе с шириной окна браузера?
 
  
  
п  
размер шрифта: 10vw;
 
>
  
Вот как код будет отображаться в интерфейсе вашего сайта:
Максимальный размер шрифта в CSS
Устанавливая размер шрифта в vms, вы должны быть осторожны, чтобы ваш текст не стал слишком большим на больших экранах.К сожалению, в CSS нет max-font-size, но вы можете предотвратить слишком большой размер шрифта, используя медиа-запросы.
Вам просто нужно использовать медиа-запрос в точке останова для определенного размера экрана и вернуть размер шрифта к заданному значению в пикселях. Скажем, я хочу вернуть размер шрифта к 30 пикселей, когда область просмотра превышает 1000 пикселей.
  
 
Посмотрите, как этот текст будет растягиваться, растягиваться и растягиваться - пока браузер не достигнет 1000 пикселей.Затем текст снова уменьшится.
 
  
  
кузов  
размер шрифта: 10vw;
 
>
 
@media screen и (минимальная ширина: 1000 пикселей)  
кузов  
размер шрифта: 30 пикселей;
 
>
  
Управление размером шрифта
Изменить размер шрифта в CSS сложно по сравнению с легкостью изменения размера шрифта в Google Docs или Microsoft Word, но с этим можно справиться с некоторой практикой в ​​HTML и CSS.
Вот как указать размер шрифта сегодня »
Элемент Font и его атрибуты устарели. Этот атрибут устарел и не должен использоваться. Поддержка этого атрибута браузером ограничена, и его использование может привести к неожиданным результатам. Вместо этого используйте CSS для стилизации шрифтов. Чтобы узнать больше, см. Наше руководство по шрифтам и веб-типографике.
Атрибут font-size CSS может использоваться для изменения размера любого текстового элемента. Могут использоваться абсолютные единицы, такие как точка и пиксели, а также относительные единицы, такие как проценты и ems.Относительные размеры шрифта позволяют указать размер шрифта относительно окружающего текста. Например, это правило устанавливает шрифт элементов на 180% от размера окружающего текста, делая элементов немного больше поэтапно:
Итак, эта строка, которая использует
  
Это отличная идея!
  
Заголовки и относительные размеры
Использование относительных размеров шрифта при применении к заголовкам создает особую проблему, которую стоит понять. Относительные размеры шрифтов обычно интуитивно понятны. Вы устанавливаете размер в процентах, и шрифт кажется на процент больше или меньше окружающего текста. Заголовки (
и т. Д.) Бросают гаечный ключ в относительные размеры. При использовании относительных шрифтов важно понимать, что они относятся к окружающему элементу.Например, если вы установите для заголовков
относительный размер шрифта 150%, можно ожидать, что они будут на пятьдесят процентов больше обычных
Удивительно, но это правило, вероятно, сделает символы h2 меньше, чем обычно, а не больше. Это потому, что 150% относятся к окружающему элементу, а не к нормальному размеру элемента h2. По умолчанию большинство браузеров отображают элементы h2 в два раза больше обычного текста.Относительный размер 300%, вероятно, даст эффект элемента
на пятьдесят процентов больше. Давайте посмотрим, как это работает на практике. Возьмем, к примеру, эти три заголовка:
 
 Это нормальный элемент h2 
 
 Этот h2 имеет размер 150% 
 
 Этот h2 имеет размер 300% 
  
Изначально вы можно было ожидать, что второй h2 будет на 50% больше первого, а последний — в три раза больше первого.Однако на данном этапе вы должны знать, что этого не произойдет.
См. Наше руководство по шрифтам и веб-типографике, чтобы узнать больше.
Адам — ​​технический писатель, специализирующийся на документации и руководствах для разработчиков.
Как изменить размер текста в HTML
Если вы блоггер выходного дня, пишущий сообщения через известную платформу для ведения блогов, или кто-то, кто управляет веб-сайтом по служебным или личным причинам, может пригодиться понимание основ HTML-кодирования. Иногда вам может потребоваться внести легкие изменения в html в своем блоге; например, изменение размера или цвета текста в HTML.Оплата веб-дизайнеру может привести к увеличению стоимости простых настроек. Изменение размера текста в html — это простая проблема кодирования, которую вы можете решить самостоятельно, и в этой статье мы рассмотрим, как это сделать. Вы можете узнать больше о кодировании HTML, пройдя курс HTML Made Easy.
Когда вы хотите изменить размер текста в HTML?
Вы можете изменить размер текста в html, если вам нужно создать заголовки на своей веб-странице или если вы хотите изменить размер текста на разных страницах — или даже от абзаца к абзацу — на вашем веб-сайте.Например, если вы хотите, чтобы определенное слово на странице или в абзаце выделялось, вы можете сделать это, изменив размер текста с помощью команд HTML.
Предупреждение об использовании веб-сайтов с разным размером текста
Если вы изменяете размер текста в html на своем веб-сайте, вы должны иметь в виду, что создание веб-страниц с множеством разных размеров текста может отвлекать ваших читателей. Создавая свой веб-сайт или изменяя размер текста в HTML на своем веб-сайте, помните ключевую концепцию графического дизайна: меньше значит больше.Это означает, что сохранение единообразия сайта намного важнее, чем включение множества несоответствующих элементов по всему сайту, из-за которых ваш сайт может казаться загроможденным и непрофессиональным. Если вам интересно узнать больше о графическом дизайне и создании красивых продуктов, «Раскрытые секреты графического дизайна» охватывают множество тем, важных для создания красивых проектов.
Перед изменением размера текста в HTML
Каждый раз, когда вы решаете внести изменения в свою веб-страницу, будь то просто изменение размера текста в html, добавление фотографий или изменение фонового изображения на новый узор, всегда делайте резервную копию существующей страницы.Это гарантирует, что если вы сделаете ошибку во время изменений, и эта ошибка приведет к потере вашей веб-страницы, вы сможете вернуться к тому месту, с которого начали, и повторить попытку.
Чтобы сделать копию своей веб-страницы, откройте файл и сделайте копию html. Затем вставьте копию html вашей страницы в такую ​​программу, как Programmer’s Notepad, бесплатную утилиту, используемую веб-дизайнерами / программистами для CSS, html и других программ.
Еще один способ изменить размер текста на веб-сайте
Прежде чем мы начнем, если вам необходимо внести изменения в шрифт на всем сайте, вы можете сделать это намного проще, внеся эти изменения в свой CSS или каскадные таблицы стилей.Вы можете найти CSS, в большинстве случаев, найдя файл style.css. На некоторых веб-сайтах есть дополнительные файлы .css для определенных областей вашего веб-сайта, но style.css обычно является именем основной используемой таблицы стилей. (CSS Made Easy — отличный способ начать работу с каскадными таблицами стилей.)
Как изменить размер текста в HTML
Для начала найдите строку или строки текста, которые нужно изменить. Если вы работаете в блоге, таком как WordPress, вам нужно настроить страницу своего блога на визуальный редактор, который позволяет вам вносить изменения в html.В Blogger есть вкладка «Изменить HTML» или что-то подобное для страниц и для сайта. Если вы находите файл через панель управления, он, скорее всего, называется index.html.
После того, как вы определите, какой текст вы хотите изменить размер, вы воспользуетесь командой , где «X» — это число, которое вы хотите, чтобы размер шрифта был. Вы можете использовать числа от 1 до 7, где 1 — самое маленькое, а 7 — самое большое. Вы должны завершить свою команду закрывающим тегом . Это сообщает программе, где остановить изменение размера вашего текста.Если вы забыли добавить закрывающий тег или сделали это неправильно (скажем, вы поместили / после слова font, а не перед, как показано), шрифт для остальной части страницы также будет иметь измененный размер.
Этот тег, , показывает, что мы изменяем размер текста для слов, которые идут сразу после этой команды и перед закрывающей командой .
Давайте посмотрим на этот абзац:

Зашел в магазин. Я купил хлеб и молоко.Я забыл принести молоко домой.

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

Зашел в магазин. Я купил хлеб и молоко. Я забыл принести молоко домой.

Теперь предположим, что вы хотите изменить размер шрифта в слове или наборе слов, которые будут использоваться в качестве заголовка. Вы просто разместите свою команду вокруг этого слова или набора слов.
Опять же, не забудьте использовать команду завершения после изменения размера текста, чтобы предотвратить изменение в остальной части документа.
Помимо изменения размера текста в HTML
Изменение размера текста в html — не единственное простое изменение, которое вы можете научиться вносить самостоятельно. Вы также можете изучить множество дополнительных трюков с html, если немного поработаете над некоторыми классами.Соедините один из классов html с CSS Fundamentals, который углубляется в мир каскадных таблиц стилей и изучите методы, которые вы можете использовать для управления дизайном своего веб-сайта.
 Последнее обновление страницы: апрель 2014 г. 
Рекомендуемые статьи
Как стилизовать текстовые элементы с помощью шрифта, размера и цвета в CSS
 Автор выбрал Diversity in Tech Fund, чтобы получить пожертвование в рамках программы Write for DOnations.
Введение
Cascading Style Sheets (CSS) — это язык, разработанный для двух дисциплин: программиста и дизайнера. Работа с текстом в сети — один из ярких примеров такой широкой доступности языка. Стилизация текста использует концепции из мира графического дизайна, но регулирует соглашения об именах для более широкой реализации.
Из этого туториала Вы узнаете о типографике web , искусстве стилизации текста.Подобно работе с печатным станком, вы разместите свой контент, примените визуальный стиль, чтобы помочь передать контент, и настройте контент для разборчивости и выделения. Цель стилизации текста в Интернете — создать визуальную иерархию по цвету, размеру, форме и пространству. Таким образом, заголовки выделяются из подзаголовков, которые выделяются из абзацев. Эти концепции помогают сделать текст более читаемым и читаемым.
Вы начнете обучение с написания HTML-структуры, которая будет состоять из содержимого заполнителя из Cupcake Ipsum.Вы будете работать с разными уровнями заголовков ( h2 — h6 ) и типами контента ( p , strong и em ) для применения нескольких свойств CSS, связанных с текстом, включая font-family , . font-size и color . Вы также загрузите пользовательские шрифты из Google Fonts, сторонней службы хостинга шрифтов. На каждом шаге этого руководства будет представлена ​​новая концепция или набор свойств, применяемых к контенту. К концу у вас будет веб-страница с индивидуальным стилем.
Предварительные требования
Настройка примера HTML
На этом первом шаге вы настроите HTML, который вы будете стилизовать на протяжении всей оставшейся части учебника. Цель HTML в этом руководстве — предоставить вам различные элементы и ситуации для практики стилизации.
Откройте файл index.html с помощью текстового редактора, например nano, Vim или Visual Studio Code. Добавьте следующий шаблонный HTML-код, чтобы предоставить файлу необходимый базовый код:


Похожие публикации:

Где купить акции byd
Как выбрать наибольшее значение в excel
Как задать класс в java
Как красиво отредактировать фото в lightroom