Как поменять шрифт на сайте

Добавление шрифтов на веб-сайт

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

Выбор шрифтов для использования

Начните с просмотра библиотеки шрифтов. Необходимую языковую поддержку можно выбрать в раскрывающемся меню ЯЗЫКИ И ПИСЬМЕННОСТИ.

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

Создание веб-проекта

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

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

В окне «Добавить шрифты в веб-проект» можно назвать веб-проект и выбрать шрифты для включения.

1. Щелкните меню и выберите «Создать проект».
2. Назовите веб-проект.
3. Используйте флажки, чтобы выбрать типы насыщенности и стили шрифта, включаемого в проект.
4. Создайте проект.

Позже вы сможете вносить изменения в настройки проекта на странице Управление шрифтами.

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

Скопируйте код вставки и добавьте его к тегу на своем веб-сайте.

Нажмите «Готово», чтобы закрыть окно веб-проекта и продолжить просмотр. Чтобы добавить в проект дополнительные шрифты, нажмите кнопку на другом семействе шрифтов, затем в меню выберите название вашего проекта (вместо «Создать проект»).

Настройка веб-проекта

Веб-проект и все добавленные к нему шрифты будут указаны на странице Управление шрифтами.

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

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

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

Параметры font-display позволяют задавать режим загрузки веб-шрифтов в браузере и применение их на веб-сайте. Более подробную информацию можно найти на странице справки о параметрах font-display.

По окончании настройки проекта нажмите «Сохранить изменения», чтобы сохранить проект. Обновления будут доступны на веб-сайте через несколько минут.

Применение шрифтов в CSS

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

Разные шрифты на странице, как сделать?

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

Отслеживать
задан 18 янв 2021 в 6:07
150 11 11 бронзовых знаков

В стиле для указанных элементов указать другой шрифт: developer.mozilla.org/ru/docs/Web/CSS/font-family и developer.mozilla.org/ru/docs/Web/CSS/font-size А на скриншоте разве разные шрифты? По моему, только разный размер, шрифт один

18 янв 2021 в 6:15
Шрифт один, вот я и спрашиваю как сделать два разных, в заголовке один, а в описании другой
18 янв 2021 в 7:03

Как подключить второй шрифт на страницу? второй шрифт это другой шрифт, типа Arial и Times New Roman. Добавьте в те теги class и в css пропишите для указанных class размер

18 янв 2021 в 7:28

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

18 янв 2021 в 7:31
18 янв 2021 в 7:32

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

h1 < font-family: "Times New Roman", Times, serif; >div

Отслеживать
23.6k 4 4 золотых знака 35 35 серебряных знаков 68 68 бронзовых знаков
ответ дан 18 янв 2021 в 6:51
115 8 8 бронзовых знаков
А как добавить «кастомный» шрифт?
18 янв 2021 в 7:03

Чтобы изменить шрифт у какого-либо из элементов нужно использовать css-свойство font-family (developer.mozilla.org/ru/docs/Web/CSS/font-family).

Если нужно поставить нестандартный шрифт, надо указать браузеру на него ссылку, чтобы браузер мог его скачать (htmlbook.ru/blog/svoi-shrift-na-stranitse и stackoverflow.com/a/107951/5909792).

За помощь огромное спасибо — gil9red.

Отслеживать

• html
• css
• вёрстка

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.21.1314

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как поменять шрифт на сайте

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

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

Шрифт — это важно. Как воздух, который не замечаешь, пока все в порядке. Большинство людей понятия не имеют, как называются шрифты и чем они различаются (и это нормально), но безошибочно чувствуют, что с вашим сайтом что-то не то, если шрифт, который вы используете, не подходит вашему проекту.

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

В статье мы рассмотрели:

Как поменять и настроить шрифт для сайта на Тильде

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

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

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

Если представленные сочетания вам не подошли, нажмите «Расширенные настройки». Вы увидите все способы, как подключить шрифт к сайту на Тильде:
1) выбрать из базового набора
2) загрузить свой файл
3) подключить шрифт через Typekit
4) использовать Google Fonts
5) загрузить свой CSS файл
(По ссылкам подробные инструкции по каждому типу подключения).

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

