Сайт

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

14.05.2023

Содержание

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

Раздел: Сайтостроение / HTML /

План заработка в Интернете

Как правильно выбрать партнерские программы, чтобы гарантированно зарабатывать? Что необходимо сделать вначале, чтобы ваш заработок был стабильным и предсказуемым? Возможно ли стартовать вообще без денег и каких-либо вложений в рекламу? Этот план поможет вам сделать первые шаги к заработку, даст ответы на важные вопросы и убережет от ошибок в начале пути. Подробнее…

Шрифт (нем. Schrift от schreiben «писать») — это (согласно Википедии) графический рисунок начертаний букв и знаков, составляющих единую стилистическую и композиционную систему, набор символов определённого размера и рисунка.

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

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

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

С помощью тега <font> можно изменять стиль, цвет и размер текста. Основные атрибуты тега <font>:

  • color — устанавливает цвет текста.
  • face — изменяет шрифт в HTML (это как раз то, что нам нужно).
  • size — устанавливает размер букв.

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

Теперь о том, как изменить шрифт текста в HTML. Для этого используется атрибут face. Если хотите, чтобы текст выводился одним определённым шрифтом, то сделать это можно так:


<font face="Arial">
Для этого текста установлен шрифт Arial
<font>

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

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


<p>
<font face="MyFont, Verdana, Arial">
Для этого текста установлен шрифт MyFont
<font>
</p>

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

Verdana. Если бы и этого шрифта в закромах браузера не оказалось, то он бы вывел текст шрифтом Arial.

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

На рисунке пример отображения текста несколькими шрифтами:

Примеры отображения разных шрифтов в браузере.

В теге <font> это можно сделать с помощью атрибута size. Размер может быть абсолютным и относительным.

Абсолютный размер устанавливается путём передачи в атрибут непосредственного значения от 1 до 7. Например, ниже мы устанавливаем для шрифта размер 3:


<font size="3">
Размер шрифта 3
<font>

Если установить атрибут size менее 1 или более 7, то браузер автоматически ограничит размер шрифта. Пример вы можете увидеть на рисунке ниже — несмотря на то, что мы попытались установить размер 8, браузер отобразил шрифт таким же размером, как и размер 7.

Примеры отображения шрифтов разных размеров в браузере.

Относительный размер устанавливается путём передачи в атрибут числа со знаком + (плюс). Например, вот такой HTML-код:


<p>
<font size="3">
Размер шрифта 3
<font>
</p>

<p>
<font 
size="+2"
> Размер шрифта 5 (3 + 2) <font> </p> <p> <font size="5"> Размер шрифта 5 <font> </p>

Здесь мы сначала установили шрифт размером 3. Затем увеличили этот шрифт на 2 (то есть сделали размер шрифта равным 5). Ну а далее, чтобы убедиться, что это всё правильно работает, снова установили абсолютный размер шрифта. На рисунке ниже видно, что это действительно работает так, как и задумывалось:

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

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

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

Для лучшего понимания посмотрите видео (выше) и изучите курс о вёрстке сайтов.


Как создать свой сайт

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

Помощь в технических вопросах

Помощь студентам.

Курсовые, дипломы, чертежи (КОМПАС), задачи по программированию: Pascal/Delphi/Lazarus; С/С++; Ассемблер; языки программирования ПЛК; JavaScript; VBScript; Fortran; Python; C# и др. Разработка (доработка) ПО ПЛК (предпочтение — ОВЕН, CoDeSys 2 и 3), а также программирование панелей оператора, программируемых реле и других приборов систем автоматизации. Подробнее…

CSS: Изменение шрифта

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

Разница между семействами шрифтов Sans-serif и Serif

PuzzleWeb. ru — шрифт sans-serif

PuzzleWeb.ru — шрифт serif

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

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

  • sans-serif — шрифты без засечек, считается что они лучше читаются на экране компьютера, чем шрифты семейства serif.
  • serif — семейство шрифтов с засечками. У многих людей они ассоциируются с газетными статьями. Засечки — декоративные штрихи и черточки по краям букв.
  • monospace — семейство, состоящее из шрифтов, символы которых имеют одинаковую фиксированную ширину. Такие шрифты используются в основном для отображения примеров кода программы.
  • cursive — шрифты, имитирующие рукописный текст.
  • fantasy — художественные и декоративные шрифты. Они не очень широко распространены, доступны не на всех компьютерах и редко используются в веб-дизайне.

Свойство font-family дает возможность изменить шрифт, заданный по умолчанию.

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


body {
  font-family: Verdana, Helvetica, Arial, sans-serif;
}

