HTML5 - Работа с источниками - Часть 1

{title}

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

  • font-family: определяет семейство шрифтов для блока текста.
  • размер шрифта: определяет размер шрифта для блока текста.
  • font-style: укажите стиль шрифта, он может быть обычным, курсивом, наклонным.
  • font-option: указывает, может ли текст блока показываться шрифтом smallcaps, его возможные значения - smallcaps и normal.
  • font-weight: укажите вес шрифта для блока текста, то есть толщину шрифта, его значения могут быть обычными, полужирными, полужирными, светлее.
  • font: Ярлык, позволяющий указывать шрифт в одной строке.
Выбор источника
Свойство font-family определяет группу шрифтов, которые будут использоваться путем установления порядка предпочтений, так что если один из них недоступен, он передается следующему в порядке предпочтения. Браузер запускается с первого источника списка и продолжает попытки для каждого из источников в установленном порядке, пока не найдется тот, который вы можете использовать.
Это происходит потому, что нам может потребоваться использовать источники, которые установлены на ПК пользователя или принадлежат к определенной операционной системе, чтобы, если другой пользователь не соответствует требованиям, мы могли контролировать, как повлияет наш документ.
Наконец, давайте посмотрим список общих источников, которые должны быть доступны в качестве стандарта для всех систем и с которыми у нас не должно быть проблем.
  • засечка
  • без засечек
  • скоропись
  • фантастика
  • моноширинный
Очень хорошо, поскольку мы рассмотрели теоретический аспект управления источниками, давайте посмотрим на примеры с кодом, где мы получим наши знания о том, как реализовать на практике все, что мы изучили:
 Пример p {padding: 5px; граница: средняя двойная черная; цвет фона: светло-серый; поле: 2px; плавать: слева; семейство шрифтов: "HelveticaNeue Condensed", моноширинный; }

Есть много разных видов фруктов - только более 500 сортов бананов. К тому времени, когда мы добавим бесчисленные виды яблок, апельсинов и других известных фруктов, мы столкнулись с тысячами вариантов.


В этом коде мы видим, что в семействе шрифтов был определен нестандартный шрифт, поскольку он является фирменным шрифтом HelveticaNeue Condensed, а затем в качестве второго предпочтения мы устанавливаем моноширинный код, давайте посмотрим, как мы можем видеть это в браузере для каждого из определенных случаев.
[attachment = 861: html5fuentes.webp]
Слева от изображения мы видим случай, когда нет источника, который был помещен в качестве первого выбора, то есть моноширинный шрифт, с правой стороны мы видим собственный шрифт.
На этом мы завершим урок, зная теоретические основы и применив их на практике, мы уже можем немного поиграть с источниками нашего приложения и достичь визуально более привлекательных результатов и в соответствии с тем, что мы хотим.
Вы можете продолжить чтение части 2 этого урока.