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

Содержание

HTML-теги. Изменение размера шрифта — Инструкция по применению

В нашей системе у вас есть возможность верстать текст на страницах при помощи основных HTML-тегов.

Для этого вам понадобятся страница, созданная с модулем «Редактируемая страница», «Периодика», «Каталог товаров» (только при редактировании текстового поля «Описание раздела» или «Описание» для позиции каталога), «Анкета» (только при редактировании формы «Помощь/Информация») и начальное понимание об оформлении при помощи тегов.

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

HTML-теги. Изменение размера шрифта. Шаг 1

Чтобы изменить размера шрифта, войдите при редактировании в режим HTML.

 

HTML-теги. Изменение размера шрифта. Шаг 2

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

 

HTML-теги. Изменение размера шрифта. Шаг 3

Вставьте тег «» (где после знака «=» надо указать, на сколько шагов увеличить размер шрифта) перед словом/словосочетанием/предложением/абзацем.

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

 

HTML-теги. Изменение размера шрифта. Шаг 4

Сразу же после слова/словосочетания/предложения/абзаца вставьте тег «».

 

HTML-теги. Изменение размера шрифта. Шаг 5

Подтвердите изменение размера, нажав кнопку «Сохранить».

 

HTML-теги. Изменение размера шрифта

Если все действия были выполнены верно, то шрифт в выбранном отрезке текста будет увеличен.

 

Как Изменить Размер Шрифта в WordPress

WordPress

access_time

13 марта, 2020

hourglass_empty

3мин. чтения

Изменить размер шрифта в WordPress на самом деле очень просто. В этой статье мы покажем вам, как это сделать.

Мы рассмотрим два метода — через плагин и с помощью CSS.

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

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

В последней версии WordPress доступен новый редактор Gutenberg. Мы также покажем вам, как изменить размер шрифта с помощью этого инструмента.

Пробуем Изменить Размер Шрифта с Помощью Плагина TinyMCE Advanced

TinyMCE Advanced — бесплатный плагин, который позволяет легко выбрать нужный размер шрифта. Этот плагин создаёт классическую панель инструментов в новом редакторе Gutenberg.

Сначала необходимо установить и активировать плагин. Затем вы можете перейти на страницу настроек (найдите плагин TinyMCE Advanced в разделе “Настройки” и кликните по названию). Там вы найдёте две вкладки: Редактор блоков (Gutenberg) и Классический редактор (TinyMCE). Кстати плагин переведён на русский, так что знания английского вам не понадобятся, по крайней мере для работы в визуальном редакторе. 

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

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

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

Используем CSS — Классический Путь

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

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

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

  1. Перейдите в Консоль WordPress, затем выберите Внешний вид -> Настроить.
  2. Выберите Добавить CSS.

Добавить код можно в поле слева.

  1. Чтобы изменить весь шрифт:
    body {
    font-size: 1.25rem;
    }

  2. Чтобы изменить шрифт абзаца:
    p {
    font-size: 25px;
    }

  3. Чтобы изменить шрифты определённых заголовков:
    h3 {
    font-size: 2.5em;
    }

  4. Чтобы изменить размер шрифта в боковом меню WordPress:
    .sidebar li {
    font-size: 12px;
    }
  5. Чтобы изменить размер шрифта в футере:
    .footer {
    font-size: 150%;
    }
  6. Чтобы изменить шрифт для определенного размера экрана:
    html {
    font-size: 18px;
    }
    @media (min-width: 900px) {
    html {
    font-size: 20px;
    }
    }

CSS-стили позволяют измерять размер текста в четырёх разных единицах:

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

Как Изменить Размер Шрифта в Редакторе Gutenberg

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

Вот как выглядит блок:

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

Очень удобно, не правда ли?

Выводы

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

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

Размер шрифта и масштаб страниц — увеличьте размер веб-страниц

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

Вот как вы можете увеличивать и уменьшать масштаб отдельных веб-сайтов.

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

Клавиатурные сочетания: Вы также можете использовать управление масштабом без помощи мыши. Нажав и удерживая commandCtrl, нажмите + для увеличения масштаба, — для уменьшения масштаба или 0 для его сброса.

Совет: Чтобы установить уровень масштабирования по умолчанию для всех веб-сайтов, вы можете попробовать дополнение, такое как Fixed Zoom или Zoom Page WE.

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