Рассмотрим, как браузер обрабатывает список шрифтов, заданный в нашем свойстве font-family:

  1. Сначала он проверяет, установлен ли шрифт Verdana на компьютере, и, если да, использует его в качестве шрифта для текста внутри элемента (в нашем случае внутри элемента <body>)
  2. Если Verdana не установлен, то ищет шрифт Helvetica. В случае успешного поиска использует его внутри <body>.
  3. Если и Helvetica не установлен, то ищет шрифт Arial. Если он имеется на компьютере, то применяет его внутри <body>.
  4. И наконец, если ни один из указанных шрифтов не найден, применяется первый, найденный браузером на компьютере шрифт из семейства sans-serif. Таким образом браузер сможет самостоятельно определить подходящий шрифт из семейства.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p.exserif { font-family: "Times New Roman", Times, serif; }
      p.exsansserif { font-family: Arial, Helvetica, sans-serif; }
    </style>
  </head>

  <body>
    <h2>CSS свойство font-family</h2>
    <p>Абзац использующий шрифт Times New Roman.</p>
    <p>Абзац использующий шрифт Arial.</p>
  </body>
</html>

Попробовать »

Примечание: при выборе только одного определенного шрифта важно понимать то, что браузер отобразит его только в том случае, если данный шрифт установлен на компьютере пользователя. Если шрифт не будет найден, то текст будет отображен шрифтом «Times New Roman», который задан по умолчанию во всех браузерах.

С этой темой смотрят:

  • Отступ текста в CSS
  • Выравнивание текста в CSS
  • Цвет и тень текста в CSS
  • CSS стиль и размер шрифта
  • Стандартные (безопасные) шрифты

Как изменить шрифт в 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:

Как изменить тип шрифта с помощью HTML [внутренний CSS]

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

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

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

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

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

Как изменить размер шрифта с помощью HTML [внутренний CSS]

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

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

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

HTML:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как изменить текст вашего веб-сайта с помощью свойства CSS font-family

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

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

Какова цель текста на веб-сайте?

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

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

Что такое свойство семейства шрифтов?

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

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

Пример синтаксиса семейства шрифтов

 
selector{

семейство шрифтов: firstFontType, 'второй тип шрифта', genericFontType;
}

Селектор в приведенном выше примере может быть идентификатором, классом или элементом HTML. Как правило, селектор — это основной элемент, который гарантирует, что каждый мир на данной веб-странице принадлежит к одному и тому же семейству шрифтов.

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

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

Ниже приведены различные типы шрифтов, которые вы можете использовать:

  • Serif
  • SANS-SERIF
  • Cursive
  • Fantasy
  • MOMOSPASE

Примеры Gipally in Action

5

. Chrome и Firefox используют шрифт Times New Roman по умолчанию. Однако вы можете указать тип шрифта для своего веб-сайта, используя свойство font-family.

Веб-страница, не использующая свойство font-family, выдаст в вашем браузере следующее.

Чтобы изменить текст на изображении выше, вам нужно использовать элемент body, который нацелен на весь текст на веб-странице.

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

 

body{
       семейство шрифтов: 'Franklin Gothic Medium', 'Arial Narrow', Arial, без засечек;
      }

Приведенный выше код устанавливает семейство шрифтов на веб-странице Franklin Gothic Medium ; если этот шрифт недоступен в локальном файле браузера, он перейдет к Шрифт Arial Narrow . Последний тип шрифта в стеке — Arial , и если он также недоступен, браузер выберет доступный тип шрифта из общего семейства шрифтов: без засечек .

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

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

Код, упомянутый в начале этого раздела, выведет в браузере следующий вывод.

Разница между шрифтом Franklin Gothic Medium и типом шрифта Times New Romans по умолчанию поразительна. Это связано с тем, что Franklin Gothic Medium относится к шрифту без засечек 9. 0224, а шрифт Times New Romans принадлежит семейству serif .

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

Типы блочных шрифтов Пример: использование идентификаторов

 
 #content-1{
 font-family: ‘Courier New’, Courier, monospace;
 }

Если вашей целью является изменение текста одного абзаца в группе (как это обычно бывает с блочными кавычками), вы также можете настроить таргетинг на определенные абзацы с идентификаторами. Приведенный выше код использует идентификатор для изменения типа шрифта второго абзаца (в группе) с 9 по умолчанию.0223 шрифта Times New Romans на шрифт Cursive . Вы можете увидеть эффект этого кода на изображении ниже.

Выбор типов шрифтов для заголовков Пример: селектор h2

 
h2{
           семейство шрифтов: Arial, Helvetica, sans-serif;
       }

Приведенный выше код выведет в вашем браузере следующий вывод.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *