Как в html поменять размер текста: Как изменить размер шрифта в html?

{{l10n_strings.DRAG_TEXT_HELP}}

{{article.content_lang.display}}

{{l10n_strings.AUTHOR_TOOLTIP_TEXT}}

Как поменять шрифт и размер текста на сайте (Шаблон «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 {
	margin: 0;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 13px;
	line-height: 18px;
	color: #333;
	background-color: #fff;
}

Стало:

body {
	margin: 0;
	font-family: Open Sans, sans-serif;
	font-size: 14px;
	line-height: 18px;
	color: #333;
	background-color: #fff;
}

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

Заберите ссылку на статью к себе, чтобы потом легко её найти 😉

Выберите, то, чем пользуетесь чаще всего:

Спасибо за внимание, оставайтесь на связи! Ниже ссылка на форум и обсуждение ; )

Как увеличить размер текста на 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.

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

Оцените пост

Смотрите похожее

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

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

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

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

Всегда используйте правильные теги HTML, например

—

для заголовков и

для абзацы.

Значение размера шрифта может быть абсолютный или относительный размер.

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

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

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

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

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

Установить размер шрифта с пикселями

Установка размера текста в пикселях дает вам полный контроль над размером текста:

Пример

h3 {
font-size: 30px;
}

p {
font-size: 14px;
}

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

Установить размер шрифта с помощью Em

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

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

Размер может быть рассчитан от пикселей до em по следующей формуле: пикселей /16 = em

Пример

h3 {
font-size: 1.875em; / * 30 пикселей / 16 = 1,875 em * /
}

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

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

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

Используйте комбинацию процентов и Em

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

Пример

h2 {
font-size: 2.5em;
}

h3 {
font-size: 1,875em;
}

p {
font-size: 0,875em;
}

Теперь наш код отлично работает! Он показывает тот же размер текста в все браузеры, и позволяет всем браузерам увеличивать или изменять размер текста!

Размер адаптивного шрифта

Размер текста можно установить с помощью единицы vw , что означает «ширину области просмотра».

Таким образом, размер текста будет соответствовать размеру окна браузера:

Измените размер окна браузера, чтобы увидеть, как масштабируется размер шрифта.

Viewport — это размер окна браузера. 1vw = 1% ширины области просмотра. Если ширина области просмотра 50 см, 1vw составляет 0,5 см.

CSS Font Size Tutorial — Как изменить размер текста в HTML

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

  .container {
    размер шрифта: 33 пикселей;
}
  

Это свойство принимает несколько типов значений:

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

  .container {
    размер шрифта: xx-large;
}
  

Возникает вопрос: какой тип значения выбрать и почему?

Это вопрос, которым посвящена эта статья. Он покажет вам, как использовать свойство 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 {
    размер шрифта: 60 ​​пикселей;
}
  

Пикселей

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

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

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

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, чтобы настроить таргетинг на все абзацы и поместить его в заголовок страницы.

Вот код CSS:

 
 
 
 
 п {
 
 семейство шрифтов: Arial; 
 
} 
 
 
  

Вот HTML:

 
 
 
 
  
 Как изменить тип шрифта в 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, чтобы настроить таргетинг на все абзацы и поместить его в заголовок страницы.

Вот код CSS:

 
 
 
 
 п {
 
 размер шрифта: 18 пикселей; 
 
} 
 
 
  

Вот HTML:

 
 
 
 
  
 Как изменить размер шрифта в 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, чтобы настроить таргетинг на все абзацы и поместить его в заголовок страницы.

Вот код CSS:

 
 
 
 
 п {
 
 цвет: # 800000; 
 
} 
  

Вот HTML:

 
 
 
 
  
 Как изменить цвет шрифта в 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: больше; 
 
} 
  

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

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

Вот HTML:

 
 
 
 
 
 

 
  
 Родительский элемент 
  

 
  
 Дочерний элемент 
  

 
 
 

 
 
  

Вот код CSS:

 
 
 
 