Что такое насыщенность шрифта

Насыщенность (начертание, font weight) определяет толщину каждой буквы. Обычно мы привыкли называть текст нормальным (normal) и жирным (bold). У шрифтов могут быть так же дополнительные варианты толщин — от очень тонких (super light) до очень жирных (super bold). На Тильде поддерживаются 5 основных значений: light, normal, medium, semi-bold, bold. Не все шрифты имеют все градации насыщенности, многие имеют только два начертания: нормальное и жирное.

Семь вариантов насыщенности шрифта Avenir.
Каким должен быть размер шрифта на сайте

Размер зависит от количества текста. Если текста очень мало, и он используется, по сути, только для подписей и комментариев, сделайте его крупнее — 22px (по умолчанию в настройках 20px). Так он будет выглядеть более презентационно. Если текста достаточно много, наoборот, уменьшите до 18px, так он будет легче читаться.

Настройка параметров шрифта для разных типов проекта

Начнем с самого простого: какой у вас тип проекта — это статья, пост в блоге, рассказ, в общем, что-то, где текст — это главное? Или у вас сайт, лэндинг, фотоистория, — проект, в котором текста не так много? Назовем два типа проектов условно: статья и сайт.

Шрифт для сайта
(лэндинг, многостраничный сайт, интернет-магазин)
Шрифт для статьи
(пост в блоге, лонгрид, рассказ, интервью)

Настройка шрифтов для сайта в зависимости от тональности

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

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

Полужирный заголовок и нормальный текст
Semi-Bold+Normal

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

Для каких сайтов подойдет: для любых.

В настройках сайта задайте следующие параметры:
Text font weight — Normal
Headline font weight — Semi-Bold

Настройки сайта > Шрифты и цвета > Размер и насыщенность
Страница вакансии. В примере используются: Open Sans (для заголовков) и Roboto (для текста).

Жирный заголовок и нормальный текст
Bold+Normal

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

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

В настройках сайта задайте следующие параметры:
Text font weight — Normal
Headline font weight — Bold

Настройки сайта > Шрифты и цвета > Размер и насыщенность
Сайт коворкинга. В примере используются: Ubuntu (для заголовков) и PT Sans (для текста).

Жирный заголовок и тонкий текст

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

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

В настройках сайта задайте следующие параметры:
Text font weight — Light
Headline font weight — Bold

Настройки сайта > Шрифты и цвета > Размер и насыщенность
Страница дизайн-студии. В примере используются: Noto Sans (для заголовков) и Open Sans (для текста).

Тонкий заголовок и тонкий текст
Light +Light

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

Для каких сайтов подойдет: технологичные устройства, ювелирные украшения, дорогое кафе или ресторан, студия красоты.

В настройках сайта задайте следующие параметры:
Text font weight — Light
Headline font weight — Light

Настройки сайта > Шрифты и цвета > Размер и насыщенность
Лэндинг мобильного приложения для обработки фотографий.

Примеры сочетаний разных шрифтов

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

Сайт ювелирного магазина.

Анонс конференции по разработке приложений для мобильных телефонов.

Сайт юридической компании.

Как подобрать шрифт для статьи

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

Если у вас лонгрид или статья, в которой много текста, поставьте размер текста 18px. Но если у вас фотоотчет, и текст — это, в основном, подписи к фотографиям, то размер можно оставить 20px или увеличить до 22px.

В настройках сайта задайте следующие параметры:
Text font weight — Normal
Headline font weight — Bold / Semi-Bold
Text font size — 18px

Настройки сайта > Шрифты и цвета > Размер и насыщенность
Страница поста в блоге о моде.

Корпоративный блог.

Статья о контент-маркетинге.

С засечками или без?
Шрифт с засечками
Шрифт без засечек

Оранжевые частицы на изображении слева — это засечки. Цитата Массимо Винелли на картинке слева набрана шрифтом Baskerville Regular, справа — Helvetica Light.

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

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