Щипковое действие в настоящее время поддерживается в Windows через сенсорный экран и высокоточные тачпады, на Mac через тачпады и в Linux через сенсорные экраны. Тачпады Linux в настоящее время не поддерживаются, и ожидается, что поддержка будет добавлена в будущем.

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

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

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

  1. На Панели меню в верхней части экрана щёлкните и выберите .Нажмите на кнопку меню и выберите Настройки.Настройки.Настройки.
  2. В панели перейдите к разделу Язык и внешний вид.
  3. Под разделом Масштаб используйте раскрывающееся меню Масштаб по умолчанию, чтобы выбрать уровень масштабирования для всех страниц. Firefox запомнит индивидуальные уровни масштабирования сайта, которые вы установили.
    • Чтобы установить уровень масштабирования только для текста, установите флажок
      Только текст
      .
  4. Закройте страницу about:preferences. Любые сделанные изменения будут сохранены автоматически.

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

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

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

Изменение размера, цвета и шрифта выбранных слов (с использованием Font и Span): howto_in_ru — LiveJournal

Эта статья — о том, как изменить внешний вид вашего текста или какой-либо его части. К примеру, если вы захотите сделать определённое слово в записи красным. Если вам нужно изменить шрифт или другие параметры текста всего журнала в целом (а не только некоторых слов), то прочтите раздел справки Как изменить шрифт для всего моего журнала?.

Шрифт и другие параметры текста изменяют два различных HTML-тэга: <font> и <span>. У каждого из них есть свои достоинства и недостатки, так что выбирать один из них вам придётся самостоятельно. Ниже будут описаны оба тэга.

<font>
Плюсы:
1. Может быть использован для изменения внешнего вида текста вашей Биографии на странице «О пользователе» (вы можете изменить свою биографию здесь), а не только ваших записей в журнале.
2. Начинающим пользователям проще обращаться с этим тэгом, он интуитивно более понятен, чем <span>.

Минус:
1. Не рекомендован к использованию и может некорректно восприниматься перспективными версиями браузеров (хотя поддерживается всеми нынешними). Не поддерживается в XHTML.

<span>
Плюс:
1. Широко используется и будет поддерживаться браузерами значительно дольше, чем <font>. Поддерживается в XHTML.
Минусы:
1. Не может быть использован для изменения внешнего вида Биографии, хотя подходит для модификации текста ваших записей в журнале. 2. Менее удобен и понятен для неопытных пользователей, чем <font>.

Использование <font>

Size
Для изменения размера слов(а) вставьте в текст следующее:

<font size=»размер текста»>А тут — сам текст.</font>

При этом нужно заменить размер текста на требуемый размер. Значение этого параметра — целое число от 1 до 7. Вы также можете вписать «+» или «-» перед числом, если вы хотите увеличить или уменьшить (соответственно) текущий/стандартный размер текста на заданное вами число.

Цвет
Для изменения цвета слов(а) используйте следующее:

<font color=»код цвета»>А тут — сам текст.</font>

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

Шрифт
Шрифт слов(а) изменяется вот так:

<font face=»шрифт»>А тут — сам текст.</font>

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

Комбинации
Все вышеперечисленные параметры могут быть использованы в любых комбинациях в одном тэге. Например, следующий код выдаст на экран текст размера 4, голубого цвета и в шрифте comic sans ms:

<font size=»4″ color=»#0000ff» face=»comic sans ms»>Сам текст.</font>

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

Сам текст.

Использование <span>

Размер
Для изменения размера слов(а) вставьте в текст:

<span>А тут — сам текст.</span>

При этом размер текста нужно заменить на тот размер, который вы хотите использовать — на целое число от 1 и выше. Учтите, что тот размер, который вы используете в <span>, и тот, который работает в <font>, никак не соотносятся. В нашем примере размер измеряется в пунктах (или «pt» — от английского «point»). Обычный размер текста — 12 пунктов.

Цвет
Для изменения цвета слов(а) используйте:

<span>А тут — сам текст.</span>

При использовании этого тэга следует вместо код цвета вставить нужный шестнадцатиричный код цвета. Список некоторых цветовых кодов размещён вот здесь.

Шрифт
Шрифт слов(а) изменяется следующим образом:

<span>А тут — сам текст.</span>

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

Комбинации
Вы можете использовать любую комбинацию этих параметров в одном тэге. Например, следующая комбинация выдаст на экран текст размером в 16 пунктов, зелёного цвета и в шрифте trebuchet ms:

<span>Сам текст.</span>

Вот результат:

Сам текст.

С помощью тэга <span> текст можно модифицировать и гораздо более серьёзно. Как именно — можно увидеть в этой статье.

Спасибо janinedog.
Перевёл на русский ximaera.

Не удается найти страницу | Autodesk Knowledge Network

(* {{l10n_strings.REQUIRED_FIELD}})

{{l10n_strings.CREATE_NEW_COLLECTION}}*

{{l10n_strings.ADD_COLLECTION_DESCRIPTION}}

{{l10n_strings.COLLECTION_DESCRIPTION}} {{addToCollection.description.length}}/500 {{l10n_strings.TAGS}} {{$item}} {{l10n_strings.PRODUCTS}} {{l10n_strings.DRAG_TEXT}}  

{{l10n_strings.DRAG_TEXT_HELP}}

{{l10n_strings.LANGUAGE}} {{$select.selected.display}}

{{article.content_lang.display}}

{{l10n_strings.AUTHOR}}  

{{l10n_strings.AUTHOR_TOOLTIP_TEXT}}

{{$select. selected.display}} {{l10n_strings.CREATE_AND_ADD_TO_COLLECTION_MODAL_BUTTON}} {{l10n_strings.CREATE_A_COLLECTION_ERROR}}

Как поменять шрифт и размер текста на сайте (Шаблон «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.

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

Оцените пост

[всего: 0 рейтинг: 0]

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

App Store iOS iPad

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


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

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

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

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

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

для абзацы.

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

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

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

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

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

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


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

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

Пример

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

h3 {
font-size: 30px;
}

p {
font-size: 14px;
}

Попробуй сам »

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


Установить размер шрифта с помощью 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%;
}

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 пикселей. Но я хочу изменить размер шрифта элемента

, который похож на тот, который упоминался в приведенном выше примере.Давайте посмотрим на код ниже.

Вот HTML:

 
 

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

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

Вот код CSS:

 
 

html {

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

}

пролет {

font-size: 3rem;

}

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

Источник

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

<Процент>
 
 

элемент {

размер шрифта: 110%;

}

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

Скажем, элемент

, для которого установлено значение 36px, содержит элемент абзаца и два элемента span. Размер шрифта элементов диапазона установлен на 50% и 200% соответственно. Тогда элемент со значением 50% будет иметь размер 18 пикселей, а элемент со значением 200% будет иметь размер 27 пикселей.Давайте посмотрим на код этого гипотетического.

Вот HTML:

 
 

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

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

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

Вот код CSS:

 
 

. Родительский {

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

}

.меньший {

размер шрифта: 50%;

}

. Больше {

размер шрифта: 200%;

}

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

Источник

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

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

Vw — другая относительная единица. Он не относительно родительского или корневого элемента, а относительно ширины области просмотра (точнее, 1%). Это означает, что если ширина окна просмотра составляет 100 см, 1vw = 1 см. Если ширина окна просмотра 50 см, 1vw = 0,5 см и так далее.

Скажем, я хочу, чтобы размер шрифта моего абзаца составлял 10% от ширины окна браузера.

Вот HTML:

 
 

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

Вот код CSS:

 
 

п {

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

}

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

Источник

Максимальный размер шрифта в CSS

Устанавливая размер шрифта в vms, вы должны быть осторожны, чтобы ваш текст не стал слишком большим на больших экранах.К сожалению, в CSS нет max-font-size, но вы можете предотвратить слишком большой размер шрифта, используя медиа-запросы.

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

Вот HTML:

 
 

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

Вот код CSS:

 
 

кузов {

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

}