.родственник {
 
 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.См. Код ниже.

Вот HTML:

 
 
 
 
 
 

 
  Я  крупнее , чем остальная часть предложения.  
 
 
 

 
 
  

Вот код CSS:

 
 
 
 
 пролет {
 
 font-size: 2em; 
 
} 
  

Вот как он будет отображаться в интерфейсе вашего сайта:

Источник

Ремс

 
 
 
 
 элемент {
 
 font-size: 2rem; 
 
} 
  

Рем — относительная единица, как и ЭМС, но не складываются.Это связано с тем, что em являются относительными к шрифту единицами, то есть размер шрифта зависит от размера шрифта родительского элемента, в то время как rem основывается на корне. Это означает, что размер шрифта зависит от размера шрифта, используемого корневым элементом или элементом в верхней части документа.

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

 
 
 
 
 
 Размер шрифта этого документа - 16 пикселей. 
 

 
 
 

 
  Я  не больше , чем остальная часть предложения. Но я в три раза больше корневого элемента.  
 
 
 

 
 
  

 
 
 
 
 html {
 
 размер шрифта: 16 пикселей; 
 
} 
 
 пролет {
 
 font-size: 3rem; 
 
} 
  

 
 
 
 
 элемент {
 
 размер шрифта: 110%; 
 
} 
  

 
 
 
 
 
 

 
 
 Полноразмерный текст (36 пикселей) 
 

 
 
  50% (18 пикселей)  
 

 
 
  200% (72 пикселя)  
 

 
 
 

 
 
  

 
 
 
 
. Родительский {
 
 размер шрифта: 36 пикселей; 
 
} 
 
.меньший {
 
 размер шрифта: 50%; 
 
} 
 
. Больше {
 
 размер шрифта: 200%; 
 
} 
  

 
 
 
 
 
 Видите, как размер шрифта изменяется вместе с шириной окна браузера? 
 

 
 
  

 
 
 
 
 п {
 
 размер шрифта: 10vw; 
 
} 
  

 
 
 
 
 
 Посмотрите, как этот текст будет растягиваться, растягиваться и растягиваться - пока браузер не достигнет 1000 пикселей.Затем текст снова уменьшится. 
 

 
 
  

 
 
 
 
 кузов {
 
 размер шрифта: 10vw; 
 
} 
 
 @media screen и (минимальная ширина: 1000 пикселей) {
 
 кузов {
 
 размер шрифта: 30 пикселей; 
 
} 
 
 
  

  em {font-size : 180%; }  

  
 Это  отличная  идея! 
  

  h2 {font-size: 150%; }  

   
 Это нормальный элемент h2 
 
 Этот h2 имеет размер 150% 
 
 Этот h2 имеет размер 300% 
  

  ...
  
     
 Чупа-чупс с сахарной сливой, шоколадный кекс, пончик 
 

     
 Макарун с овсяным пирогом "Тутси" 
 

     
 Датский пончик из желейных бобов тирамису 
 

     
 Зефир из теста с лимонными каплями 
 

     
 Пудинг для яблочного пирога 
 

     
 Пряничный датский 
 

     
 Морковный пирог с леденцами на палочке мармеладные мишки 
 

     
 Лакричная конфета, сладкая вата, лакрица 
 
  
...
  

  ...
  
     
 Чупа-чупс с сахарной сливой, шоколадный кекс, пончик 
 

     
 Макарун с овсяным пирогом "Тутси" 
 

    
 Конфеты "Джуджуб" брауни.Десертный пирог с рулетами из мармеладных конфет с сахарной ватой. Сахарная слива Обожаю кекс. Jelly-o gummi мишки маффин марципановые марципановые чизкейк пончик имбирный пряник I love. Кекс вафельный торт. 

     
 Датский пончик из желейных бобов тирамису 
 

     
 Зефир из теста с лимонными каплями 
 

    
 Обожаю зефирные конфеты. Кунжутные булочки по-датски. Шоколадный торт печенье желе-о тирамису халва брауни халва шоколадный шоколадный торт. Jelly-o caramels jujubes bonbon cupcake danish tootsie roll шоколадная плитка.Макаруны Я люблю кексы, леденцы, сладкие булочки, я люблю. Я люблю мороженое из конфет и маршмеллоу с круассанами. Я люблю мармеладных мишек. 

     
 Пудинг для яблочного пирога 
 

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

     
 Пряничный датский 
 

    
 Порошок драже с кунжутом, леденцы, леденцы, желе. Халва имбирный чизкейк вафельный. Вафельный булочек Я люблю Я люблю. Торт ириски я люблю. Желейные бобы из сахарной ваты. Я люблю ириски. Чупа чупс чупа чупс карамельки мороженое халва конфеты шоколадный торт. Маршмеллоу морковный торт мармелад. 

     
 Морковный пирог с леденцами на палочке мармеладные мишки 
 

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

     
 Лакричная конфета, сладкая вата, лакрица 
 

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

  ...
     
 Макарун с овсяным пирогом "Тутси" 
 

    
 Конфеты "Джуджуб" брауни. Десертный пирог с рулетами из мармеладных конфет с сахарной ватой. Сахарная слива  Я люблю пирожные . Jelly-o gummi мишки маффин марципановые марципановые чизкейк пончик имбирный пряник I love. Кекс вафельный торт. 

     
 Датский пончик из желейных бобов тирамису 
 

     
 Зефир из теста с лимонными каплями 
 

    
 Обожаю зефирные конфеты. Кунжутные хлопья  по-датски. Шоколадный торт печенье желе-о тирамису халва брауни халва шоколадный шоколадный торт. Jelly-o caramels jujubes bonbon cupcake danish tootsie roll шоколадная плитка. Макаруны Я люблю кексы, леденцы, сладкие булочки, я люблю. Я люблю мороженое из конфет и маршмеллоу с круассанами. Я люблю мармеладных мишек. 

     
 Пудинг для яблочного пирога 
 

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

     
 Пряничный датский 
 

    
 Порошок драже с кунжутом, леденцы, леденцы, желе. Халва имбирный чизкейк вафельный.   Вафельный булочек   Я люблю, я люблю. Торт ириски я люблю. Желейные бобы из сахарной ваты. Я люблю ириски.Чупа чупс чупа чупс карамельки мороженое халва конфеты шоколадный торт. Маршмеллоу морковный торт мармелад. 

     
 Морковный пирог с леденцами на палочке мармеладные мишки 
 

    
 Шоколадный торт, сладкий рулет, пудинг, шоколадный торт, кекс, кекс, медвежий коготь. 

     
 Лакричная конфета, сладкая вата, лакрица 
 

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

  семейство шрифтов: "Helvetica Neue", Helvetica, Arial, без засечек;
  

  body {
  семейство шрифтов: "Avenir Next", Calibri, Verdana, без засечек;
}
  

  ...

    
    

...
  

  body {
  семейство шрифтов: "Public Sans", Verdana, sans-serif;
}
  

  ...

    
    " rel = "таблица стилей">

...
  

  ...
h2, h3, h4, h5, h5, h6 {
  семейство шрифтов: «Зыбучие пески», без засечек;
}
  

  ...
h2, h3, h4, h5, h5, h6 {
    семейство шрифтов: «Зыбучие пески», без засечек;
    font-weight: 600;
}
  

  ...
h4 {
    font-weight: 700;
}
  

  ...
сильный em,
em strong {
    семейство шрифтов: «Зыбучие пески», без засечек;
}
  

  ...
сильный em,
em strong {
    семейство шрифтов: «Зыбучие пески», без засечек;
    стиль шрифта: нормальный;
}
  

  body {
    семейство шрифтов: "Public Sans", Verdana, sans-serif;
    размер шрифта: 18 пикселей;
}
...
  

  ...
h2 {
    размер шрифта: 250%;
}
...
  

  ...
h2 {
    размер шрифта: 250%; / * 45 пикселей * /
}

h3 {
    размер шрифта: 200%; / * 36 пикселей * /
}

h4 {
    размер шрифта: 177,78%; / * 32 пикселя * /
}

h5 {
    размер шрифта: 162,5%; / * 26 пикселей * /
}

h5 {
    размер шрифта: 122%; / * 22px * /
}

h6 {
    размер шрифта: 100%; / * 18 пикселей * /
}
...
  

  body {
    семейство шрифтов: "Public Sans", Verdana, sans-serif;
    размер шрифта: 18 пикселей;
    цвет: DarkSlateGray;
}
...
  

  ...
h2 {
    размер шрифта: 250%; / * 45 пикселей * /
    цвет: индиго;
}
...
  

  ...
h3 {
    размер шрифта: 200%; / * 36 пикселей * /
    цвет: MediumVioletRed;
}

h4 {
    размер шрифта: 177,78%; / * 32 пикселя * /
    цвет: салатовый;
}

h5 {
    размер шрифта: 162.5%; / * 26 пикселей * /
    цвет: шоколадный;
}

h5 {
    размер шрифта: 122%; / * 22px * /
    цвет: малиновый;
}

h6 {
    размер шрифта: 100%; / * 18 пикселей * /
    цвет: DeepSkyBlue;
}
...