элемента. Для размера шрифта первого абзаца установлено значение 50% , а для второго абзаца установлено значение 200% . Первый элемент

будет иметь размер 18 пикселей, а второй — 27 пикселей. Вот как этот код выглядит в действии:

См. размер шрифта Pen: процент от HubSpot (@hubspot) на CodePen.

Адаптивный текст

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

Единица vw — еще одна относительная единица. Однако это относится не к родительскому элементу или корневому элементу, а к ширине окна просмотра. Если быть точным, 1 vw равен 1% области просмотра. Это означает, что если окно просмотра имеет ширину 100 пикселей, 1vw равно 1 пикселю.

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

См. размер шрифта Pen: vw by HubSpot (@hubspot) на CodePen.

А вот как выглядит текст при изменении размера области просмотра:

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

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

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

См. размер шрифта Pen: vw с медиа-запросом от HubSpot (@hubspot) на CodePen.

А вот как выглядит текст при изменении размера области просмотра:

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

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

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

Как изменить шрифт в HTML: изменить тип, размер и цвет

Изменив шрифт вашего веб-сайта в HTML, вы можете оживить свой сайт. Прочитайте это, чтобы узнать, как изменить шрифт в HTML.

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

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

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

Понимание типов шрифтов

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

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

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

Зачем менять шрифт в HTML?

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

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

Освежите свой веб-сайт

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

Допустим, вы используете стандартный шрифт Times New Roman с тех пор, как создали свой веб-сайт пять лет назад. Ваши постоянные посетители видели это каждый раз, когда посещали ваш сайт. Времена изменились, и многие ваши новые зрители ищут гораздо больше, когда посещают сайт. Поэтому с изменением времени необходимо изменить и шрифт вашего веб-сайта.

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

Выделение важных функций

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

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

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

Укрепление фирменного стиля

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

Укрепление индивидуальности вашего бренда — еще одна причина время от времени немного менять шрифты. Помните, что ваш бренд и логотип во многом определяют вашу личность в Интернете. Точно так же, как золотые арки означают «Макдональдс», ваш логотип символизирует ваш бренд. Итак, если вы знаете, как менять шрифты в HTML, вы сможете внести изменения, необходимые для укрепления вашего бренда. Кроме того, помните, что когда вы меняете шрифт, это замечают не только посетители — это могут заметить и поисковые системы, а это важно для SEO.

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

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

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

Как изменить тип шрифта с помощью HTML

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

Чтобы изменить тип шрифта, выполните следующие действия. Следующий метод используется для объединения старой школы HTML с более современным CSS (каскадные таблицы стилей).

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

HTML:

Напишите здесь то, что вы хотите написать, комбинируя CSS с HTML, чтобы браузер подбирал символ абзаца в CSS.

Как изменить размер шрифта с помощью HTML

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

CSS: п { размер шрифта: 16px; }

HTML: Результирующий HTML будет выглядеть примерно так:

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

Как изменить цвет шрифта с помощью HTML

CSS: п { цвет: #FF7A59; }

HTML:

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

Примечание. Если вы поместите теги

(абзац) в заголовок, то ссылайтесь на CSS как {inline CSS}, в большинстве случаев это должно работать нормально, так как браузер будет интерпретировать это как ссылка на заголовок, который содержит новый цвет, размер или стиль шрифта. Немного практики делает совершенным!

Советы по выбору шрифта для веб-сайта вашей компании

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

Выберите шрифт, соответствующий вашему бренду.

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

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

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

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

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

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

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

Ключ к простоте

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

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

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

Рассмотрите возможность использования универсального шрифта.

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

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

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

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

Устранение неполадок со шрифтами

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

Где найти шрифты, соответствующие вашему бренду

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

Используйте шрифт вашей компании во всех маркетинговых каналах

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

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

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