Основы редактирования текста в HTML

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

Предварительные требования:	Базовое знакомство с HTML , описанное в Начало работы с HTML.
Задача:	Изучить базовые способы разметки текста путём добавлением на страницу структуры и значения — создать абзацы, заголовки, списки, акценты и цитаты..

Основы: Заголовки и абзацы / параграфы

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

Упорядоченный контент делает чтение более лёгким и приятным.

В HTML каждый абзац заключён в элемент , подобно:

p>Я параграф, да, это я.p> 

Каждый заголовок заключён в элемент заголовка (en-US):

h1>Я заголовок истории.h1> 

Имеется шесть элементов заголовка: (en-US), (en-US), (en-US), (en-US), (en-US) и (en-US). Каждый элемент представляет разный уровень контента в документе; представляет главный заголовок, представляет подзаголовки, представляет под-подзаголовки и так далее.

Создание иерархической структуры

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

h1>Сокрушительная скукаh1> p>Крис Миллсp> h2>Глава 1: Тёмная ночьh2> p>Это была тёмная ночь. Где-то кричала сова. Дождь обрушился на . p> h2>Глава 2: Вечное молчаниеh2> p>Наш главный герой ничего не мог, когда шёпот из тёмной фигуры . p> h3>Призрак говоритh3> p> Прошло ещё несколько часов, когда внезапно призрак выпрямился и воскликнул: «Пожалуйста, помилуй мою душу!» p> 

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

• Предпочтительнее использовать только один раз на странице — это заголовок самого верхнего уровня, и все остальные заголовки располагаются ниже его в иерархии.
• Убедитесь, что вы используете заголовки в правильном порядке в иерархии. Не используйте для создания подзаголовков при одновременном использовании для представления под-подзаголовков — это не имеет смысла и приведёт к странным результатам.
• Из шести доступных уровней заголовка вы должны стремиться использовать не более трёх на странице, если только вы не чувствуете, что это необходимо. Документы с большим количеством уровней (то есть с глубокой иерархией) становятся громоздкими и трудными для навигации. В таких случаях рекомендуется распределять контент по нескольким страницам, если это возможно.

Зачем нам необходима структура?

Чтобы ответить на этот вопрос, давайте посмотрим на text-start.html — отправную точку нашего примера для этой статьи (хороший рецепт хумуса). Вы должны сохранить копию этого файла на своём локальном компьютере, так как вам понадобится это для упражнений позже. Сейчас тело этого документа содержит несколько фрагментов контента — они не отмечены каким-либо образом, но они разделены разрывами строк (был нажат Enter / Return для перехода на следующую строку).

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

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

• Пользователи, просматривающие веб-страницу, быстро сканируют её в поиске подходящего контента, часто просто просматривая только заголовки (мы обычно тратим очень мало времени на веб-странице). Если они не смогут увидеть ничего полезного в течение нескольких секунд, они, скорее всего, расстроятся и отправятся куда-нибудь ещё.
• Поисковые системы, индексирующие вашу страницу, считают содержание заголовков важными ключевыми словами для влияния на ранжирование поиска страницы. Без заголовков ваша страница будет плохо работать с точки зрения SEO (Search Engine Optimization — поисковая оптимизация).
• Сильно слабовидящие люди часто не читают веб-страницы — они слушают их вместо этого. Это делается с помощью программного обеспечения, называемого программой чтения с экрана. Это программное обеспечение предоставляет способы быстрого доступа к данному текстовому контенту. Среди различных используемых методов они предоставляют схему документа, считывая заголовки, позволяя своим пользователям быстро находить нужную им информацию. Если заголовки недоступны, они будут вынуждены слушать весь документ вслух.
• Чтобы стилизовать контент с помощью CSS или сделать его интересным с помощью JavaScript, вам нужно, чтобы элементы обёртывали соответствующий контент, чтобы CSS и JavaScript смогли эффективно работать.

Поэтому нужно дать структурную разметку нашему контенту.

Активное изучение: создание структуры для нашего контента

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

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

h2>Результатh2> div class="output" style="min-height: 50px;">div> h2>Редактируемый кодh2> p class="a11y-label"> Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции). p> textarea id="code" class="input" style="min-height: 100px; width: 95%"> Моя мини-история Я полицейский, и моё имя Триш. Мои ноги сделаны из картона, и мой муж — рыба.textarea > div class="playable-buttons"> input id="reset" type="button" value="Сбросить" /> input id="solution" type="button" value="Показать решение" /> div> 

html  font-family: "Open Sans Light", Helvetica, Arial, sans-serif; > body  margin: 10px; background: #f5f9fa; > .input, .output  width: 90%; height: 6em; padding: 10px; border: 1px solid #0095dd; overflow: auto; > button  padding: 10px 10px 10px 0; > h2  font-size: 16px; > .a11y-label  margin: 0; text-align: right; font-size: 0.7rem; width: 98%; > 

var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); var solution = document.getElementById("solution"); var output = document.querySelector(".output"); var code = textarea.value; var userEntry = textarea.value; function updateCode()  output.innerHTML = textarea.value; > reset.addEventListener("click", function ()  textarea.value = code; userEntry = textarea.value; solutionEntry = htmlSolution; solution.value = "Показать решение"; updateCode(); >); solution.addEventListener("click", function ()  if (solution.value === "Показать решение")  textarea.value = solutionEntry; solution.value = "Спрятать решение"; > else  textarea.value = userEntry; solution.value = "Показать решение"; > updateCode(); >); var htmlSolution = "
Моя мини-история
\n
Я полицейский, и моё имя Триш.
\n
Мои ноги сделаны из картона, и мой муж — рыба.
"; var solutionEntry = htmlSolution; textarea.addEventListener("input", updateCode); window.addEventListener("load", updateCode); textarea.onkeydown = function (e)  if (e.keyCode === 9)  e.preventDefault(); insertAtCaret("\t"); > if (e.keyCode === 27)  textarea.blur(); > >; function insertAtCaret(text)  var scrollPos = textarea.scrollTop; var caretPos = textarea.selectionStart; var front = textarea.value.substring(0, caretPos); var back = textarea.value.substring( textarea.selectionEnd, textarea.value.length, ); textarea.value = front + text + back; caretPos = caretPos + text.length; textarea.selectionStart = caretPos; textarea.selectionEnd = caretPos; textarea.focus(); textarea.scrollTop = scrollPos; > textarea.onkeyup = function ()  if (solution.value === "Показать решение")  userEntry = textarea.value; > else  solutionEntry = textarea.value; > updateCode(); >; 

Почему мы нуждаемся в семантике?

Семантика проявляется всюду вокруг нас — мы полагаемся на опыт, который рассказывает нам, какова функция бытовых предметов; когда мы что-то видим, мы знаем, какова его функция. Так, например, мы ожидаем, что красный свет на светофоре означает «стоп», а зелёный свет означает «идти». Жизнь станет очень сложной, если применяется неправильная семантика (какие-либо страны используют красный цвет для обозначения «идти»? Надеюсь, что нет.)

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

h1>Это заголовок верхнего уровняh1> 

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

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

span style="font-size: 32px; margin: 21px 0;" >Это заголовок верхнего уровня?span > 

Списки

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

Неупорядоченные

Неупорядоченные списки используются для элементов, для которых порядок не имеет значения, — возьмём, к примеру, список покупок:

молоко яйца хлеб хумус

Последний шаг состоит в том, чтобы обернуть каждый элемент списка в элемент (элемент списка):

ul> li>молокоli> li>яйцаli> li>хлебli> li>хумусli> ul> 

Активное изучение: разметка неупорядоченного списка

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

h2>Результатh2> div class="output" style="min-height: 50px;">div> h2>Редактируемый кодh2> p class="a11y-label"> Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции). p> textarea id="code" class="input" style="min-height: 100px; width: 95%"> молоко яйца хлеб хумусtextarea > div class="playable-buttons"> input id="reset" type="button" value="Сбросить" /> input id="solution" type="button" value="Показать решение" /> div> 

html  font-family: "Open Sans Light", Helvetica, Arial, sans-serif; > body  margin: 10px; background: #f5f9fa; > .input, .output  width: 90%; height: 6em; padding: 10px; border: 1px solid #0095dd; overflow: auto; > button  padding: 10px 10px 10px 0; > h2  font-size: 16px; > .a11y-label  margin: 0; text-align: right; font-size: 0.7rem; width: 98%; > 

Упорядоченные

Упорядоченные списки — это списки, в которых порядок элементов имеет значение, — возьмём в качестве примера маршрут следования:

Двигайтесь до конца дороги Поверните направо Езжайте прямо через первые два перекрёстка с круговым движением Поверните налево на третьем перекрёстке Школа справа от вас, 300 метров вверх по дороге

ol> li>Двигайтесь до конца дорогиli> li>Поверните направоli> li>Езжайте прямо через первые два перекрёстка с круговым движениемli> li>Поверните налево на третьем перекрёсткеli> li>Школа справа от вас, в 300 метрах вверх по дорогеli> ol> 

Активное изучение: разметка упорядоченного списка

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

h2>Результатh2> div class="output" style="min-height: 50px;">div> h2>Редактируемый кодh2> p class="a11y-label"> Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции). p> textarea id="code" class="input" style="min-height: 200px; width: 95%"> Двигайтесь до конца дороги Поверните направо Езжайте прямо через первые два перекрёстка с круговым движением Поверните налево на третьем перекрёстке Школа справа от вас, 300 метров вверх по дорогеtextarea > div class="playable-buttons"> input id="reset" type="button" value="Сбросить" /> input id="solution" type="button" value="Показать решение" /> div> 

html  font-family: "Open Sans Light", Helvetica, Arial, sans-serif; > body  margin: 10px; background: #f5f9fa; > .input, .output  width: 90%; height: 6em; padding: 10px; border: 1px solid #0095dd; overflow: auto; > button  padding: 10px 10px 10px 0; > h2  font-size: 16px; > .a11y-label  margin: 0; text-align: right; font-size: 0.7rem; width: 98%; > 

Активное изучение: разметка собственной страницы рецептов

Итак, в этот момент в статье у вас есть вся необходимая информация, чтобы разметить наш пример страницы рецепта. Вы можете либо сохранить локальную копию исходного файла text-start.html и выполнить в нём работу, либо сделать это в приведённом ниже примере. Делать это локально, вероятно, будет лучше, так как тогда вы сможете сохранить работу, которую вы делаете, тогда как если вы её добавите в редактируемый пример, она будет потеряна при следующем открытии страницы. У обоих способов есть плюсы и минусы.

h2>Результатh2> div class="output" style="min-height: 50px;">div> h2>Редактируемый кодh2> p class="a11y-label"> Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции). p> textarea id="code" class="input" style="min-height: 200px; width: 95%"> Рецепт быстрого приготовления хумуса. Хумус — быстро, вкусно, — и ничего лишнего. Этот рецепт был составлен из других рецептов, которые мне попадались в течение многих лет. Хумус — это вкусная густая паста, широко используемая в Греческих и Ближневосточных блюдах. Очень вкусно есть его с салатами, мясом на гриле и питой. Ингредиенты 1 банка (400г) турецкого гороха (или бараньего гороха) 175г тахини 6 вяленых томатов Половинка красного перца Щепотка кайенского перца 1 зубчик чеснока Чуть-чуть оливкового масла Рецепт Очистите чеснок от кожуры и крупно нарежьте. Удалите стебель и семена у перца; крупно нарежьте перец. Добавьте все ингредиенты в пищевой комбайн. Измельчите все ингредиенты до состояния пасты. Если вы хотите "грубый" хумус, измельчайте пару минут. Если вам нужен гладкий хумус, измельчайте дольше. По вкусу вы также можете добавить в небольших количествах лимон с кориандром, перец чили, лайм с чипотле, хариссу с мятой или же шпинат с брынзой. Попробуйте и решите, что подойдёт вам. Хранение Храните хумус в запечатанном контейнере в холодильнике. Хумус хранится примерно неделю после приготовления. Если он начнёт пениться, выкидывайте его. Хумус можно хранить в морозильном отделении 2–3 месяца.textarea > div class="playable-buttons"> input id="reset" type="button" value="Сбросить" /> input id="solution" type="button" value="Показать решение" /> div> 

