Drovosek01

User agent stylesheet - это стили браузера. В данном случае они устанавливают отображение в виде блока для тега <div>. На float это не влияет.

Я бы посоветовал использовать пакет для подключения, в разных форматах.
Компиляция происходит очень просто https://fontie.pixelsvsbytes.com/webfont-generator
Выбираете: Formats ставите галочку на TrueType Font.
После этого, загружаете любой из скачанных шрифтов (формат не важен) нажав на ссылку выше "Add your font files (or just drop them on the page)". Жмем "Generate & download your @font-face package" и скачиваем архив с генерированными шрифтами.

Следующий шаг: Открываем архив и копируем все шрифты(.ttf, .eot, .svg, .woff и .woff2) в директорию с проектом в папку fonts. В скачанном архиве, открываем файл *.css он там один и копируем стиль для шрифта в отдельный файл стилей шрифтов (как правило это файл _fonts.sass) подключенный к основному стилевому файлу к примеру так: ...где fonts это имя вашего sass файла со шрифтами.
Пример комплекта подключения:

(копируем в файл _fonts.sass) структура может изменяться исходя из имени вашего шрифта.

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

Я делал так

@font-face
    font-family: "RobotoRegular"
    src : url("../fonts/RobotoRegular/RobotoRegular.ttf")

В отдельном файле fonts.sass , a затем подключал к основному файлу main.sass вот так
@import "app/sass/fonts.sass"

jquery toggle

Дополню ответы по поводу соответствия макетам. Иногда бывает, что макеты есть, но только часть из них вычищена и доведена до совершенства - одинаковые отступы, размеры шрифтом, междустрочные интервалы и тд. А на некоторых страницах или элементах/блоках могут встречаться неточности (чуть больше паддинг с одной стороны и тд). Так вот в таких случаях pixel perfect имеет более широкое значение. Я так говорю - это когда из дизайна пиксель-в-пиксель делается стайлгайд, где все элементы одинаковы. И дальше этот стайлгайд уже используется при сборке. Потому что если у нас у кнопки паддинги 10/20, то они у всех кнопок этого типа должны быть такие, по всему сайту. Даже если дизайнер на какой-то из страниц был неаккуратен и допустил 10/19 пикселей. В подобных случаях надо делать по стайлгайду и просить передать дизайнеру, что он неряха. Говорю об этом, потому что на практике встречал верстальщиков, которые таки пилили фанатично пиксель-в-пиксель, и все погрешности дизайнера в результате превращались в кучу magic numbers в CSS.

@font-face {
font-family: "PT Serif";
  src: url("../fonts/ptserif-normal.eot");
  src: local('☺'), 
  url("../fonts/ptserif-normal.eot?#iefix") format("embedded-opentype"), 
  url("../fonts/ptserif-normal.woff") format("woff"),
  url("../fonts/ptserif-normal.ttf") format("truetype"), 
  url("../fonts/ptserif-normal.svg#PT Serif") format("svg");

  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "PT Serif";
  src: url("../fonts/ptserif-bold.eot");
  src: local('☺'), 
  url("../fonts/ptserif-bold.eot?#iefix") format("embedded-opentype"), 
  url("../fonts/ptserif-bold.woff") format("woff"), 
  url("../fonts/ptserif-bold.ttf") format("truetype"), 
  url("../fonts/ptserif-bold.svg#PT Serif") format("svg");

  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "PT Serif";
  src: url("../fonts/ptserif-italic.eot");
  src: local('☺'), 
  url("../fonts/ptserif-italic.eot?#iefix") format("embedded-opentype"), 
  url("../fonts/ptserif-italic.woff") format("woff"), 
  url("../fonts/ptserif-italic.ttf") format("truetype"), 
  url("../fonts/ptserif-italic.svg#PT Serif") format("svg");

  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "PT Serif";
  src: url("../fonts/ptserif-bolditalic.eot");
  src: local('☺'), 
  url("../fonts/ptserif-bolditalic.eot?#iefix") format("embedded-opentype"), 
  url("../fonts/ptserif-bolditalic.woff") format("woff"), 
  url("../fonts/ptserif-bolditalic.ttf") format("truetype"), 
  url("../fonts/ptserif-bolditalic.svg#PT Serif") format("svg");

  font-weight: bold;
  font-style: italic;
}

В font-weight можно использовать не ключевые слова, а цифры

100 Ultra Light
200 Thin
300 Light
400 Regular, Normal
500 Roman
600 Medium, SemiBold
700 Bold
800 Heavy, ExtraBold
900 Black

При использовании указывать font-weight и font-style, в зависимости от их комбинаций будет выбран нужный файл шрифта

UPD: Если вам не нужно поддерживать совсем уж древние браузеры IE8 (eot) и Android 4.3 (ttf) то достаточно подключить только woff и woff2.
Svg нужен для Safari версии ниже 5.1

Подробнее смотрите на caniuse.com

Хорошая статья на эту тему nicothin.pro/page/web-fonts

@font-face { 
  font-family: 'Web font'; 
  src: url('webfont.woff2') format('woff2'), 
       url('webfont.ttf')  format('truetype'), /* Только если нужна поддержка старых Android, иначе закомментировать */ 
       url('webfont.woff') format('woff'); 
  font-weight: normal; 
  font-style: normal; 
}

Есть два варианта получить данные. Можно пассивным способом, это когда мы сами делаем запрос на получение и нам приходит ответ (вариант pull). И есть второй вариант, когда данные сами нас уведомляют об изменениях и выталкивают данные нам (вариант push). Реактивное приложение, это когда приложение само извещает нас об изменении своего состояния. Не мы делаем запрос и проверяем, а не изменилось ли там что-то, а приложение само нам сигнализирует. Ну и конечно эти события, эти сигналы мы соответственно можем обрабатывать.

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

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

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

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

На фреймворк начинают смотреть, если задача отличается от типовой.

MVC - это просто свойство. Которое может быть присуще любому типу ПО из этих двух. Это как зеленая легковушка и зеленый трактор. То что они оба зеленых не дает же вам основания говорить - "они оба зеленых, поэтому я буду пахать на легковушке"