@media screen и (минимальная ширина: 1000 пикселей) {

кузов {

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

}

Вот результат:

Источник

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

Изменить размер шрифта в CSS сложно по сравнению с легкостью изменения размера шрифта в Google Docs или Microsoft Word, но с этим можно справиться с некоторой практикой в ​​HTML и CSS.

Вот как указать размер шрифта сегодня »

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

Атрибут font-size CSS может использоваться для изменения размера любого текстового элемента. Могут использоваться абсолютные единицы, такие как точка и пиксели, а также относительные единицы, такие как проценты и ems.Относительные размеры шрифта позволяют указать размер шрифта относительно окружающего текста. Например, это правило устанавливает шрифт элементов на 180% от размера окружающего текста, делая элементов немного больше поэтапно:

  em {font-size : 180%; }  

Итак, эта строка, которая использует

  

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

Выглядит так:

.largEm {font-size: 180%; margin: 0;} Это отличная идея !

Заголовки и относительные размеры

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

,

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

относительный размер шрифта 150%, можно ожидать, что они будут на пятьдесят процентов больше обычных

elements:

  h2 {font-size: 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-код, чтобы предоставить файлу необходимый базовый код:

Индекс

.html

  

  
    
  
  
  

  

Элемент уже загружен в файл styles.css , поэтому обязательно подготовьте этот файл.

Затем вам нужно стилизовать контент. При создании текстовых стилей часто проекту нужны стили до того, как контент будет готов. В мире графического дизайна для этой цели используется заполнитель.Дизайнеры часто используют латинский текст в качестве заполнителя, известный как Lorem Ipsum. Есть много современных версий этого текста-заполнителя, в том числе Cupcake Ipsum. Это будет справочная копия, используемая во всем HTML.

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

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

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

Чтобы создать этот иерархический контент, вы должны написать различные заголовки и заполнить каждый заголовок несколькими словами из Cupcake Ipsum в тегах в index.html . Вы будете следовать правильной семантике HTML , которая предоставляет браузеру точное значение.

Для правильной семантики HTML:

  • На странице будет только один элемент

    .Обычно это будет заголовок.
  • Последующие уровни заголовков будут только на один меньший, равный или любой более высокий уровень. Например, единственный уровень заголовка, следующий после

    , будет либо
    , либо еще

    , либо

    , но никогда не будет
    или .
    .

Используя правила семантики заголовков, добавьте следующий выделенный HTML-код в index.html :

Индекс

.html

  ...
  
     

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

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

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

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

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

Пряничный датский
Морковный пирог с леденцами на палочке мармеладные мишки
Лакричная конфета, сладкая вата, лакрица
...

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

, который будет содержать каждый абзац. Снова используйте Cupcake Ipsum, чтобы сгенерировать этот контент и разместить абзацы по всей странице.

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

index.html

  ...
  
     

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

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

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

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

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

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

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

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

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

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

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

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

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

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

...

Наконец, добавьте , и комбинацию двух элементов вместе. Это предоставит примеры фраз, которые подчеркнуты в содержании:

Индекс

.html

  ...
     

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

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

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

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

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

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

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

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

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

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

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

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

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

...

Теперь, когда у вас есть HTML-код, сохраните index.html и откройте его в своем браузере, чтобы увидеть, как страница выглядит со стилями браузера по умолчанию:

Размер текста варьируется во всех элементах, при этом стили по умолчанию

и
меньше, чем текст

.

На этом этапе вы настраиваете HTML-контент, который будет стилизован на протяжении всей оставшейся части учебника.Затем вы будете работать со свойством font-family , узнать о стеке шрифтов , списке шрифтов, которые может использовать браузер, и применить шрифты к различным элементам.

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

Свойство

Затем вы будете работать со свойством CSS font-family и загрузить внешний файл шрифта из службы Google Fonts. Имя этого свойства происходит от термина типографики, который описывает набор шрифтов и варианты этого шрифта, включая полужирные и курсивные версии.У шрифта может быть множество из этих вариаций, но все они могут быть частью одного и того же семейства шрифтов , с теми вариациями, которые называются свойствами font-weight и font-style .

Чтобы начать работу с font-family , полезно понять подробности о его вариантах значений. Значение свойства font-family — это список шрифтов, называемый стеком шрифтов. Стек шрифтов работает как резервная система. Рассмотрим следующее значение свойства font-family :

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

Браузер сначала определит, доступна ли Helvetica Neue для использования, либо в виде шрифта, установленного на компьютере, либо в виде шрифта, предоставленного веб-сайтом.Если браузер не находит шрифт Helvetica Neue, он переходит вниз по списку к Helvetica, а затем к Arial. Если браузер не может найти какой-либо из этих шрифтов, то последний шрифт в списке, sans-serif , будет использовать то, что браузер установил в качестве шрифта по умолчанию для шрифта стиля sans-serif .

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

Создайте файл с именем styles.css в том же каталоге, что и index.html . Откройте его в текстовом редакторе и добавьте шрифт по умолчанию для страницы:

.

styles.css

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

В этом коде вы начинаете с селектора типа body со свойством font – family .Затем для стека шрифтов вы начинаете с «Avenir Next» , который будет доступен в браузерах iOS и macOS. Avenir Next заключен в кавычки, потому что название шрифта состоит из двух слов. Следующий шрифт — Calibri для браузеров Windows. Обязательно ставьте запятую между каждым объявлением шрифта. Чтобы обеспечить более общий запасной вариант шрифта, вы затем используете Verdana , который был широко доступен на компьютерах с начала 2000-х годов. И, наконец, поскольку все эти шрифты классифицируются как шрифты без засечек, вы добавляете браузер по умолчанию без засечек в качестве последней опции шрифта в стеке шрифтов.

Сохраните styles.css , затем откройте index.html в своем браузере. Вы найдете новый шрифт вместо шрифта браузера по умолчанию для содержимого. Если вы используете операционную систему Apple, Avenir Next будет отображаться в браузере. Если вы работаете в Windows, вместо этого будет отображаться Calibri. На следующем изображении показано, как этот стек шрифтов выглядит в MacOS:

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

Загрузка пользовательских шрифтов с помощью Google Fonts

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

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

Для начала откройте в браузере fonts.google.com .

В Google Fonts вы можете выбирать из множества различных шрифтов. В этом руководстве будут использоваться два: Public Sans и Quicksand.

В поле поиска Google Fonts найдите Public Sans . Когда карточка шрифта появляется из результатов поиска, отображается предварительный просмотр шрифта. Щелкните карточку, чтобы перейти на страницу шрифта:

На странице шрифтов Public Sans будут перечислены все варианты шрифта.Они известны как весов, , которые варьируются от 100 до 900. Для целей этого руководства найдите стили Regular (400) и Bold (700) и нажмите кнопку + Select this style next к каждому варианту стиля, а также их начертание курсивом.

Как только вы выберете первый стиль, появится выбранный семейный инструмент. Этот инструмент предоставит вам HTML и CSS, необходимые для использования этих шрифтов:

Выберите метод , чтобы загрузить шрифты в браузер и скопировать предоставленный HTML.Откройте index.html и добавьте код в элемент после , загружая styles.css . Не закрывайте Google Fonts, так как вы вернетесь к нему еще пару раз:

index.html

  ...

    
    

...
  

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

Вернитесь в Google Fonts, чтобы найти правило CSS, которое загружает Public Sans. Google Fonts предоставляет набор шрифтов Public Sans и стандартный для браузера шрифт sans-serif с семейством шрифтов : 'Public Sans', sans-serif; . Поскольку у вас уже есть стек шрифтов с резервными шрифтами, все, что вам нужно взять из примера Google Fonts, - это имя для ссылки на Public Sans.

Используя существующий стек шрифтов в styles.css , замените Avenir Next и Calibri на Public Sans :

styles.css

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

Теперь, когда объявлен базовый стек шрифтов, все шрифты на странице теперь являются Public Sans.

Одна из распространенных дизайнерских практик, позволяющих привлечь больше внимания к заголовкам, - использовать для заголовков шрифт, отличный от шрифта для основного текста.Чтобы применить это к своему собственному HTML, вернитесь в Google Fonts и выполните поиск «Quicksand». Это будет заголовок или шрифт display для элементов от

до
на странице.

После того, как вы нашли Quicksand, выберите карту шрифтов и добавьте полужирный шрифт , (600) и , полужирный, (700), к выбранным шрифтам вместе с Public Sans. Google Fonts предоставит новый URL-адрес для загрузки всех выбранных шрифтов и вариантов.Замените предыдущее значение href на новую ссылку в файле index.html :

index.html

  ...

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

...
  

Теперь, когда Quicksand настроен на загрузку в браузере, вам нужно применить его к тегам заголовков.Вы добьетесь этого, добавив список селекторов CSS, разделенных запятыми, который называется групповым селектором , в файл styles.css . В этом случае используйте стек шрифтов, предоставленный Google Fonts с Quicksand, а затем используйте шрифт браузера по умолчанию sans-serif :

styles.css

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

Сохраните изменения в файле styles.css и вернитесь в браузер, чтобы перезагрузить индекс .html . Не стесняйтесь закрыть Google Fonts на этом этапе. Когда браузер загрузится, вы увидите, что отображаются два шрифта. Теперь Quicksand присутствует во всех заголовках, а Public Sans - во всем остальном содержимом, включая содержимое, выделенное жирным шрифтом и курсивом.

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

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

font-weight и font-style Properties

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

Теперь, когда вы загружаете пользовательские шрифты из Google Fonts, вы можете приступить к точной настройке характеристик текста.Начиная со свойства font-weight , вы можете изменить толщину или тонкость отображения шрифта. Свойство font-weight имеет два общих значения: normal и bold . Нормальное значение - это по умолчанию font-weight для большей части текста в браузере. Значение полужирного шрифта по умолчанию — font-weight для заголовков и элементов. Но для этого урока вам нужно будет использовать числовые значения вместо имени нормальных и полужирных значений.

Числовой font-weight значений зависят от шрифта, который вы загружаете. Когда вы добавляли шрифт Public Sans из Google Fonts, вы выбрали толщину Обычный (400) и Полужирный (700). Цифры в скобках совпадают со значениями, необходимыми для ссылки и загрузки этого шрифта. Кроме того, значение font-weight из 400 является числовым эквивалентом нормального , например 700 является числовым эквивалентом жирного шрифта .Текст, использующий Public Sans, то есть все, кроме заголовков, будет автоматически использовать эти веса.

В качестве альтернативы, выбор шрифтов Quicksand включал полужирный (600) и полужирный (700) шрифт. Значение 600 не имеет числового эквивалента и должно быть определено с использованием числового значения.

Вы начнете с установки font-weight всех заголовков для полужирного варианта 600 Quicksand. В файле styles.css найдите селектор групп со всеми значениями заголовков и добавьте шрифт font-weight: 600; объявление в блок селектора:

стилей.css

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

После внесения этого изменения сохраните styles.css и повторно загрузите index.html в своем браузере. Вы увидите небольшое истончение заголовков по мере их изменения от значения 700 для Quicksand до значения 600 .

Теперь, когда вы настроили все элементы заголовка для использования начертания Quicksand 600 , все еще есть места для использования варианта шрифта 700 .Для начала создайте селектор типа h4 в вашем файле styles.css и добавьте font-weight: 700; в блоке селектора:

styles.css

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

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

Сохраните изменения в styles.css , а затем создайте новый селектор, нацеленный на текст, заключенный в теги и . В случае стилей, написанных до сих пор, этот вид текста будет выделен полужирным курсивом в варианте Public Sans. Вместо этого установите стили для использования стека шрифтов Quicksand.

Так как HTML, чтобы получить жирный курсив, это ... и ... , вам нужно будет создать селектор групп комбинаторов в файле styles.css , а затем применить свойство font-family с «Quicksand», без засечек как значение:

styles.css

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

После внесения этого дополнения в файл styles.css сохраните его, а затем перезагрузите index.html в своем браузере.Текст, который был выделен полужирным курсивом, теперь использует Quicksand и выделен курсивом, хотя Google Fonts не предоставляет курсивную версию шрифта. Это называется ложным курсивом , когда браузер понимает, что это содержимое должно быть курсивом по умолчанию, но, поскольку курсивный вариант не определен, вместо этого он искусственно наклоняет текст.

Свойство для обработки того, выделен ли текст курсивом или нет, — font-style . Варианты значений для свойства стиля шрифта : нормальный и курсив .Вместо использования имитационного полужирного шрифта измените стили для этого селектора, чтобы он не выделялся курсивом. Добавьте к селектору группы strong em, em strong в файле styles.css свойство font-style со значением normal :

styles.css

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

Это изменит текст, выделенный жирным курсивом, на полужирный шрифт Quicksand.

Сохраните изменения в styles.css и перезагрузите index.html в своем браузере, чтобы увидеть изменения:

Вы использовали свойства font-weight и font-style в этом разделе, чтобы применить вариации шрифта Quicksand, загруженного из Google Fonts. Затем вы воспользуетесь свойством font-size , чтобы создать более крупный и разборчивый текст с более четкой иерархией среди заголовков.

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

Свойство

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

Начните с установки размера шрифта по умолчанию в элементе body . Размер шрифта в браузере по умолчанию — 16px , но для большей разборчивости многих шрифтов может быть полезно быть немного больше.Откройте файл styles.css и добавьте размер шрифта : 18 пикселей; к корпусу элемент:

styles.css

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

Откройте в браузере index.html или обновите страницу. Изменение размера шрифта на в элементе body изменило все шрифты на странице, увеличив их размер.

Размеры шрифта по умолчанию для элементов имеют относительный размер на основе родительского элемента, в данном случае элемента , с использованием процентного значения для размера шрифта.Использование формулы (цель / база) * 100% даст вам процентное значение, которое относительно базового размера шрифта, установленного в элементе .

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

, равного 45px . Используя формулу, целевой размер составляет 45 пикселей , а базовый размер — 18 пикселей , поэтому формула для этого будет (45/18) * 100% , что дает 250% .Это означает, что предполагаемый размер для

будет в 2,5 раза больше размера базового font-size .

Верните вам файл styles.css и добавьте селектор элементов для h2 и добавьте размер шрифта : 250%; свойство и значение для установки размера шрифта:

styles.css

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

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

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

Откройте файл styles.css и начните с добавления комментария после свойства h2 font-size , объясняющего визуализированный размер. Затем для каждого заголовка примените формулу так, чтобы h3 имел размер шрифта , эквивалент 36px , h4 равнялся 32px , h5 до 26px , h5 до 22px , и, наконец, h6 до базового размера 18px .Размер по умолчанию элемента

меньше, чем базовый размер, поэтому установка его на 100% гарантирует, что он не опустится ниже базового значения:

styles.css

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

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

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

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

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

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

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

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

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

color для выделения текста

Основное внимание в следующем разделе уделяется свойству CSS color , использующему цвет для определения порядка и добавления смысла к содержанию. Цвет является одним из наиболее распространенных дизайнерских соображений, в частности, при определении различного значения текста. В этом разделе вы будете использовать именованных цветов для установки цвета текста. Именованные цвета — это набор предопределенных цветов, который вырос с годами; они соответствуют другим значениям веб-цветов, например, шестнадцатеричным цветовым кодам.В этом разделе будет использоваться список именованных цветов, который можно найти на странице Википедии о веб-цветах. Вы можете оставить страницу веб-цветов Википедии открытой в своем браузере для справки.

Как и в случае с font-size , вы собираетесь установить цвет по умолчанию для всего документа. Это повлияет на весь контент на странице, так как цвет является унаследованным значением для большинства элементов. Важно помнить о цветовом контрасте, поскольку он способствует разборчивости, особенно когда речь идет о том, чтобы сделать Интернет доступным для всех уровней зрения.Так как background-color останется белым по умолчанию, использование жирных, более темных цветов является хорошим ориентиром. Если вы хотите узнать больше о дизайне с доступным цветовым контрастом, посмотрите эту короткую серию видео по этой теме.

Чтобы начать использовать color , вернитесь к файлу styles.css в текстовом редакторе. Как и в случае с разделом font-size , найдите селектор body и добавьте свойство color . Цвет текста по умолчанию в большинстве браузеров - черный.Для доступного цветового контраста важно, чтобы основной цвет оставался темным на светлом фоне. Используйте именованный цвет DarkSlateGray , который здесь только верблюжий для удобочитаемости, но при желании может быть полностью в нижнем регистре:

styles.css

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

Сохраните файл styles.css и обновите index.html в браузере.Цвет содержимого изменится с черного на темно-сине-зеленый:

Теперь, когда основной цвет установлен, вы можете начать использовать другие цвета, чтобы обеспечить более визуальную иерархию. Начните с селектора h2 в файле styles.css и добавьте свойство color со значением Indigo :

.

styles.css

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

Сохраните стилей.css , вернитесь в браузер и обновите index.html . Текст

теперь имеет темно-фиолетовый цвет вместо темно-сине-зеленого цвета по умолчанию:

Затем вы примените цвета к другим заголовкам. Quicksand - это забавный закругленный шрифт, и вы используете необычный образец контента Cupcake Ipsum, поэтому создайте яркую и яркую цветовую схему, используя разные цвета для каждого заголовка. Вернитесь к styles.css и для каждого из селекторов заголовков добавьте свойство color и значение цвета.Для элемента h3 используйте MediumVioletRed , для h4 используйте LimeGreen , для h5 добавьте Chocolate , для h5 используйте Crimson , затем наконец для h Глубокий синий :

styles.css

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

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

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

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

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

После добавления свойств color к заголовкам сохраните styles.

Добавить комментарий

Ваш адрес email не будет опубликован.