html  font-family: "Open Sans Light", Helvetica, Arial, sans-serif; > body  margin: 10px; background: #f5f9fa; > .input, .output  width: 90%; height: 6em; padding: 10px; border: 1px solid #0095dd; overflow: auto; > button  padding: 10px 10px 10px 0; > h2  font-size: 16px; > .a11y-label  margin: 0; text-align: right; font-size: 0.7rem; width: 98%; > 

Если вы застряли, вы всегда можете нажать кнопку Показать решение или проверить наш пример text-complete.html в нашем реестре github.

Вложенные списки

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

ol> li>Очистите чеснок от кожуры и крупно нарежьте.li> li>Удалите стебель и семена у перца; крупно нарежьте перец.li> li>Добавьте все ингредиенты в пищевой комбайн.li> li>Измельчите все ингредиенты до состояния пасты.li> li>Если вы хотите "грубый" хумус, измельчайте пару минут.li> li>Если вам нужен гладкий хумус, измельчайте дольше.li> ol> 

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

ol> li>Очистите чеснок от кожуры и крупно нарежьте.li> li>Удалите стебель и семена у перца; крупно нарежьте перец.li> li>Добавьте все ингредиенты в пищевой комбайн.li> li> Измельчите все ингредиенты до состояния пасты. ul> li>Если вы хотите "грубый" хумус, измельчайте пару минут.li> li>Если вам нужен гладкий хумус, измельчайте дольше.li> ul> li> ol> 

Попробуйте вернуться к предыдущему примеру активного обучения и обновить второй список.

Акцент и важность

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

Акцент

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

Я рад, что ты не опоздал.

Я рад, что ты не опоздал.

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

p>Я em>радem>, что ты не em>опоздалem>.p> 

Важное значение

Чтобы подчеркнуть важные слова, мы склонны подчёркивать их в устной речи и выделять жирным на письменном языке. Например:

Эта жидкость очень токсична.

Я рассчитываю на вас. Не опаздывай!

p>Эта жидкость strong>очень токсичнаstrong>.p> p>Я рассчитываю на тебя. strong>Не strong>опаздывай!p> 

При желании вы можете вложить важные и акцентированные слова друг в друга:

p> Эта жидкость strong>очень токсичнаstrong> — если ты выпьешь её, strong>то можешь em>умеретьem>strong >. p> 

Активное изучение: Давайте будем важны!

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

h2>Результатh2> div class="output" style="min-height: 50px;">div> h2>Редактируемый кодh2> p class="a11y-label"> Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции). p> textarea id="code" class="input" style="min-height: 200px; width: 95%"> h1>Важное объявлениеh1> p>9 января 2010 года, в воскресенье, банда вандалов была обнаружена за кражей нескольких садовых гномов из торгового центра в центре Милуоки. На них были надеты зелёные спортивные костюмы и глупые шляпы, и, по-видимому, они были в нетрезвом состоянии. Если у кого-то есть какая-либо информация об этом инциденте, пожалуйста, позвоните в полицию немедленно.p>textarea > div class="playable-buttons"> input id="reset" type="button" value="Сбросить" /> input id="solution" type="button" value="Показать решение" /> div> 

html  font-family: sans-serif; > h2  font-size: 16px; > .a11y-label  margin: 0; text-align: right; font-size: 0.7rem; width: 98%; > body  margin: 10px; background: #f5f9fa; > 

var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); var solution = document.getElementById("solution"); var output = document.querySelector(".output"); var code = textarea.value; var userEntry = textarea.value; function updateCode()  output.innerHTML = textarea.value; > reset.addEventListener("click", function ()  textarea.value = code; userEntry = textarea.value; solutionEntry = htmlSolution; solution.value = "Show solution"; updateCode(); >); solution.addEventListener("click", function ()  if (solution.value === "Показать решение")  textarea.value = solutionEntry; solution.value = "Спрятать решение"; > else  textarea.value = userEntry; solution.value = "Показать решение"; > updateCode(); >); var htmlSolution = "
Важное объявление
\n
9 января 2010 года, в воскресенье, банда вандалов была обнаружена за кражей нескольких садовых гномов торговом центре в центре Милуоки. На них были надеты зелёные спортивные костюмы и глупые шляпы, и, по-видимому, они были в нетрезвом состоянии. Если у кого-то есть какая-либо информация об этом инциденте, пожалуйста, позвоните в полицию немедленно.
"; var solutionEntry = htmlSolution; textarea.addEventListener("input", updateCode); window.addEventListener("load", updateCode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function (e)  if (e.keyCode === 9)  e.preventDefault(); insertAtCaret("\t"); > if (e.keyCode === 27)  textarea.blur(); > >; function insertAtCaret(text)  var scrollPos = textarea.scrollTop; var caretPos = textarea.selectionStart; var front = textarea.value.substring(0, caretPos); var back = textarea.value.substring( textarea.selectionEnd, textarea.value.length, ); textarea.value = front + text + back; caretPos = caretPos + text.length; textarea.selectionStart = caretPos; textarea.selectionEnd = caretPos; textarea.focus(); textarea.scrollTop = scrollPos; > // Update the saved userCode every time the user updates the text area code textarea.onkeyup = function ()  // We only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if (solution.value === "Показать решение")  userEntry = textarea.value; > else  solutionEntry = textarea.value; > updateCode(); >; 

Курсив, жирный шрифт, подчеркивание

Элементы, которые мы обсуждали до сих пор, имеют чёткую привязку к семантике. Ситуация с , (en-US) и (en-US) несколько сложнее. Они появились в эпоху, когда CSS поддерживался плохо или вообще не поддерживался, чтобы люди могли писать жирный текст, курсив или подчёркнутый текст. Такие элементы, которые влияют только на внешний вид, а не на семантику, известны как элементы представления и больше не должны использоваться, поскольку, как мы видели ранее, семантика очень важна для доступности людям с ограниченными возможностями, SEO и так далее.

HTML5 переопределил , и с новыми, несколько запутанными, семантическими ролями.

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

• (en-US) используется для передачи значения, традиционно передаваемого курсивом: иностранные слова, таксономические обозначения, технические термины, мысли .
• используется для передачи значения, традиционно передаваемого жирным шрифтом: ключевые слова, названия продуктов, предложения .
• (en-US) используется для передачи значения, традиционно передаваемого подчёркиванием: имя собственное, орфографическая ошибка .

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

p> Колибри обыкновенный (i>архилоус обыкновенныйi>) — наиболее часто встречающийся вид колибри в северо-восточной Америке. p> p> Случился прилив иностранных слов, таких как i lang="uk-latn">vatrushkai>, i lang="id">nasi gorengi> и i lang="fr">soupe à l'oignoni>. p> p>Когда-нибудь я узнаю, как u>гаваритьu> без ошибок.p> ol> li>b>Отрежьтеb> два ломтика хлеба.li> li>b>Добавьтеb> кусочек помидора и лист латука между ломтями хлеба.li> ol> 

Заключение

Вот и всё! Эта статья должна была дать вам хорошее представление о том, как начать разметку текста в HTML, и познакомить вас с некоторыми из наиболее важных элементов в этой области. В этой области есть намного больше семантических элементов, и мы рассмотрим их в нашей статье «Больше семантических элементов» позже в курсе. В следующей статье мы подробно рассмотрим, как создавать гиперссылки, возможно, самый важный элемент в Интернете.

В этом модуле

• Начало работы с HTML
• Что такое заголовок? Метаданные в HTML
• Основы редактирования текста в HTML
• Создание гиперссылок
• Углублённое форматирование текста
• Структура документа и веб-сайта
• Отладка HTML
• Разметка письма
• Структурируем страницу

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.